首頁猿問 HTML Form 方法與...

HTML Form 方法與 jQuery 函數類型

JavaScript

智慧大石 2024-01-18 20:47:41

我完全是前端開發的新手，剛剛學習 jQuery。我對“使用 jQuery ajax 提交 HTML 表單”感到困惑。這是一個簡單的例子：<form class="form" action="" method="post"> <input type="text" name="name" id="name" > <textarea name="text" id="message" placeholder="Write something to us"> </textarea> <input type="button" onclick="return formSubmit();" value="Send"></form><script> function formSubmit(){ var name = document.getElementById("name").value; var message = document.getElementById("message").value; var dataString = 'name='+ name + '&message=' + message; jQuery.ajax({ url: "submit.php", data: dataString, type: "PUT", success: function(data){ $("#myForm").html(data); }, error: function (){} }); return true; }</script>如您所見，當我們單擊按鈕時Send，將調用該函數formSubmit()并且 jQuery.ajax 將執行其工作。它將發送一個類型為的 http 請求PUT。但是HTML表單中有一個屬性method="post"，現在我很困惑。當我們點擊按鈕時，實際上會發生什么？jQuery.ajax 將在 js 函數中發送請求，但它會做什么呢method="post"？還是method="post"可以忽略？如果它什么都不做，我們可以將屬性設置method為空嗎：<form class="form" action="" method="">？額外的現在我意識到這個例子中按鈕的類型是button, 而不是submit。如果我將類型更改為submit并單擊它，會發生什么？它會發送兩個 http 請求，一個來自表單的 post 請求，一個來自 jQuery.ajax 的 put 請求嗎？

查看完整描述

4 回答

qq_花開花謝_0

TA貢獻1835條經驗獲得超7個贊

這個例子設計得很糟糕并且令人困惑。

formSubmit僅當單擊按鈕時才會調用該函數。單擊按鈕時，該函數將運行，并且不會發生其他任何事情；由于輸入不是提交按鈕，因此表單不會嘗試提交。所有網絡活動都將由jQuery.ajax函數內部產生。在這種情況下， the<form>和 themethod="post"會被完全忽略，因為表單不會被提交 - 使用的方法將是函數中的方法.ajax，即 PUT。

但是，如果用戶在聚焦于<input type="text". 如果他們這樣做，那么該formSubmit函數將不會被調用（因為未單擊按鈕），并且用戶的瀏覽器將在當前頁面上將name和作為message表單數據發送到服務器 - 是的，作為 POST。（這段代碼是在當前頁面嗎submit.php？如果不是，那可能是一個錯誤。也許編寫代碼的人完全忽略了不使用按鈕即可提交表單的可能性。）

為了使示例不那么混亂，我將按鈕更改為提交按鈕，并向表單添加提交處理程序，而不是向按鈕添加單擊偵聽器。然后使用提交處理程序return false或調用，e.preventDefault以便所有網絡活動都通過該.ajax調用。

反對回復 2024-01-18

炎炎設計

TA貢獻1808條經驗獲得超4個贊

HTML 表單中的屬性method用于在不借助 Ajax 請求或任何其他腳本語言的情況下發送表單數據時發送表單數據。

當您使用 JS 和 Jquery 等腳本語言時，您有機會通過 AJAX 請求發送數據。在 AJAX 請求中，您可以再次定義該方法。因此，它不會依賴于 HTML 表單的method屬性。

您可以關注的資源很少：

https://api.jquery.com/jquery.ajax/
https://api.jquery.com/jquery.post/

反對回復 2024-01-18

慕的地6264312

TA貢獻1817條經驗獲得超6個贊

實際上，當您不使用任何 ajax 請求時，標簽很有用method。action

??假設你沒有使用該ajax請求那么會發生什么？

由于您method是POST它會將表單數據附加到 HTTP 請求的正文中。
然后表單數據被發送到action屬性中指定的頁面。

但由于您現在通過手動控制表單提交ajax。您可以跳過這些attributes。在這種情況下，您可以在您的formSubmit方法中指定提交完成后要執行的操作。

您還可以form使用來阻止提交preventDefault。例如：

<button>submit</button>

</form>

function formSubmit(e) {

e.preventDefault();

// Now you can set where to go when your form is submitted successfully.

}

反對回復 2024-01-18

LEATH

TA貢獻1936條經驗獲得超7個贊

form 標簽通過提供幾個內置的默認操作來提供支持，但由于您已經定義了一個提交按鈕并創建了一個要手動執行 onclick 的函數，因此 form 標簽只會混淆結構。因此，最好完全刪除表單標簽，您的代碼將如下所示

function formSubmit(){

var name = document.getElementById("name").value;

var message = document.getElementById("message").value;

var dataString = 'name='+ name + '&message=' + message;

jQuery.ajax({

url: "submit.php",

data: dataString,

type: "PUT",

success: function(data){

$("#myForm").html(data);

error: function (){}

});

return true;

}

</script>

反對回復 2024-01-18

4 回答
0 關注
265 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

HTML Form 方法與 jQuery 函數類型

HTML Form 方法與 jQuery 函數類型

4 回答

添加回答