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. python接口自动化:响应内容中json字符串对象的处理

    实现代码如下: import json #定义一个字典.一个列表.两个字符串({}中必须是双引号) di1={"} di2=[{"}] di3='{"name" ...

  2. 神器 工具 推荐 SRDebugger

    unity asset store 关联下载 ,添加这个书签  javascript:var url = window.location.href;var id = url.substr(url.la ...

  3. SQL语句创建函数

    ----先create,再alter alter function fuc (@userid int,@strWhere varchar(max),@strWhere2 varchar(max) )  ...

  4. (4.12)mysql备份还原——mysql逻辑备份之mysqldump

    关键词:mysql逻辑备份介绍,mysqldump,mysqldump最佳实践 我的相关文章:https://www.cnblogs.com/gered/p/9721696.html 正文 1.mys ...

  5. sql中的sp_helptext、sp_help 、sp_depends

    sp_help:用于显示参数清单和其数据类型. sp_depends:用于显示存储过程依据的对象或者依据存储过程的对象. sp_helptext:用于显示存储过程的定义文本

  6. ajax 的post方法 的content-type设置和express里应用body-parser

    ajax的post方法相比get方法,在传参形式上很不一样, get把参数用'?'拼接在端口后,并且用'&'连接;而post则是需要在send参数里设置. 根据ajax实例xhr.setReq ...

  7. CentOS 下 redis 安装与配置

    CentOS 下 redis 安装与配置   1.到官网上找到合适版本下载解压安装 [root@java src]# wget -c http://redis.googlecode.com/files ...

  8. 关于 Python 程序的运行方面,有什么手段能提升性能?

    1.使用多进程,充分利用机器的多核性能2.对于性能影响较大的部分代码,可以使用 C 或 C++编写3.对于 IO 阻塞造成的性能影响,可以使用 IO 多路复用来解决4.尽量使用 Python 的内建函 ...

  9. HTML文件头部元素作用

    1.DOCTYPE的作用 DOCTYPE是document type(文档类型)的缩写.<!DOCTYPE html>声明位于文档最前面,主要作用是告诉浏览器的解析器使用哪种HTML规范或 ...

  10. append动态生成的元素,无法触发事件的原因及解决方案

    今天笔者在实现一个简单的动态生成元素功能的时候,发现了一个问题: 使用append动态生成的元素事件绑定失效了. 查阅资料后发现: click(fn)当选中的选择器被点击时触发回调函数fn.只针对与页 ...