异步提交表单_js异步提交表单并回调

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

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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>
    

    效果图

    异步提交表单_js异步提交表单并回调

表单序列化

  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>

异步提交表单_js异步提交表单并回调

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/220323.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • SSM整合(狂神版)

    SSM整合(狂神版)SSM整合数据库环境环境依赖pom.xml建立基本结构mybatis-config.xmlapplicationContext.xml数据库环境CREATEDATABASE`ssmbuild`;USE`ssmbuild`;DROPTABLEIFEXISTS`books`;CREATETABLE`books`(`bookID`INT(10)NOTNULLAUTO_INCREMENTCOMMENT’书id’,`bookName`VARCHAR(100)NO

  • jenkins拉取gitlab代码_git提交远程仓库命令

    jenkins拉取gitlab代码_git提交远程仓库命令前言python自动化的脚本开发完成后需提交到git代码仓库,接下来就是用Jenkins拉取代码去构建自动化代码了新建项目打开Jenkins新建一个自由风格的项目源码管理Repository

  • 单点登录说明(单点登录流程)

      什么是单点登录?单点登录全称SingleSignOn(以下简称SSO),是指在多系统应用群中登录一个系统,便可在其他所有系统中得到授权而无需再次登录,包括单点登录与单点注销两部分1、登录  相比于单系统登录,sso需要一个独立的认证中心,只有认证中心能接受用户的用户名密码等安全信息,其他系统不提供登录入口,只接受认证中心的间接授权。间接授权通过令牌实现,sso认证中心验证用户的用户…

  • xray安全漏洞检测(高效能)

    xray安全漏洞检测(高效能)风险告知:请勿在未授权情况下,对网站进行安全扫描,存在很大的法律风险,详细请了解网络安全法。血的案例:”白帽黑客”找漏洞被抓引争议世纪佳缘否认”钓鱼”–传媒–人民网在正式运行xray生成配置文件config.yaml后,请优先修改配置项,确认扫描范围,再重新启动xray如不预先配置,默认扫描所有站点,存在非常大的法律风险,请知悉!!!xray是一款功能强大的安全评估工具,主要特性有:检测速度快。发包速度快;漏洞检测算法高效。 支持范围广。大至OWASPTo.

  • java swing入门教程_java swing基础(菜鸟教程学习)

    java swing入门教程_java swing基础(菜鸟教程学习)JavaSwing介绍1.Swing是一个为java世纪的GUI工具包2.Swing是JAVA基础类的一部分3.Swing包括了图形用户界面(GUI)器件如:文本框,按钮,分隔窗格和表4个器件4.Swing提供许多比AWT更好的屏幕显示元素,用纯java写成。AWT是JFC的一部分,支持可更换的面板和主题(各种操作系统默认的特有主题),然而并不是真的使用原生平台提供的设备,而是仅仅在表面上模仿…

  • 人迹罕至的android要完全退出程序的一种方法

    人迹罕至的android要完全退出程序的一种方法

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号