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'}）;

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

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

清除泥土？

Answer 2

这是我使用jquery

发布表单数据的方式

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

希望这会有所帮助，让我知道你是如何上场的！

Answer 3

这里需要两个脚本：一个运行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>

然后从PHP（或任何其他网络服务器脚本引擎）中获取$ _POST中的值，然后更新数据库。根据需要更改URL和数据阵列。

请记住，数据可以是这样的：{input1：value1，input2：value2}，PHP会得到类似$ _POST ['input1'] = value1和$ _POST ['input2'] = value2。

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

3 个答案: