php - AJAX\J查询 : Update MYSQL database with form data without refreshing

Question

好的，我已经完成了大部分工作。现在对我来说，最困难的部分来了。这对我来说是未涉足的领域。

如何在不刷新页面的情况下使用表单数据更新我的 mysql 数据库？我假设您使用 AJAX 和\或 Jquery 来执行此操作-但我不太了解给出的示例。

谁能告诉我如何在此上下文中执行此任务？

这是我的表格:

 <form name="checklist" id="checklist" class="checklist">
        <?php // Loop through query results   
              while($row = mysql_fetch_array($result))
                  {
                  $entry = $row['Entry'];
                  $CID = $row['CID'];
                  $checked =$row['Checked'];
                 // echo $CID;
                  echo "<input type=\"text\" value=\"$entry\" name=\"textfield$CID;\" id=\"textfield$CID;\" onchange=\"showUser(this.value)\" />";
                  echo "<input type=\"checkbox\" value=\"\" name=\"checkbox$CID;\" id=\"checkbox$CID;\"  value=\"$checked\"".(($checked == '1')? ' checked="checked"' : '')."  />";
                  echo "<br>";
                  }
        ?> 
        <div id="dynamicInput"></div>
        <input type="submit" id="checklistSubmit" name="checklistSubmit" class="checklist-submit"> <input type="button" id="CompleteAll" name="CompleteAll" value="Check All" onclick="javascript:checkAll('checklist', true);"><input type="button" id="UncheckAll" name="UncheckAll" value="Uncheck All" onclick="javascript:checkAll('checklist', false);">                  
     <input type="button" value="Add another text input" onClick="addInput('dynamicInput');"></form>

它是根据用户的 session_id 从数据库中填充的，但是如果用户想要创建一个新的列表项(或者是一个新的访问者时期)，他可以单击“添加另一个文本输入”按钮和一个新的表单元素会产生。

所有对数据库的更新都需要通过 AJAX\JQUERY 完成，而不是通过刷新页面的帖子。

我真的需要这方面的帮助。让我的头围绕这种......更新方法有点痛!

谢谢。

Answer 1

您需要捕捉按钮的点击。并确保停止传播。

$('checklistSubmit').click(function(e) {
    $(e).stopPropagation();

    $.post({
        url: 'checklist.php'
        data: $('#checklist').serialize(),
        dataType: 'html'
        success: function(data, status, jqXHR) {
           $('div.successmessage').html(data);
           //your success callback function
        } 
        error: function() {
           //your error callback function
        } 
    });
});

这只是我想出来的事情。应该给你基本的想法。如果需要，我很乐意详细说明。

查看 jQuery 的 $.post 文档以了解所有细节。

http://api.jquery.com/jQuery.post/

编辑:

我改成使用jquery的serialize方法。原来忘记了。

更多阐述:

基本上，当提交按钮被点击时，它会调用指定的函数。您想要停止传播，以便表单不会通过冒泡 DOM 并进行正常提交来提交。

$.post 是 $.ajax({ type: 'post'}); 的简写版本；

所以您所要做的就是指定要发布到的 url，传递表单数据，然后在 php 中它将像任何其他请求一样进入。然后你处理 POST 数据，将你的更改保存在数据库或其他任何地方，并按照我指定的方式发回 JSON 数据。您还可以发回 HTML 或 XML。 jQuery 的文档显示了可能的数据类型。

在您的成功函数中，将取回数据作为第一个参数。因此，无论您指定为返回的数据类型是什么，您都可以按需要使用它。假设您想返回一些 html 作为成功消息。您需要做的就是获取成功函数中的数据，然后使用 .append() 或类似的方法将其放置在 DOM 中您想要的位置。

一尘不染？