异步提交表单_js异步提交表单并回调
2023-06-13 09:13:03 时间
异步提交表单
异步提交表单的步骤
所谓异步提交表单,就是不再使用表单的提交按钮实现表单的提交功能,而是通过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>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/220323.html原文链接:https://javaforall.cn
相关文章
- js ajax 跨域问题 解决方案[通俗易懂]
- js中四舍五入的方法_JS取整
- Vue引入外部Js文件并使用方法超级无敌详细的教程「建议收藏」
- 异步JS中的Web Workers
- 刷完15道js版dp题,面试再也不怕了2
- JS的异步编程过程中的问题集锦、echarts使用记录。
- Js如何利用prototype为类创建静态成员属性和方法
- 链接提交-js代码推送进化版详解程序员
- js获取当前系统时间详解编程语言
- JS动态引入js、CSS动态创建script/link/style标签详解编程语言
- JS获取鼠标位置(鼠标坐标)
- JS scrollLeft和scrollTop属性:读写元素左侧和顶部已滚动的距离
- 使用JS控制Oracle数据库的更新(js控制oracle更新)
- 使用Oracle和JS开发新一代应用仿真世界(oracle js)
- 图片从右至左滚动JS
- js实现图片预加载(js操作Image对象属性complete,事件onload异步加载图片)
- Androidwebview与js交换JSON对象数据示例
- 异步动态加载JS并运行(示例代码)
- js中同步与异步处理的方法和区别总结
- JS判断、校验MAC地址的2个实例
- js的touch事件的实际引用
- 如何调试异步加载页面里包含的js文件
- Node.js中调用mysql存储过程示例
- node.js中的forEach()是同步还是异步呢
- JS实现单行文字不间断向上滚动的方法