Question

我有一个表，通过我的数据库中的while循环输出所有联系人。

我的语法是这样的：

SELECT * FROM contacts WHERE id = $_SESSION['user_id'] ORDER BY name ASC LIMIT 5

取出我的所有数据，只给我5个结果。

现在我的目标是有一个小按钮打开一个带有jquery的模型框（我可以自己管理），其中一个表单要求用户输入一个数字然后该号码将通过post发送或者到达$ PHP_SELF并使用用户输入的数字更新局部变量，然后该变量将用于更新数据库以增加或减少LIMIT值。

我已经浏览了整个网络（使用谷歌）寻找使用AJAX提交表单，但我找到的所有示例都不适合我。

当用户提交号码并执行并更新sql查询以使输出表根据新的LIMIT值动态更新时，无需将页面刷新给用户。

我的jquery代码是：

(document).ready(function(){
   $("form#form").submit(function() {
   // we want to store the values from the form input box, then send via ajax below
      var val = $('input[name=new_value]').attr('value');
      $.ajax({
          type: "post",
          url: "process.php",
          data: "val="+ val,
          cache: false,
          success: function(){
             $('form#form').hide(function(){$('.success').fadeIn();});
          }
      });
      return false;
   });
});

$(document).ready(function(){ $("form#form").submit(function() {
   // we want to store the values from the form input box, then send via ajax below
   var val =    $('input[name=new_value]').attr('value');
   $.ajax({ type: "post", url: "process.php", data: "val="+ val, cache: false, success:   
   function(){
      $('form#form').hide(function(){$('.success').fadeIn();});
   } }); return false; }); });

然后我的PHP代码是：

$new_val = $_POST['new_val'];
$_val = "UPDATE `settings` SET `display_limit` = {$new_val} WHERE `user_id` = {$_SESSION['user_id']}";
mysql_query($_val) or die(mysql_error());

我的表格很简单：

有什么建议吗？我还没有来到如何让我的输出表动态更新，所以如果有人能指出我正确的方向或提供一些很棒的帮助。

谢谢

编辑：

这是我正在处理的更新的jquery脚本，我能够成功提交表单！但我唯一的问题是，在页面刷新之前我无法看到更改而失败了AJAX用法的目的...... 叹息

我现在如何通过表单提交内容更新和刷新我的#results div？

$(document).ready(function() { 
    var options = {
        url: 'process.php',
        type: 'post',
        //dataType:  'json',
        target: '#last_five_sellers',
        success: success
    };

    // bind to the form's submit event 
    $('#form').submit(function() { 
        // inside event callbacks 'this' is the DOM element so we first 
        // wrap it in a jQuery object and then invoke ajaxSubmit 
        $(this).ajaxSubmit(options); 
        // !!! Important !!! 
        // always return false to prevent standard browser submit and page navigation 
        return false; 
    });
    function success(responseText, $form) {
        $("form#form").hide();
        $(".success").fadeIn();
    }
});

Answer 1

在您执行更新的PHP代码中，您可以用html格式回显联系人。然后，它将返回到jquery中的成功函数。

success: function(){
    $('form#form').hide(function(){$('.success').fadeIn();});
}

该函数有一个参数数据，这是你在php中回显的html格式。实施例

success: function(data){
    $('form#form').hide(function(){$('.success').fadeIn();});
    $(data).appendTo('#result');
}

Answer 2

您需要了解请求的流程。一旦php脚本运行，就是它，它就完成了。如果您计划提交回同一页面，那么它将是一个新请求和该脚本的新执行。现在，您可以向该脚本添加一个特殊情况，以将必要的数据返回到您的jQuery代码，但这是一个混乱的IMO。我宁愿有一个单独的脚本来处理该功能。这可以看作是一个Web服务。

因此，当您在浏览器中转到该页面时，它将最初显示5个联系人（或者是您在LIMIT子句中的默认值）。当您单击图标以显示更多联系人时，您使用jQuery向该“Web服务”页面提交GET请求（它确实应该是GET，因为您正在检索数据，而不是提交新数据）。这将是您使用jQuery / JavaScript更新页面上显示的联系人列表。

正如Codler所述，“网络服务”的输出可以是HTML，您只需用它来替换显示联系人的现有HTML。（这将是首选方式。您几乎总是希望在服务器上尽可能多地做到这一点。）

Answer 3

看起来你的jQuery代码是重复的 - 没有必要两次绑定表单的submit事件。另外，第一个jQuery块缺少开头的美元符号（“$”）。据我所知，.hide()不支持通过第一个参数传递回调。在jQuery API文档中，它被编写为.hide( duration, [ callback ] )。

我会写：

$(function(){
   $("form#form").submit(function(){
   // we want to store the values from the form input box, then send via ajax below
      $.ajax({
          type: "post",
          url: "process.php",
          data: "val=" + $("input[name=new_value]").val(),
          cache: false,
          success: function(){
             $("form#form").hide();
             $('.success').fadeIn();
          }
      });
      return false;
   });
});

现在，如果您想动态更新结果表，最简单的方法就是用更新的HTML替换整个事物。因此，例如，如果您修改了PHP脚本（process.php），以便在更新display_limit后输出新的结果表，则可以编写类似的内容（假设您的结果表为table#results ）：

$(function(){
   $("form#form").submit(function(){
   // we want to store the values from the form input box, then send via ajax below
      $.ajax({
          type: "post",
          url: "process.php",
          data: "val=" + $("input[name=new_value]").val(),
          cache: false,
          success: function(data){
             $("form#form").hide();
             $(".success").fadeIn();
             $("#results").replaceWith(data);
          }
      });
      return false;
   });
});

您只需确保您的脚本仅输出HTML。

与George上面回答的相反，HTML肯定会用于此目的，但我认为理想的方法是以JSON或XML格式单独发送数据（减去结构/表示），然后使用JavaScript构建HTML;您可以通过这种方式节省大量带宽，并最终构建响应更快的应用程序。

修改

这是一个基于JSON的迷你示例。

JavaScript的：

$(function(){ $("#form").submit(function(){ var val = $("input[name=new_value]").val(); $.getJSON("process.php?val=" + val, function(data){ $("#results").empty(); $(data.rows).each(function(){ $("#results").append('<tr><td>' + this.column_a + '</td><td>' + this.columbn_b + '</td></tr>'); }); }); return false; }); });

PHP（process.php）：

[assuming you already have a result/rows called $result] $json = array('rows' => array()); while ($row = mysql_fetch_assoc($result)) { $json['rows'][] = $row; } echo json_encode($json);

现在，已经授予，我根本没有测试过这个代码，但它应该给你一个要点。

通过PHP帮助进行jQuery / Ajax SQL实时更新

3 个答案: