1

我想使用 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>

我意识到，因为我已经修改了我在网上找到的一些东西，所以那里永远不会起作用，但基本上我希望将链接中的 ID 等变量传递给 AJAX 脚本来替换 div 的内容。

我如何让这个工作？有没有比使用<a>标签更好的选择？

4

4 回答 4

3

使用 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);
    });
    
    return false;
});
于 2013-10-14T17:49:11.617 回答
1

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

首先，您正在进行一个 Ajax 调用，尽管是一个空调用。“查询”参数是$_GET所基于的，格式如下：

? Key =Value& KeyTwo =SomeOtherValue

在 PHP 中，也翻译为：

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

这需要与它一起传递，以便使用Dataxmlhttp.send()进行成功的 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 代码。我想你会发现所有同意我的 StackOverflow Web 开发人员 -不要从这个网站学习！

于 2013-10-14T18:42:17.863 回答
0

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

$.ajax({
  url: yourUrl,
  method: 'get', // or 'post'
  success: function (response) {
      $('#myDiv').html(response);
  }
  // other ajax options here if you need them
});
于 2013-10-14T17:44:33.547 回答
0

你不需要为此使用ajax。只需在条件中使用以下内容。不要忘记在标题上调用 jquery js 文件。否则 jquery 将无法工作：

echo '<script>$("#myDiv").html("This is some text")</script>';
于 2013-10-15T09:27:33.093 回答