from表单异步处理. 简单处理方法: jQuery做异步提交表单处理, 通过$("#form").serialize()将表单元素的数据转化为字符串, 最后通过$.ajax()执行异步请求资源.

demo示例:

html 文件

 <html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>信息登记表异步提交</title>
<style type="text/css">
.grayBox{
backGround-color:#e0e0e0;
}
table{
text-align:center;
}
</style>
</head> <body>
<form onsubmit="return false" id="formAsync">
<table border="1" rules="all" bordercolor="#000000" >
<tr>
<th colspan="2" height="50">信息登记表</th>
</tr>
<tr class="grayBox" height="70">
<td width="50" >姓名</td>
<td><input type="text" name="username" size="16"/></td>
</tr>
<tr height="70">
<td>性别</td>
<td>
<input type="radio" name="sex" value="boy" checked="checked"/>男
<input type="radio" name="sex" value="girl"/>女
</td>
</tr>
<td colspan="2" height="40">
<input type="submit" value="提交信息" onclick="requestAsync()"/>
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</form>
</body> <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
function requestAsync() {
$.ajax({
type: "POST",
dataType: "json",
url: "test.php",
data: $('#formAsync').serialize(),
success: function (data) {
console.log(data);
if(data.code ==200){
var username = data.msg +' 姓名:'+data.username
alert(username);
}else{
alert(data.msg);
}
},
error : function() {
alert("操作异常!");
}
});
}
</script>
</html>

test.php 文件

 <?php
$username = !empty($_POST['username']) ? trim($_POST['username']) :'';
$sex = $_POST['sex']; //简单逻辑判断
if($username){
msg(200,'异步处理成功.',$username,$sex);
}else{
msg(400,'数据处理失败,请输入姓名!');
} function msg($code,$msg,$username='',$sex=''){
exit(json_encode([
'code'=> $code,
'msg' => $msg,
'username' => $username,
'sex' => $sex
]));
}

结果打印:

html from表单异步处理的更多相关文章

  1. 使用jQuery.form插件,实现完美的表单异步提交

    传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...

  2. 使用jQuery,实现完美的表单异步提交

    jQuery异步提交表单 <form id="form1" method="post"> <table border="1" ...

  3. yii2 modal弹窗之ActiveForm ajax表单异步验证

    作者:白狼 出处:http://www.manks.top/yii2_modal_activeform_ajax.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位 ...

  4. .net mvc中的表单异步提交

    // // 摘要: // 将 <form> 开始标记写入响应. // // 参数: // ajaxHelper: // AJAX 帮助器. // // actionName: // 将处理 ...

  5. Ajax表单异步上传(包括文件域)

    起因 做前台页面时,需要调用WebAPI的Post请求,发送一些字段和文件(相当于把表单通过ajax异步发送出去,得到返回结果),然后得到返回值判断是否成功. 尝试 先是尝试了一下 "jQu ...

  6. jquery.form.js 使用以及问题(表单异步提交)

    标注:我引用的js后报错 原因:是引用的js有冲突 我引用了两便jQuery: 转载:https://blog.csdn.net/cplvfx/article/details/80455485 使用方 ...

  7. jQuery——表单异步提交

    如果不做任何处理,表单提交时会刷新页面,为了改善体验,可以使用jQuery做到异步提交表单:通过$("#form").serialize()将表单元素的数据转化为字符串,然后通过$ ...

  8. vue中的表单异步校验方法封装

    在vue项目的开发中,表单的验证必不可少,在开发的过程中,用的是vue+iview的一套,我们知道iview的表单验证是基于async-validator,对于async-validator不熟悉的可 ...

  9. jquery让form表单异步提交

    1.监听表单提交事件,并阻止表单提交 $("form").submit(function(e) { return false;//阻止表单提交 }) 2.拿到表单内容 let da ...

随机推荐

  1. C#实现京东登录密码加密POST

    1.京东登录登录密码 function getEntryptPwd(pwd) { var pubKey = $('#pubKey').val(); if (!pwd || !pubKey || !Sy ...

  2. [Usaco2005 mar]Yogurt factory 奶酪工厂

    接下来的N(1≤N10000)星期中,奶酪工厂在第i个星期要花C_i分来生产一个单位的奶酪.约克奶酪工厂拥有一个无限大的仓库,每个星期生产的多余的奶酪都会放在这里.而且每个星期存放一个单位的奶酪要花费 ...

  3. 工具 - MSF

    #ms17- use auxiliary/scanner/smb/smb_ms17_010 - exploit use exploit/windows/smb/ms17_010_eternalblue ...

  4. 关于Vue的理解以及与React框架的对比

    1.Vue的理解 概念: Vue是一套用于构建用户界面的渐进式框架: Vue的核心库只关注视图层: 是一个数据驱动的MVVM框架: 特性: 确实轻量:体积比较小: 数据绑定简单.方便: 有一些简单的内 ...

  5. Nginx配置之rewrite、proxy_pass、upstream、location

    如图,这是Nginx的配置文件nginx.conf中的一段配置代码. 在http段中定义了一个名为webservers的upstream模块,主要用于负载均衡. 在server模块中,定义了一个loc ...

  6. [Git] 008 status 与 commit 命令的补充

    本文的"剧情"承接 [Git] 007 三棵树以及向本地仓库加入第一个文件 1. 对 "status" 的补充 1.1 "status" 有 ...

  7. [Python3] 015 冰冻集合的内置方法

    目录 0. 前言 英文名 元素要求 使用限制 返回 方法数量 1. 如何查看 frozenset() 的内置方法 2. 少废话,上例子 2.1 copy() 2.2 difference() 2.3 ...

  8. [Luogu 4688] [Ynoi2016]掉进兔子洞 (莫队+bitset)

    [Luogu 4688] [Ynoi2016]掉进兔子洞 (莫队+bitset) 题面 一个长为 n 的序列 a.有 m 个询问,每次询问三个区间,把三个区间中同时出现的数一个一个删掉,问最后三个区间 ...

  9. Mysql 数据库存储的原理??

    储存过程是一个可编程的函数,它在数据库中创建并保存.它可以有 SQL 语句和一些特殊的控制结 构组成.当希望在不同的应用程序或平台上执行相同的函数,或者封装特定功能时,存储过程是非常有用的.数据库中的 ...

  10. 面向切面编程 AOP 和装饰器??

    1.AOP概念:面向切面编程,指扩展功能不修改源代码,将功能代码从业务逻辑代码中分离出来. 主要功能:日志记录,性能统计,安全控制,事务处理,异常处理等等. 主要意图:将日志记录,性能统计,安全控制, ...