1

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

<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);
?>

目前，当我单击链接时没有显示任何内容。

4

4 回答 4

1

有很多问题。

  1. 内联事件处理程序 ( onclick="display()") 很糟糕。jQuery 提供了一种将事件处理程序绑定到元素的简单机制，您应该使用它。
  2. 您的display()函数不是全局范围的，它仅在传递给的匿名函数范围内可见.ready()。这在实践中意味着当你点击你的<a>元素时，他们试图执行他们看不到的功能。
  3. 以您拥有的方式在循环内声明一个函数for将导致使用最后一次迭代的值的单个函数。
  4. 您的id变量是 DOM 元素，而不是字符串，因此将其作为 AJAX 调用数据的一部分传递可能不会传递您想要的值。
  5. 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，我还建议您安装FirebugF12 ，否则学习如何使用浏览器的开发人员工具（点击打开它们），因为它会告诉您正在抛出的任何 JavaScript 错误。

于 2013-02-21T10:03:05.707 回答
0

您必须更改 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({
            ...
            ...
            success: function(msg) {
                if(msg.success) {
            $("#one").html(msg);
                } else {
                    alert("error" + msg.error);
                }
            }
        });

还要检查你的 php 版本，一些较低的版本不支持 json_encode()。注意：上面的代码不是实际的。但我希望这会给你一些想法来做你的事情。

于 2013-02-21T10:01:02.410 回答
0

可能是这样使用 with class 代替：

<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.

于 2013-02-21T10:04:59.800 回答
0

替换您的成功回调：

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

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

于 2013-02-21T09:56:00.740 回答