异步提交表单

JSON 同时被 2 个专栏收录
10 篇文章 0 订阅
71 篇文章 0 订阅

异步提交表单

异步提交表单的步骤

所谓异步提交表单,就是不再使用表单的提交按钮实现表单的提交功能,而是通过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);
	}
});

异步提交表单的案例

  • 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()
  1. 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>

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:博客之星2020 设计师:CSDN官方博客 返回首页

打赏作者

码小余の博客

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值