用ajax替换div内容

Question

我正在尝试动态替换 div 内容 ajax 调用。以下是我尝试过的代码。

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<a  class="reply_doc" data-doc_value="1">111</a><br>
<a href="#" class="reply_doc" data-doc_value="2">222</a><br>
<a href="#" class="reply_doc" data-doc_value="3">333</a><br>
<script type="text/javascript">
$(document).ready(function(){
  $(".reply_doc").click(function () {
    var a = $("a.reply_doc").attr("data-doc_value"); //<-- Add this
    if (a != "") {
    $.ajax({
        type: "POST",
        url: "sortingajax.php",
        data: "doc_reply=" + a,
        success: function (b) {
            alert(a+' ok. '+b)
            $('#ResponseDiv').html(b);
            console.log(b);
        }
    });
  }
 });
});
</script>
<div id='ResponseDiv'>
        This is a div to hold the response.
</div>
</body>
</html>

sortingajax.php

<?php
include('connection.php');
$countsql='SELECT * FROM XML WHERE';
$countsql1=mysql_query($countsql);
$numrows = mysql_num_rows($countsql1);  
$countArray2=array();

while($row = mysql_fetch_array($countsql1)) {
    // Append to the array
    $countArray2[] = $row;
    //echo $row['PID']."<BR />";
}

?>
<?php
foreach($countArray2 as $array)
{
?>
        <div class="search">

        I am in US.
        </div>
        <?php

 $i++; } ?>

在第一页。当我点击一个链接时，它会用ajax调用调用sortingajax.php。之后它应该用sortingajax.php内容替换ResponseDiv内容。

请告诉我哪里做错了，因为我不知道 ajax 调用...

Answer 1

您的 ajax 代码看起来是正确的，但另一方面，php 代码看起来有点错误。首先，停止使用已弃用的mysql_* api 并切换到PDO 或mysqli。
mysql_* api 已弃用，并将很快从 php 中删除。

SELECT * FROM XML WHERE

^ 这不是一个正确的 mysql 查询，您需要在 WHERE 关键字之后添加一些要检查的内容，或者如果您想从 XML 表中选择所有行，则跳过它。
由于此查询失败，您将没有任何数据要打印，并且您的ResponseDiv 在调用完成后应该为空。

Answer 2

您有部分离开查询。请在WHERE 之后填写条件，否则从 sortingajax.php

中的查询中删除 WHERE

1. 您在 var doc_reply 中发送数据，但您没有在 sortingajax.php 文件中使用此变量。

2. 为什么使用两个不同的循环？

3. Mysql 已弃用。使用 Mysqli 代替它。

Answer 3

    follow this Simple Example Of add or remove element using ajax/jQuery

-示例：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>     
<div id="files">
             <div>
                <input type="text" name="description[]" class="form-control" placeholder="File Description"/> <br/>
                    <input type="file" name="files[]" /> 
                </div>
            </div>
     </div>
    <div style="margin: 5px; cursor: pointer;" class="text-center">
             <a id="addFile"><strong>+ Add Another File</strong></a>
    </div> 

    <script>
     $(document).ready(function() {
             $("#addFile").click(function() {
                 $("#files").append("<div>Your Contain</div>");
            });
        });
    </script>

如果你想删除元素.. 然后使用这个简单的代码 $("#Id Of Element").remove()