如何使用 jQuery 创建 Ajax 提交表单-之路教程

如何使用 jQuery 创建 Ajax 提交表单

如今，Ajax 表单是 Web 技术的重要组成部分。
它可以在不重新加载页面的情况下更新网页的某些部分，并可以接收多种格式的信息，例如 HTML、JSON 或者 XML。

让我们向我们展示一些使用 jQuery Ajax 发送 HTML 表单数据的方法。

jQuery 建议使用灵活的 ajax() 函数来提交 Ajax 表单：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
  </head>
  <body>
    <form action="path/to/server/script" method="post" id="my_form">
      <label>Name</label>
      <input type="text" name="name" />
      <label>Email</label>
      <input type="email" name="email" />
      <label>Website</label>
      <input type="url" name="website" />
      <input type="submit" name="submit" value="Submit Form" />
      <div id="server-results">
        <!-- For server results -->
      </div>
    </form>
    <script>
      $("#my_form").submit(function(event) {
          event.preventDefault(); //阻止默认的表单行为
          let post_url = $(this).attr("action"); //获取表单操作的url
          let request_method = $(this).attr("method"); //获取表单的  GET/POST 方法
          let form_data = $(this).serialize(); //将表单元素值编码，便于提交
          $.ajax({
              url: post_url,
              type: request_method,
              data: form_data
            }).done(function(response) { //
              $("#server-results").html(response);
            });
        });
    </script>
  </body>
</html>

但是，还有一些其他需要较少代码的 jQuery 速记方法。

jQuery post() 函数是 ajax() 的简写：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
  </head>
  <body>
    <form action="path/to/server/script" method="post" id="my_form">
      <label>Name</label>
      <input type="text" name="name" />
      <label>Email</label>
      <input type="email" name="email" />
      <label>Website</label>
      <input type="url" name="website" />
      <input type="submit" name="submit" value="Submit Form" />
      <div id="server-results">
        <!-- For server results -->
      </div>
    </form>
    <script>
      $("#my_form").submit(function(event) {
          event.preventDefault(); //阻止默认的表单操作
          let post_url = $(this).attr("action"); //获取表单操作的url
          let form_data = $(this).serialize(); //将表单元素值编码，便于提交
          $.post(post_url, form_data, function(response) {
            $("#server-results").html(response);
          });
        });
    </script>
  </body>
</html>

jQuery get() 与 post() 相同，但使用 HTTP GET 请求：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
  </head>
  <body>
    <form action="path/to/server/script" method="post" id="my_form">
      <label>Name</label>
      <input type="text" name="name" />
      <label>Email</label>
      <input type="email" name="email" />
      <label>Website</label>
      <input type="url" name="website" />
      <input type="submit" name="submit" value="Submit Form" />
      <div id="server-results">
        <!-- For server results -->
      </div>
    </form>
    <script>
      $("#my_form").submit(function(event) {
          event.preventDefault(); //prevent default action 
          let post_url = $(this).attr("action"); //获取表单操作的url
          let form_data = $(this).serialize(); //将表单元素值编码，便于提交	
          $.get(post_url, form_data, function(response) {
            $("#server-results").html(response);
          });
        });
    </script>
  </body>
</html>

.serialize() 方法将表单输入序列化为查询字符串以使用 Ajax 发送。

要将文件上传到服务器，我们可以使用 XMLHttpRequest2 可用的 FormData 接口，该接口构造一个 FormData 对象并使用 jQuery Ajax 将其发送到服务器。

get() 和 post() 方法

jQuery get() 和 post() 方法向服务器发送请求并异步检索数据。
除了 get() 使用 HTTP GET 方法发出 Ajax 请求，而 post() 使用 HTTP POST 方法发出 Ajax 请求之外，两者都是相同的方法。
Web 浏览器使用 GET 或者 POST HTTP 方法与服务器通信。

GET 用于向指定资源请求数据，POST 用于向服务器发送数据以创建或者更新资源。

日期：2020-06-02 22:16:15 来源：oir作者：oir

←如何在 JavaScript 中创建二维数组

JS 如何创建一个包含 1…N 的数组→

get() 和 post() 方法

目录