如何使用ajax傳送web表單

JQuery是迄今為止使用AJAX最簡單的方法。在本文中，您將學習如何使用AJAX動態傳送web表單。...

您可能已經閱讀了jQuery指南，以及jQuery教程中關於AJAX的第五部分，但今天我將向您展示如何使用AJAX動態發送web表單。JQuery是迄今為止使用AJAX最簡單的方法，如果您是初學者，請查看我們的入門教程。我們直接跳進去吧。

為什麼要使用ajax

你可能想知道“為什麼我需要AJAX？”HTML完全能夠提交表單，而且提交表單的方式相當輕鬆。AJAX在絕大多數網頁中都得到了實現，而且它的流行程度還在不斷上升。

AJAX帶來的巨大好處是能夠部分加載網頁的部分。這使得頁面顯示更快、更靈敏，只需重新加載一小部分數據而不是整個頁面，就可以節省帶寬。以下是一些基本的AJAX用例：

定期檢查新郵件。
每30秒更新一次實況足球比分。
更新在線拍賣的價格。

AJAX為開發人員提供了一種幾乎無限的能力，可以使網頁快速、響應迅速、快速——這是您的訪問者會感謝您的。

html

在開始之前，您需要一個HTML表單。如果你不知道HTML是什麼，那麼閱讀我們的指南，如何為初學者創建一個網站。

以下是您需要的HTML：

<!DOCTYPE html><html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script><script type="text/javascript"></script></head><body><form action="some/file" method="POST" name="myForm" id="myForm">Name:<input type="text" name="name">Age:<input type="text" name="age"><input type="submit"></form> </body></html>

這個html定義了一個包含幾個元素的表單。注意如何有動作和方法屬性。它們定義了表單提交的位置和方式。當您使用AJAX時不需要它們，但是使用它們是一個好主意，因為它可以確保您的網站的訪問者在禁用JavaScript的情況下仍然可以使用它。這個頁面包括Google在其CDN上託管的jQuery。頭部包含一個腳本標記——這是編寫代碼的地方。

這個表單現在看起來可能有點枯燥，所以您可能需要考慮學習CSS來讓它更生動一些。

javascript

有幾種方法可以使用JavaScript提交表單。第一個也是最簡單的方法是通過submit方法：

document.getElementById('myForm').submit();

當然，如果願意的話，可以使用jQuery將表單作為目標——這沒有什麼區別：

$('#myForm').submit();

這個命令告訴瀏覽器提交表單，就像按提交按鈕一樣。它通過它的id將表單作為目標，在本例中，這就是myForm。這不是AJAX，因此它將重新加載整個頁面——這並不總是令人滿意的。

在表單的method屬性中，指定了如何提交表單。這可以是POST或GET。使用AJAX提交表單時不使用此屬性，但可以使用相同的方法。

現代網絡的許多功能都是通過GET或POST請求來實現的。一般來說，GET用於檢索數據，POST用於發送數據（並返回響應）。數據可以通過GET發送，但是POST幾乎總是更好的選擇，尤其是對於表單數據。您以前可能見過GET請求--它們發送附加到URL的數據：

somewebsite.com/index.html?name=Joe

問號告訴瀏覽器，緊跟其後的任何數據都不用於遍歷網站，而是應該傳遞到頁面，供其處理。這很適用於簡單的事情，如頁碼，但也有一些缺點：

最大字符數限制：url中可以發送的字符數上限。如果您試圖發送大量數據，則可能沒有足夠的數據。

可見性：任何人都可以看到GET請求中發送的數據——這對密碼或表單數據等敏感數據都沒有好處。

POST請求的工作方式類似，只是它們不發送URL中的數據。這意味著可以發送更多的數據（數據稱為有效負載），並且通過不公開數據來獲得一些安全性。儘管如此，數據仍然可以很容易地訪問，因此如果您想完全放心，請查看SSL證書。

無論使用POST還是GET，數據都以鍵-&gt；值對發送。在上面的URL中，鍵是name，值是Joe。

提交表單的更好方法是使用異步JavaScript和XML（AJAX）。JavaScript支持AJAX調用，但使用起來可能會很混亂。JQuery實現了這些完全相同的方法，但它是以一種易於使用的方式實現的。您可以指示瀏覽器執行GET或POST請求—在本例中，請使用POST，但GET請求的執行方式與此類似。

語法如下：

$.post('some/url', $('#myForm').serialize());

這段代碼做了幾件事。第一部分（$）讓您的瀏覽器知道您想使用jQuery執行此任務。第二部分從jQuery調用post方法。您必須傳入兩個參數；第一個是要將數據發送到的url，而第二個是數據。您可能會發現（取決於您嘗試訪問的URL），瀏覽器的同源安全策略可能會在這裡產生干擾。您可以啟用跨源資源共享來解決這個問題，但只要指向與您的頁面位於同一域上的URL就足夠了。

第二個參數調用窗體上的jQuery serialize方法。這個方法訪問表單中的所有數據，併為傳輸做好準備——它將它們序列化。

僅此代碼就足以提交一個表單，但您可能會發現有些奇怪。值得研究瀏覽器開發人員工具，因為這些工具可以輕鬆地調試網絡請求。

另外，Postman是測試HTTP請求的優秀免費工具。

如果您想在按下submit按鈕時使用AJAX提交表單，那麼同樣簡單。您需要將代碼附加到表單的提交事件。代碼如下：

$(document).on('submit','#myForm',function(){ $.post('some/url', $('#myForm').serialize()); return false;});

這段代碼做了幾件事。提交表單後，瀏覽器將首先運行代碼。然後，代碼使用AJAX提交表單數據。所需的最後一步是防止原始表單提交——您已經用AJAX完成了這項工作，所以您不希望再次發生這種情況！

如果希望在AJAX完成後執行其他任務（或者甚至返回狀態消息），則需要使用回調。JQuery使這些工具非常易於使用——只需將函數作為另一個參數傳遞如下：

$.post('url', $('#myForm').serialize(), function(result) { c***ole.log(result);}

result參數包含數據發送到的url返回的任何數據。您可以輕鬆地響應此數據：

if(result == 'success') { // do some task}else { // do some other task}

這篇文章到此為止。希望您現在對HTTP請求以及AJAX如何在表單上下文中工作有了深入的瞭解。

你今天學了什麼新把戲嗎？如何在表單中使用AJAX？請在下面的評論中告訴我們您的想法！

圖片來源：vectorfusionart/Shutterstock

發表於 2021-03-14 16:09
閱讀 ( 44 )
分類：程式設計

你可能感興趣的文章

得到(get)和php中的post方法(post method in php)的區別

...伺服器傳送資訊的兩種方法。這些方法有助於透過表單從使用者檢索資訊。目錄 1. 概述和主要區別 2. 什麼是PHP中的GET方法 3. 什麼是PHP中的POST方法 4. 並排比較-以表格形式在PHP中使用GET vs POST方法 5. 摘要什麼是php中的get方法(ge...

發佈於 2020-10-17 03:43
閲讀 ( 41 )

json格式(json)和xml(xml)的區別

...ript（AJAX）和開發restfulweb服務。它也可以與許多語言一起使用，如java、C++、C++、Python。JSON的一些資料型別有Number、Boolean、String、Array、Object、Null。JSON語法是使用鍵值對，資料用逗號分隔。圖01:JSON 下面是一個JSON物件的例子。 ...

發佈於 2020-10-20 01:35
閲讀 ( 44 )