Question

我是第一次使用Ajax而且我正在尝试将ajax请求从javascript转换为jquery并且无法弄清楚如何执行此操作。这是我的javascript代码：

＆＃13;

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;
  }
};

＆＃13;

这是list.php：

＆＃13;

<?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>";
?>

＆＃13;

任何人都可以帮助我吗？提前谢谢！

Answer 1

虽然其他答案将会完成工作＆＃34;但您可以进行一些改进。

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，那么就无法做到这一点。< / p>

<?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);

?>

Answer 2

相当于在jQuery中制作AJAX是$.ajax()。您还可以将响应中的XML放入jQuery对象中并遍历该查找以查找所需的值。鉴于您已经显示的逻辑，您可以像这样实现它：

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

这假设目标元素的firstChild是textNode。

Answer 3

jQuery.ajax()方法用于执行AJAX（异步HTTP）请求。

＆＃13;

function aaa(track_id) {
  $.ajax({
    url: "list.php?tr=" + track_id,
    dataType: "json",
    success: function (result) {
      bbb(result);
      }
  });
}
    
function bbb(e)	{
  
    antwort = e;
    document.getElementById("title").firstChild.nodeValue = antwort.getElementsByTagName("ti")[0].firstChild.nodeValue;
    document.getElementById("artist").firstChild.nodeValue = antwort.getElementsByTagName("art")[0].firstChild.nodeValue;
};

＆＃13;

将Ajax请求从Javascript转换为jQuery

3 个答案: