javascript - 将 Ajax 请求从 Javascript 转换为 jQuery

Question

我是第一次使用 Ajax，我正在尝试将 ajax 请求从 javascript 转换为 jquery，但不知道该怎么做。这是我的 JavaScript 代码:

function aaa(track_id) {
	var req = new XMLHttpRequest();
	req.open("get", "list.php?tr=" + track_id, true);
	req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	req.onreadystatechange = bbb;
	req.send();
}
    
function bbb(e)	{
  if(e.target.readyState == 4 && e.target.status == 200) {
    antwort = e.target.responseXML;
    document.getElementById("title").firstChild.nodeValue = antwort.getElementsByTagName("ti")[0].firstChild.nodeValue;
    document.getElementById("artist").firstChild.nodeValue = antwort.getElementsByTagName("art")[0].firstChild.nodeValue;
  }
};

这是 list.php:

<?php
   header("Content-Type: text/xml; charset=utf-8");

   $con = mysqli_connect("", "root", "", "music");
   $res = mysqli_query($con, "SELECT * FROM tracks WHERE track_id = " . $_GET["tr"]);
   $dset = mysqli_fetch_assoc($res);

   echo "<?xml version='1.0' encoding='utf-8'?>";
   echo "<data>";
   echo " <tr>" . $dset["track_id"] . "</tr>";
   echo " <ti>" . $dset["title"] . "</ti>";
   echo " <art>" . $dset["artist"] . "</art>";
   echo "</data>";
?>

有人可以帮助我吗？提前致谢!

Answer 1

虽然其他答案可以“完成工作”，但您可以进行一些改进。

jQuery 有一个特定的 get方法简化了事情，此外，您可以将数据放入传递给 get 或 ajax 调用的对象中，而不是像其他答案中那样将其附加到 url 中:

function aaa(track_id) {
  $.get( 'list.php',
    { tr: track_id },
    function(data) {
      var $antwort = $(data.responseXML);
      $("#title").text($antwort.find("ti").text());
      $("#artist").text($antwort.find("art").text());
    }
    );
}

另一个改进是将其构建为 Promise:

function aaa(track_id) {
  $.get( 'list.php',
    { tr: track_id }
  ).done( function(data) {
      var $antwort = $(data.responseXML);
      $("#title").text($antwort.find("ti").text());
      $("#artist").text($antwort.find("art").text());
  });
}

这样做的优点是您可以相对轻松地将错误处理链接到此。

转向list.php，它有一些问题。

返回 JSON 而不是 XML 可能会更好，因为这会降低 success 代码的复杂性，但显然如果其他应用程序需要 XML API，您就无法执行类似的操作。

<?php

// protect against MySQL injection by using parameters...

$query = '
  SELECT track_id AS tr, title as ti, artist as art
  FROM tracks
  WHERE track_id=?';


$mysqli = new mysqli("", "root", "", "music");

// this needs more error checking...
$stmt = $mysqli->prepare( $query);
$stmt->bind_param( 's', $_GET['tr']);
$stmt->execute();
$result = $stmt->get_result();

$dset = $result->fetch_assoc();

// simpler to return JSON
header('Content-Type: application/json');
echo json_encode( $dset);

?>