溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

如何使用Ajax方法實(shí)現(xiàn)Form表單的提交

發(fā)布時(shí)間：2021-07-06 13:53:02 來(lái)源：億速云 閱讀：138 作者：小新 欄目：web開(kāi)發(fā)

這篇文章主要介紹了如何使用Ajax方法實(shí)現(xiàn)Form表單的提交，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

常見(jiàn)的form表單提交方式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>login test</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="login test">  
</head>
<body>
<div id="form-div">
  <form id="form1" action="/users/login" method="post">
    <p>用戶名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>
    <p>密　碼：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>
    <p><input type="submit" value="登錄">&nbsp<input type="reset" value="重置"></p>
  </form>
</div>
</body>
</html>

點(diǎn)擊登錄按鈕后，即觸發(fā)form表單的提交事件，數(shù)據(jù)傳輸至后端，由后端控制頁(yè)面跳轉(zhuǎn)和數(shù)據(jù)。

ajax實(shí)現(xiàn)form提交方式

修改完成后代碼如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>login test</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="ajax方式">
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script type="text/javascript">
    function login() {
      $.ajax({
      //幾個(gè)參數(shù)需要注意一下
        type: "POST",//方法類型
        dataType: "json",//服務(wù)端接收的數(shù)據(jù)類型
        url: "/users/login" ,//url
        data: $('#form1').serialize(),
        success: function (result) {
          console.log(result);//打印服務(wù)端返回的數(shù)據(jù)(調(diào)試用)
          if (result.resultCode == 200) {
            alert("SUCCESS");
          }
          ;
        },
        error : function() {
          alert("異常！");
        }
      });
    }
  </script>
</head>
<body>
<div id="form-div">
  <form id="form1" onsubmit="return false" action="##" method="post">
    <p>用戶名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>
    <p>密　碼：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>
    <p><input type="button" value="登錄" onclick="login()">&nbsp;<input type="reset" value="重置"></p>
  </form>
</div>
</body>
</html>

注意事項(xiàng)

  • 在常用方式中，點(diǎn)擊的登錄按鈕的type為"submit"類型；

  • 在常用方式中，form的action不為空；

  • ajax方式中需要注意的是$.ajax方法中的參數(shù)：dataType和data。

我平時(shí)很少寫(xiě)前端代碼，級(jí)別也就是入門(mén)級(jí)別，能看懂能改而已，所以很多時(shí)候都是百度，像這次這個(gè)功能的實(shí)現(xiàn)也是借助了百度，但是，我百度到的代碼在$.ajax方法中設(shè)置的dataType參數(shù)值為"html"而不是"json"，導(dǎo)致我在一開(kāi)始調(diào)試的時(shí)候一直報(bào)錯(cuò)，最終是改成了"json"才成功，因此在這里特別說(shuō)明并提醒一下，別和我一樣走錯(cuò)了路，還有就是向服務(wù)端傳輸?shù)膁ata值了，像上面代碼一樣，將form表單中的數(shù)據(jù)序列化傳輸即可。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何使用Ajax方法實(shí)現(xiàn)Form表單的提交”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手