AJAX \ JQUERY：使用表單數據更新MYSQL數據庫而無需刷新

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

這是我如何使用jQuery

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

希望這有助於發佈表單數據，讓我知道你上車！

Answer 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的地方。

清澈如泥？

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> 

再從$ _ POST值在PHP（或任何其他網絡服務器的腳本引擎），並做你的事來更新數據庫。根據需要更改URL和數據陣列。請記住，數據可以是這樣的：{input1：value1，input2：value2}，PHP將得到類似$ _POST ['input1'] = value1和$ _POST ['input2'] = value2的東西。