Question

我想用AJAX替换div的内容。虽然应用程序相当复杂，但我一直试图将其简单化，以便我能够首先使用基本概念。

现在，我只想根据PHP文件替换div ...

<?php 
$id = $_GET['id'];
if ($id = 1)
    {
        $text = 'This is some text';
    }
elseif ($id = 2) {
    {
        $text = 'This is a lot more text than the first text!';
    }
elseif ($id = 3) {
    {
        $text = 'This is a lot more text than the first text, and a load more than the third as well!!';
    }
echo $text; 
?>

真的很简单。所以这是我的HTML文件...

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
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("myDiv").innerHTML=xmlhttp.responseText;
    }
  }


xmlhttp.open("GET","ajax.php",true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv">I want this content replacing</div>
<a href="#" onclick="loadXMLDoc()">ID: 1</a><br>
<a href="#" onclick="loadXMLDoc()">ID: 2</a><br>
<a href="#" onclick="loadXMLDoc()">ID: 3</a>
</body>
</html>

我意识到什么是永远不会工作的，因为我修改了一些我在网上发现的东西，但基本上我想在AJAX脚本的链接中传递一个变量，如ID，以替换div的内容

我如何让这个工作？是否有更好的替代方法来使用<a>代码？

Answer 1

使用jQuery

您的HTML

<a href="#" class="ajax" data-id="1">ID: 1</a>

Javascript

// Delegate click event
$(document).on('click', 'a.ajax', function(){

    var el = $(this);
    $.ajax({
        url: 'ajax.php',
        data: {id: el.data('id')},
    }).done(function(response){
        $('#myDiv').html(response);
    });

});

Answer 2

我将使用Vanilla JavaScript回答您的问题，而不是使用 jQuery AJAX Helper。虽然它非常很好 - 但学习Vanilla方式会让你很好地了解图书馆为你提供的帮助。

首先，你正在进行Ajax调用，但是，空调用。 “查询”参数是 $ _ GET 的基础，格式如下：

？
<强>关键 =值及安培;的 KeyTwo = SomeOtherValue

在PHP中，翻译也是如此：

Array ( [Key] => Value [KeyTwo] => SomeOtherValue )

这需要与xmlhttp.send()一起传递，以便通过数据进行成功的ajax调用。

但是要首先收集这些数据，您必须使用HTML收集它：

 <a href="#" id="1" onclick="loadXMLDoc( this )">ID: 1</a><br /> <a href="#" id="2" onclick="loadXMLDoc( this )">ID: 2</a> <script> function loadXMLDoc( Id ) { /** * Id is the <a href="#" id="3" collected * when onclick="loadXMLDoc()" is pressed **/ var xmlhttp, DataId = Id.attributes.id.value; if (window.XMLHttpRequest) xmlhttp = new XMLHttpRequest(); else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } /** * Notice the ?id="+ dataId +" * It's passing through the ID Collected **/ xmlhttp.open("GET","ajax.php?id="+ dataId +"",true); xmlhttp.send(); } </script>

虽然上面这段代码的效率非常低，但在JavaScript和JavaScript中你会更好。一般编程以保持通用性。通过将代码修改为：

<a href="#" id="1" class="idlistener">ID: 1</a><br /> <a href="#" id="2" class="idlistener">ID: 2</a> <script> function getId() { alert( this.attributes.id.value ); //Click on id="2", alerts '2' } /** * We find all the HTML tags with the * attribute that has 'class="idlistener" * attached, we 'bind' it to a function called * getId() **/ var IdListener = document.getElementsByClassName('idlistener'); for( var x = 0; x < IdListener.length; x++ ) { IdListener[x].addEventListener( 'click', getId, false ); } </script>

演示：Fiddle

最后，我确实从W3Schools.com上发现了这个AJAX代码。我想你会发现每个StackOverflow Web开发人员都同意我的观点 - 不要向本网站学习！

Answer 3

使用来自ajax调用的响应替换html内容的一般格式：

$.ajax({
  url: yourUrl,
  method: 'get', // or 'post'
  success: function (response) {
      $('#myDiv').html(response);
  }
  // other ajax options here if you need them
});

Answer 4

你不需要使用ajax。只需在条件中使用以下内容即可。别忘了在标题上调用jquery js文件。否则jquery不会工作：

echo '<script>$("#myDiv").html("This is some text")</script>';

单击链接时使用AJAX替换内容

4 个答案: