專注Java教育13年 全國咨詢/投訴熱線:400-8080-105

          首頁 hot資訊 在jQuery中通過Ajax表單提交數據

          在jQuery中通過Ajax表單提交數據

          更新時間:2022-04-15 08:53:35 來源:動力節點 瀏覽103次

          如何在 jQuery 中通過 AJAX 提交表單

          創建 HTML 表單

          jQuery Ajax 代碼

          常見問題

          如何在 jQuery ajax 中使用表單數據添加額外的字段或數據?

          ajax FormData:非法調用

          如何使用 jQuery.ajax 發送 multipart/FormData 或文件?

          創建 HTML 表單

          在這一步中,我們將為多個文件上傳或 FormData 創建一個 HTML 表單和一個額外的字段。

          <!DOCTYPE html>
          <html>
          <title>jQuery Ajax Form Submit with FormData Example</title>
          <body>
          <h1>jQuery Ajax Form Submit with FormData Example</h1>
          <form method="POST" enctype="multipart/form-data" id="myform">
              <input type="text" name="title"/><br/><br/>
              <input type="file" name="files"/><br/><br/>
              <input type="submit" value="Submit" id="btnSubmit"/>
          </form>
          <h1>jQuery Ajax Post Form Result</h1>
          <span id="output"></span>
          <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 
          </body>
          </html>

          jQuery Ajax 代碼

          在這一步中,我們將編寫用于向服務器發送表單數據的 jquery ajax 代碼。

          $(document).ready(function () {
              $("#btnSubmit").click(function (event) {
                  //stop submit the form, we will post it manually.
                  event.preventDefault();
                  // Get form
                  var form = $('#myform')[0];
                 // Create an FormData object 
                  var data = new FormData(form);
                 // If you want to add an extra field for the FormData
                  data.append("CustomField", "This is some extra data, testing");
                 // disabled the submit button
                  $("#btnSubmit").prop("disabled", true);
                  $.ajax({
                      type: "POST",
                      enctype: 'multipart/form-data',
                      url: "/upload.php",
                      data: data,
                      processData: false,
                      contentType: false,
                      cache: false,
                      timeout: 800000,
                      success: function (data) {
                          $("#output").text(data);
                          console.log("SUCCESS : ", data);
                          $("#btnSubmit").prop("disabled", false);
                      },
                      error: function (e) {
                          $("#output").text(e.responseText);
                          console.log("ERROR : ", e);
                          $("#btnSubmit").prop("disabled", false);
                      }
                  });
              });
          });

          以上就是關于“在jQuery中通過Ajax表單提交數據”的介紹,大家如果想了解更多相關知識,可以來關注一下動力節點的AJAX教程,里面有更豐富的知識等著大家去學習,希望對大家能夠有所幫助哦。

          提交申請后,顧問老師會電話與您溝通安排學習

          免費課程推薦 >>
          技術文檔推薦 >>

          返回頂部
          自拍亚洲一区欧美另类 成年美女黄网站18禁免费| 亚洲免费无码中文在线亚洲在| 波多野结衣视频| 无码国产精品一区二区免费| 我年轻漂亮的继坶2| 你要吗快点太大了| 一本大道一卡二卡三卡| japanassexvideos在线| 女厕真实偷拍撒尿视频| 真实的乱| gogo全球专业大尺度高清人体| 很黄特别刺激又免费的视频| 老妇xxxxx性开放| 完整版免费AV片| 夜色私人影院app| 乱人伦中文视频在线观看| 腿张开办公室娇喘视频| 性xxxx欧美老妇胖老太肥肥| 神马av毛片| 人人爽天天碰狠狠添| 中国gay粉嫩小帅fuck| 三级黄线在线播放免费| 一级a做爱在免费线看| 国产精品久久自在自线| 痴汉电车喷潮在线播放| 国产日韩av免费无码一区二区| 国产精品青青青高清在线| 免费污站18禁的刺激| av人妻社区男人的天堂| vide0sdesext姑娘| 觉得隔布顶住花蕊| http://www.fjxtdz.com