Question

我是Ajax脚本的初学者，我正在尝试构建一个脚本，当用户点击链接时显示Mysql查询结果。我曾考虑使用onClick（）函数调用Ajax脚本。这是我的代码：

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="/course/format/topics/ajax.js" type="text/javascript"></script>
<div id="stitre">
    <a href="#" onclick="display()" id="link1" class="link"> Link 1</a>
</div>
<div id="one"> </div>
<div id="stitre">
    <a href="#" onclick="display()" id="link2" class="link"> Link 2</a>
</div>
<div id="one"> </div>

我的ajax.js代码：

$(document).ready(function() { 
for (var i=1; i<3; i++) {
    var id = document.getElementById("#link" + i);
    function display() {
        $.ajax({
            async: false,
            type: "POST",
            url: "myphp.php",
            data: "id=" + id,
            dataType: "json",
            success: function(msg) {
                if(msg.success) {
            $("#one").html(msg);
                } else {
                    alert("error");
                }
            }
        });
    };
}
});

最后，myphp.php：

<?php
    require_once('config.php');
    mysql_connect($CFG->dbhost, $CFG->dbuser, $CFG->dbpass);
    mysql_select_db($CFG->dbname);
    mysql_query("SET NAMES 'utf8'");

    $id = $_GET['id'];
    if($return = display($id)) {
        echo "success";
    } else {
        echo "error";
    }
    echo json_encode($reply);
?>

现在，点击链接时没有显示任何内容。

Answer 1

有很多问题。

内联事件处理程序（onclick="display()"）不好。 jQuery提供了一种将事件处理程序绑定到元素的简单机制，您应该使用它。
您的display()函数不是全局范围的，它只在传递给.ready()的匿名函数范围内可见。这在实践中意味着当您点击他们试图执行他们无法看到的功能的<a>元素时。
以你的方式在for循环中声明一个函数将导致使用上一次迭代的值的单个函数。
您的id变量是一个DOM元素，而不是字符串，因此将其作为AJAX调用数据的一部分传递可能无法传递您想要的值。
HTML元素的id属性是唯一标识符，因此实际上需要是唯一的。拥有两个<div id="one">元素（或具有相同id的其他元素）无效。

请尝试以下方法：

$(document).ready(function () {
    $('.link').click(function (e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "myphp.php",
            data: { id: this.id },
            dataType: "json",
            success: function (msg) {
                if (msg.success) {
                    $("#one").html(msg);
                } else {
                    alert("error");
                }
            }
        });
    });
});

$(document).ready()确保代码在元素存在（DOM准备就绪）之前不会执行。 $('.link')会选择所有包含link类的元素（您的<a>元素）。 .click()函数为所有这些元素添加了click事件处理程序。匿名函数的e参数作为参数传递给jQuery规范化事件对象。

对e.preventDefault()的调用会阻止默认行为（在链接之后），最后对$.ajax()的调用会提交AJAX调用。我删除了async: false因为它不应该被删除。请注意，事件处理程序函数this内部是指触发事件的元素（因此您单击的特定<a>元素）。

我没有解决HTML的问题，但上面的问题列表应该为您提供纠正这些问题的基础。

我不是PHP程序员，因此我无法真正说出服务器端代码的有效性。如果您使用的是Firefox，我还建议您安装Firebug，否则请学习如何使用浏览器的开发人员工具（点击 F12 打开它们），因为它会告诉您任何JavaScript错误正在抛出。

Answer 2

替换您的成功回调：

success: function(msg) {
    $("#one").html(msg);
}

msg.success不存在。除了你不需要检查成功，你已经知道它已成功，因为正在调用成功回调！

Answer 3

你必须改变PHP脚本，

//Some thing
$reply['success'] = "Success"; //Create an associative array which is going to be input of json_encode()
if($return = display($id)) {
    $reply['success'] = "Some Success Message";
} else {
    $reply['error'] = " Some Error Message";
}
echo json_encode($reply);

在ajax中，

$.ajax({
            ...
            ...
            success: function(msg) {
                if(msg.success) {
            $("#one").html(msg);
                } else {
                    alert("error" + msg.error);
                }
            }
        });

并且还检查你的php版本，一些较低版本将不支持json_encode（）。注意：以上代码不是实际的。但是我希望能给你一些想法来做你的东西。

Answer 4

可能这样使用类而不是：

<div class="stitre">
   <a href="#" onclick="display(this.id)" id="link1" class="link"> Link 1</a>
</div>
<div class="one"></div>
<div class="stitre">
  <a href="#" onclick="display(this.id)" id="link2" class="link"> Link 2</a>
</div>
<div class="one"></div>

然后只需使用此功能，无需doc ready：

function display($id) {
    $.ajax({
        async: false,
        type: "POST",
        url: "myphp.php",
        data: {id:$id},   //<----------send like this
        dataType: "json",
        success: function(msg) {
            if(msg.success) {
                $($id).next(".one").html(msg);
            } else {
                alert("error");
            }
        }
    });
}

注意：

<div id="stitre">
   <a href="#" onclick="display()" id="link1" class="link"> Link 1</a>
</div>
<div id="one"></div>
<div id="stitre">
  <a href="#" onclick="display()" id="link2" class="link"> Link 2</a>
</div>
<div id="one"></div>

其他问题是you are using same id for multiple dom elements，根本无效。您可以change id to class instead.

使用Ajax在onClick（）上显示Mysql查询结果

4 个答案:

可能这样使用类而不是：

注意：