如何使用ajax在不同的dom元素中显示数据


how to display data with ajax in diffrent dom elements?

我想将Ajax函数从php文件接收的数据显示为不同的HTML元素。

function getdetails(x)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("fname").value=xmlhttp.responseText;
     }
  }

对此使用jQuery:

$.ajax({
   type:'GET', 
   url:'url/to/the/file.php',
}.done(function( msg ) {
   $('#id-of-element').html(msg);
   $('.class-of-other-element').html(msg); // another element
   $('.class-of-another-element').html(msg); // another element
});

说明:

type: GET // type of http request to the file, could also be POST 
url: 'url/to/the/file.php' // provide the file and path to file to communicate with
.done (function(msg)) {  // when ajax request is completed (if), then assign the variable 'msg' with the contents of the return.
$('#id-of-element').html(msg); // assign the return data to the html element of your choice. 

编辑:

如果您期望2个变量,那么在PHP文件中返回它们,如下所示:

echo $var1."/".$var2  // where '/' is a symbol you never expect to be returned in either variable. 

然后在您的Ajax中:

$.ajax({
   type:'GET', 
   url:'url/to/the/file.php',
}.done(function( msg ) {
   var content = msg; 
   var varSplit = msg.split('/'); //where '/' is the symbol you chose to use in the stage above.
   var var1     = varSplit[0];
   var var2     = varSplit[1];
   $('.first-element').html(var1);
   $('.second-element').html(var2);
});