jQuery：使用 <a> 链接提交 ajax 查询

Question

我正在尝试向 php 脚本发送一些内容以通过 ajax 存储在数据库中。我正在使用 jQuery 框架。我想使用页面上的链接来发送信息。我在编写发送和接收信息的函数时遇到问题，我尝试过的所有内容都是渐近的。

编辑

这个想法是，用户将点击链接，名为“listings”的表中名为“show_online”（一个小整数）的列将更新为 1 或 0（**一个基本的二进制切换！）成功，点击的具体链接会被更新（如果之前发送了1，则设置为0）。

编辑

一个页面上会有 20-30 个这样的链接。我已将每个包含的 div 设置为唯一的 id（'onlineStatus'）。我宁愿不为每个实例都有一个单独的 js 函数。

非常感谢任何帮助。基本代码如下。

<script type="text/javascript"> 
    function doAjaxPostOnline( shouldPost, bizID ){
        load("ajaxPostOnline.php?b='+bizID+'&p='+shouldPost", jsonData, callbackFunction);
function callbackFunction(responseText, textStatus, XMLHttpRequest)
{
  // if you need more functionality than just replacing the contents, do it here
}

        }
    }
</script>   


<!-- the link that submits the info -->: 
<div id='onlineStatus<?php echo $b_id ?>'>
<a href='#' onclick="doAjaxPostOnline( 0, <?php echo $b_id ?> ); return false;" >Post Online</a>
</div>  

ajaxPostOnline.php

<!-- ajaxPostOnline.php ... the page that the form posts to -->
<?php
    $id = mysql_real_escape_string($_GET['b']);
    $show = mysql_real_escape_string($_GET['p']);

    if( $id && ctype_digit($id) && ($show == 1 || $show == 0) ) {
        mysql_query( "UPDATE listing SET show_online = $show
        WHERE id = $id LIMIT 1" );
    }

    if($result) {
        if($show == '0'){
            $return = "<a class='onlineStatus' href='#' onchange='doAjaxPostOnline( 1, <?php echo $b_id ?> ); return false;' >Post Online</a>";
        }
        if($show == '1'){
            $return = "<a class='onlineStatus' href='#' onchange='doAjaxPostOnline( 0,  $b_id ); return false;' >Post Online</a>";
        }
        print json_encode(array("id" => $id, "return" => $return));
    }
?>

Answer 1

jQuery 中的 load() 函数非常适合这种事情。

这是一个例子。基本上，您有一个外部 div 作为容器。您调用返回 html 的脚本/服务。您在该 html 中有一个带有 id 的 div，稍后您将在 ajax 调用中引用该 div。替换 div 替换了容器 div 的内部 html。您将数据作为 json 对象作为第二个参数传递给 load 方法，您可以将对回调函数的引用作为第三个参数传递。回调函数将从响应中接收所有可能的信息（用于进一步解析/处理的完整响应文本、http 状态代码以及与此 ajax 调用关联的 XMLHttpRequest 对象）。

$("#id_of_some_outer_div").load("somepage.php #id_of_replacement_div", jsonData, callbackFunction);

function callbackFunction(responseText, textStatus, XMLHttpRequest)
{
  // if you need more functionality than just replacing the contents, do it here
}

所以，在您的情况下，您正在谈论替换链接。把原来的链接放在一个div里面操作两边。

这里是 load() 的 jQuery api 文档的链接：

load

编辑：

回应您关于一次完成多个替换的评论：

您可以让回调函数为您完成所有工作。

1. 为所有需要替换的 div 添加一个唯一的 css 类。这将允许您一次选择所有这些。请记住，html 元素可以有多个 css 类（这就是 CSS 中的“c”的含义）。所以，它们都是<div id="[some unique id]" class="replace_me"... 然后，如果你有一个变量设置为$("div.replace_me")，这将是所有具有replace_me 样式的div 的集合。
2. 来自 ajax 调用的任何元素（无论它们是另一个 div 容器还是单个“a”元素）都应该具有与要插入的容器类似的唯一 ID。例如，div_replace1 是容器的 id，div_replace1_insert 是要插入的元素的 id
3. 在回调函数内部，使用$("div.replace_me").each(function(){ ... 迭代替换
4. 在每次迭代中，“this”关键字指的是当前项。您可以获取此项目的 id，有一个变量，如 var replacement_id = this.id + "_insert";（如上例所示），它现在是您要插入的元素的唯一 id。 $("#" + replacement_id) 现在将为您提供要插入的元素的引用。你可以这样插入：this.html( $("#" + replacement_id) );

您可能需要编辑上面的代码（未经测试），但这是一般的想法。您可以使用命名约定将ajax返回数据中的元素与页面上的元素相关联，用“each”迭代页面上的元素，并将它们替换为this.html()

Answer 2

你真的打算将你的 ajax 成功返回函数声明为

function(html)

？ ..我想也许你的意思是参数是“数据”？

Answer 3

由于您的 php 脚本返回 json，您应该将 dataType 设置为 json。请注意，在您发布的代码示例中，成功 function() 在 $.ajax() 之外，它需要在里面。

 $.ajax({
   url: "ajaxPostOnline.php?b=" + bizID + "&p=" + shouldPost,
   dataType: "json",
   success: function(json){
     $("#onlineStatus" + bizID).html(json.return);
   }
 });

您可能想查看 getJSON 方法，因为它更适合这种特殊情况。

$.getJSON("ajaxPostOnline.php", {b:bizID, p:shouldPost}, function(json) {
    $("#onlineStatus" + bizID).html(json.return);
});

编辑：对原始问题进行了编辑，提供的示例发生了显着变化。我仍然会推荐 $.getJSON 方法。

Answer 4

除非我弄错了，您似乎在混合 AJAX 和服务器端脚本时遇到了错误。

这取决于 $return 是否在 ajaxPostOnline.php 中赋值 sn-p 之后的任何地方被 PHP 解析（几乎没有，如果它是从 AJAX 调用的！）。

$return = "<a class='onlineStatus' href='#' onchange='doAjaxPostOnline( 1, <?php echo $b_id ?> ); return false;' >Post Online</a>";

当然应该是这样的：

$return = "<a class='onlineStatus' href='#' onchange='doAjaxPostOnline( 1, ".$id." ); return false;' >Post Online</a>";