Php AJAX\JQUERY：使用表单数据更新MYSQL数据库而不刷新

好的，我已经完成了这件事的大部分。。现在，对我来说，最困难的部分来了。对我来说，这是一片无人涉足的领域

如何使用表单数据更新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>

这就是我使用jquery发布表单数据的方式

$.ajax({
    url: 'http://example.com',
    type: 'GET',
    data: $('#checklist').serialize(),
    cache: false,
}).done(function (response) {
    /* It worked */
}).fail(function () {
    /* It didnt worked */
});

希望这有帮助，让我知道你进展如何
 这就是我使用jquery发布表单数据的方式

$.ajax({
    url: 'http://example.com',
    type: 'GET',
    data: $('#checklist').serialize(),
    cache: false,
}).done(function (response) {
    /* It worked */
}).fail(function () {
    /* It didnt worked */
});

希望这有帮助，让我知道你进展如何
 您需要捕捉按钮的点击。并确保停止传播

$('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，了解所有的细节


编辑：

我将其更改为使用jquery的序列化方法。本来就忘了

更多详细说明：

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

$.post是$.ajax（{type:'post'}）的简写版本

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

在success中，函数将返回数据作为第一个参数。因此，无论您指定为返回的数据类型是什么，您只需根据需要使用它。假设您想返回一些html作为成功消息。您所需要做的就是在success函数中获取数据，并使用.append（）或类似的方法将其放置在DOM中您想要的位置

清除为泥浆？
您需要抓住按钮的点击。并确保停止传播

$('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，了解所有的细节


编辑：

我将其更改为使用jquery的序列化方法。本来就忘了

更多详细说明：

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

$.post是$.ajax（{type:'post'}）的简写版本

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

在success中，函数将返回数据作为第一个参数。因此，无论您指定为返回的数据类型是什么，您只需根据需要使用它。假设您想返回一些html作为成功消息。您所需要做的就是在success函数中获取数据，并使用.append（）或类似的方法将其放置在DOM中您想要的位置

清除为mud？
这里需要两个脚本：一个运行AJAX（最好使用框架，jQuery对我来说是最简单的一个）和一个获取Post数据并进行数据库更新的PHP脚本

我不会给你一个完整的来源（因为这里不是这个地方），而是一个指南。在jQuery中，可以执行以下操作：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() { // DOM is ready
    $("form#checklist").submit(function(evt) {
        evt.preventDefault(); // Avoid the "submit" to work, we'll do this manually
        var data = new Array();
        var dynamicInputs = $("input,select", $(this)); // All inputs and selects in the scope of "$(this)" (the form)

        dynamicInputs.each(function() {
            // Here "$(this)" is every input and select
            var object_name = $(this).attr('name');
            var object_value = $(this).attr('value');
            data[object_name] = object_value; // Add to an associative array
        });

        // Now data is fully populated, now we can send it to the PHP
        // Documentation: http://api.jquery.com/jQuery.post/
        $.post("http://localhost/script.php", data, function(response) {
            alert('The PHP returned: ' + response);
        });
    });
});
</script>


$（document）.ready（函数（）{//DOM已准备就绪
$（“表格检查表”）。提交（职能部门（evt）{
evt.preventDefault（）；//避免使用“提交”命令，我们将手动执行此操作
var data=新数组（）；
var dynamicInputs=$（“输入，选择“，$（此））；//在“$（此）”（表单）范围内的所有输入和选择
dynamicInputs.each（函数（）{
//此处“$（this）”是每个输入并选择
var object_name=$（this.attr（'name'）；
var object_value=$（this.attr（'value'）；
data[object\u name]=object\u value；//添加到关联数组
});
//现在数据已完全填充，现在我们可以将其发送到PHP
//文件：http://api.jquery.com/jQuery.post/
$.post（”http://localhost/script.php，数据，功能（响应）{
警报（'PHP返回：'+响应）；
});
});
});

然后在PHP（或任何其他Web服务器脚本引擎）中获取$_POST中的值，并执行更新DB的操作。根据需要更改URL和数据数组

请记住，数据可以是这样的：{input1:value1，input2:value2}，PHP将获得类似$_POST['input1']=value1和$_POST['input2']=value2的内容。
这里需要两个脚本：一个运行AJAX的脚本（更好地使用框架，jQuery是我最简单的脚本之一）以及一个PHP脚本，用于获取Post数据并进行数据库更新

我不会给你一个完整的来源（因为这里不是这个地方），而是一个指南。在jQuery中，可以执行以下操作：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() { // DOM is ready
    $("form#checklist").submit(function(evt) {
        evt.preventDefault(); // Avoid the "submit" to work, we'll do this manually
        var data = new Array();
        var dynamicInputs = $("input,select", $(this)); // All inputs and selects in the scope of "$(this)" (the form)

        dynamicInputs.each(function() {
            // Here "$(this)" is every input and select
            var object_name = $(this).attr('name');
            var object_value = $(this).attr('value');
            data[object_name] = object_value; // Add to an associative array
        });

        // Now data is fully populated, now we can send it to the PHP
        // Documentation: http://api.jquery.com/jQuery.post/
        $.post("http://localhost/script.php", data, function(response) {
            alert('The PHP returned: ' + response);
        });
    });
});
</script>


$（document）.ready（函数（）{//DOM已准备就绪
$（“表格检查表”）。提交（职能部门（evt）{
evt.preventDefault（）；//避免使用“提交”命令，我们将手动执行此操作
var data=新数组（）；
var dynamicInputs=$（“输入，选择“，$（此））；//在“$（此）”（表单）范围内的所有输入和选择
dynamicInputs.each（函数（）{
//