异步提交表单

最新推荐文章于 2024-03-28 11:54:24 发布

码小余の博客

最新推荐文章于 2024-03-28 11:54:24 发布

阅读量4k

点赞数 2

分类专栏： JSON 前端文章标签： ajax json javascript

本文链接：https://blog.csdn.net/Cool_breeze_/article/details/108408068

版权

前端同时被 2 个专栏收录

78 篇文章 2 订阅

订阅专栏

JSON

10 篇文章 0 订阅

订阅专栏

异步提交表单

异步提交表单的步骤

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

获取表单及所有表单组件对应的数据值。
将所有表单组件对应的数据值拼成特定格式的字符串或是JSON格式数据。
通过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>

效果图

表单序列化

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

$('form').serialize()

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>

码小余の博客

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
异步提交表单

异步提交表单异步提交表单的步骤所谓异步提交表单，就是不再使用表单的提交按钮实现表单的提交功能，而是通过Ajax异步交互方式实现表单提交。具体实现步骤如下:获取表单及所有表单组件对应的数据值。将所有表单组件对应的数据值拼成特定格式的字符串或是JSON格式数据。通过Ajax异步交互方式提交表单。var info = 'username='+$('#username').val()+'&password='+$('#password').val();$.ajax({ url: "
复制链接

扫一扫