大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46，售后保障稳定

异步提交表单

异步提交表单的步骤

所谓异步提交表单，就是不再使用表单的提交按钮实现表单的提交功能，而是通过Ajax异步交互方式实现表单提交。具体实现步骤如下:

1. 获取表单及所有表单组件对应的数据值。
2. 将所有表单组件对应的数据值拼成特定格式的字符串或是JSON格式数据。
3. 通过Ajax异步交互方式提交表单。

var info = 'username='+$('#username').val()+'&password='+$('#password').val();
$.ajax({ 
   
    url: "server.js',
    type: 'post',
    data: info,
    success: function(data){ 
   
    	console.log(data);
	}
});

Jetbrains全家桶1年46，售后保障稳定

异步提交表单的案例

• JSON文件

  { 
       
    "username": "zhangsan",
    "password": "123456",
    "msg": "登录成功！"
  }
  

• HTML文件

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>异步提交表单</title>
      <style> input { 
         display: block; margin-bottom: 10px; } </style>
    </head>
    <body>
      <form action="">
        用户名：<input type="text" id="username" /> 密码：<input type="password" id="password" />
        <input type="submit" />
      </form>
  
      <script src="js/jquery-1.12.4.js"></script>
      <script> var $form = $("form"); var $username = $("#username"); var $password = $("#password"); $form.bind("submit", function (event) { 
         // 阻止表单默认的同步提交 event.preventDefault(); // 1. 获取表单组件的数据内容 var username = $username.val(); var password = $password.val(); // console.log(username); // console.log(password); // post请求方式 $.get("data/server5.json", { 
         username }, function (response) { 
         // console.log(response); var usernameJson = response.username; var passwordJson = response.password; if (username === usernameJson && password === passwordJson) { 
         alert("登录成功!"); } else { 
         alert("用户名或密码错误"); } }); }); </script>
    </body>
  </html>
  

  效果图

  

表单序列化

1. serialize()方法: 将表单组件对应的数据值序列化为指定格式的字符串内容。

$('form').serialize()

2. serializeArray()方法: 将表单组件对应的数据值序列化为JSON格式的数据内容。

   $('select, :radio').serializeArray()
   

代码演示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表单序列化</title>
    <style> input { 
     display: block; margin-bottom: 10px; } </style>
  </head>
  <body>
    <form action="">
      用户名：<input type="text" name="username" id="username" /> 密码：<input type="password" name="password" id="password" />
      <input type="submit" />
    </form>

    <script src="js/jquery-1.12.4.js"></script>
    <script> var $form = $("form"); var $username = $("#username"); var $password = $("#password"); $form.bind("submit", function (event) { 
     // 阻止表单默认的同步提交 event.preventDefault(); // 表单序列化 - 根据表单默认同步提交获取数据的方式 // var data = $("form").serialize(); // console.log(data); var data = $("form").serializeArray(); console.log(data); // post请求方式 $.get("data/server5.json", data, function (response) { 
     console.log(response); }); }); </script>
  </body>
</html>