0

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

如何在不刷新页面的情况下使用表单数据更新我的 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 而不是通过将刷新页面的帖子来完成。

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

谢谢。

4

3 回答 3

2

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

$('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 的序列化方法。原来忘记了。

详细说明：

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

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

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

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

清如泥？

于 2013-06-01T03:46:48.793 回答
1

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

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

希望这会有所帮助，让我知道你的进展情况！

于 2013-06-01T03:42:21.333 回答
1

您需要两个脚本：一个运行 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 的结果。

于 2013-06-01T03:51:09.573 回答