最近中文字幕高清中文字幕无,亚洲欧美高清一区二区三区,一本色道无码道dvd在线观看 ,一个人看的www免费高清中文字幕

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

HTML Form 方法與 jQuery 函數(shù)類型

HTML Form 方法與 jQuery 函數(shù)類型

智慧大石 2024-01-18 20:47:41
我完全是前端開發(fā)的新手,剛剛學(xué)習(xí) jQuery。我對(duì)“使用 jQuery ajax 提交 HTML 表單”感到困惑。這是一個(gè)簡單的例子:<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>如您所見,當(dāng)我們單擊按鈕時(shí)Send,將調(diào)用該函數(shù)formSubmit()并且 jQuery.ajax 將執(zhí)行其工作。它將發(fā)送一個(gè)類型為 的 http 請(qǐng)求PUT。但是HTML表單中有一個(gè)屬性method="post",現(xiàn)在我很困惑。當(dāng)我們點(diǎn)擊按鈕時(shí),實(shí)際上會(huì)發(fā)生什么?jQuery.ajax 將在 js 函數(shù)中發(fā)送請(qǐng)求,但它會(huì)做什么呢method="post"?還是method="post"可以忽略?如果它什么都不做,我們可以將屬性設(shè)置method為空嗎:<form class="form" action="" method="">?額外的現(xiàn)在我意識(shí)到這個(gè)例子中按鈕的類型是button, 而不是submit。如果我將類型更改為submit并單擊它,會(huì)發(fā)生什么?它會(huì)發(fā)送兩個(gè) http 請(qǐng)求,一個(gè)來自表單的 post 請(qǐng)求,一個(gè)來自 jQuery.ajax 的 put 請(qǐng)求嗎?
查看完整描述

4 回答

?
qq_花開花謝_0

TA貢獻(xiàn)1835條經(jīng)驗(yàn) 獲得超7個(gè)贊

這個(gè)例子設(shè)計(jì)得很糟糕并且令人困惑。

formSubmit僅當(dāng)單擊按鈕時(shí)才會(huì)調(diào)用該函數(shù)。單擊按鈕時(shí),該函數(shù)將運(yùn)行,并且不會(huì)發(fā)生其他任何事情;由于輸入不是提交按鈕,因此表單不會(huì)嘗試提交。所有網(wǎng)絡(luò)活動(dòng)都將由jQuery.ajax函數(shù)內(nèi)部產(chǎn)生。在這種情況下, the<form>和 themethod="post"會(huì)被完全忽略,因?yàn)楸韱尾粫?huì)被提交 - 使用的方法將是函數(shù)中的方法.ajax,即 PUT。

但是,如果用戶在聚焦于<input type="text". 如果他們這樣做,那么該formSubmit函數(shù)將不會(huì)被調(diào)用(因?yàn)槲磫螕舭粹o),并且用戶的瀏覽器將在當(dāng)前頁面上將name和 作為message表單數(shù)據(jù)發(fā)送到服務(wù)器 - 是的,作為 POST。(這段代碼是在當(dāng)前頁面嗎submit.php?如果不是,那可能是一個(gè)錯(cuò)誤。也許編寫代碼的人完全忽略了不使用按鈕即可提交表單的可能性。)

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


查看完整回答
反對(duì) 回復(fù) 2024-01-18
?
炎炎設(shè)計(jì)

TA貢獻(xiàn)1808條經(jīng)驗(yàn) 獲得超4個(gè)贊

HTML 表單中的屬性method用于在不借助 Ajax 請(qǐng)求或任何其他腳本語言的情況下發(fā)送表單數(shù)據(jù)時(shí)發(fā)送表單數(shù)據(jù)。

當(dāng)您使用 JS 和 Jquery 等腳本語言時(shí),您有機(jī)會(huì)通過 AJAX 請(qǐng)求發(fā)送數(shù)據(jù)。在 AJAX 請(qǐng)求中,您可以再次定義該方法。因此,它不會(huì)依賴于 HTML 表單的method屬性。

您可以關(guān)注的資源很少:


查看完整回答
反對(duì) 回復(fù) 2024-01-18
?
慕的地6264312

TA貢獻(xiàn)1817條經(jīng)驗(yàn) 獲得超6個(gè)贊

實(shí)際上,當(dāng)您不使用任何 ajax 請(qǐng)求時(shí),標(biāo)簽很有用method。action

??假設(shè)你沒有使用該ajax請(qǐng)求那么會(huì)發(fā)生什么?

  1. 由于您methodPOST它會(huì)將表單數(shù)據(jù)附加到 HTTP 請(qǐng)求的正文中。

  2. 然后表單數(shù)據(jù)被發(fā)送到action屬性中指定的頁面。

但由于您現(xiàn)在通過 手動(dòng)控制表單提交ajax。您可以跳過這些attributes。在這種情況下,您可以在您的formSubmit方法中指定提交完成后要執(zhí)行的操作。

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

<form onSubmit="formSubmit(event);">

  <button>submit</button>

</form>


function formSubmit(e) {

  e.preventDefault();

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

}


查看完整回答
反對(duì) 回復(fù) 2024-01-18
?
LEATH

TA貢獻(xiàn)1936條經(jīng)驗(yàn) 獲得超7個(gè)贊

form 標(biāo)簽通過提供幾個(gè)內(nèi)置的默認(rèn)操作來提供支持,但由于您已經(jīng)定義了一個(gè)提交按鈕并創(chuàng)建了一個(gè)要手動(dòng)執(zhí)行 onclick 的函數(shù),因此 form 標(biāo)簽只會(huì)混淆結(jié)構(gòu)。因此,最好完全刪除表單標(biāo)簽,您的代碼將如下所示


    <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">



<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>


查看完整回答
反對(duì) 回復(fù) 2024-01-18
  • 4 回答
  • 0 關(guān)注
  • 359 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)