我想用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）传递给 AJAX 脚本以替换div 的内容。
我如何让它工作？有没有更好的替代方法来使用<a>标签？
使用 jQuery
您的网页
<a href="#" class="ajax" data-id="1">ID: 1</a>
爪哇语
// 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);
});
return false;
});
我将使用Vanilla JavaScript而不是jQuery AJAX助手来回答您的问题。虽然这很好 - 但学习香草方式会让你很好地了解图书馆为你做了什么。
首先，您正在进行Ajax呼叫，但尽管是空的。 "查询"参数是 $_GET 所基于的，其格式如下：
？键=值&键二=某个其他值
在PHP中，也翻译为：
Array
(
[Key] => Value
[KeyTwo] => SomeOtherValue
)
这需要与xmlhttp.send()一起传递，以便它使用 Data 成功进行 ajax 调用。
但是要首先收集这些数据，您必须使用 HTML 收集它：
<!-- Notice how the <a> tags now have attributes attached, the id="" -->
<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 和编程中，保持通用性会好得多。通过将代码修改为：
<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>
演示：小提琴
最后，在我看来，您确实发现了 W3Schools.com 的AJAX代码。我想你会发现每个StackOverflowWeb开发人员都会同意我的观点 - 不要从这个网站学习！
将 html 内容替换为 ajax 调用响应的一般格式：
$.ajax({
url: yourUrl,
method: 'get', // or 'post'
success: function (response) {
$('#myDiv').html(response);
}
// other ajax options here if you need them
});
你不需要为此使用 ajax。只需在条件中使用以下方法即可。不要忘记在标头上调用 jquery js 文件。否则 jquery 将无法工作：
echo '<script>$("#myDiv").html("This is some text")</script>';