jQuery表单提交和后台交互

要求：仅使用jQuery提交表单和后台交互，不使用基于jQuery的表单插件

方式1、取到页面控件的值后拼接放在data中，传递到后台

页面代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>纯Jquery表单和后台交互</title><script type="text/javascript" src="lib/jquery-1.7.2.min.js"></script><script type="text/javascript">$(function () {$("#btnSubmit").click(function () {$.ajax({type: "post",url: "Handler01.ashx",data: "txtUserName=" + $.trim($("#txtUserName")[0].value) + "&txtUserPwd=" + $.trim($("#txtUserPwd")[0].value),success: function (result) {$("#msg").html(result);}});return false;});});</script>
</head>
<body><form id="frmUserInfo" action="#"><table><tr><td>姓名</td><td><input type="text" id="txtUserName" /></td></tr><tr><td>密码</td><td><input type="password" id="txtUserPwd" /></td></tr><tr><td colspan="2"><input type="submit" id="btnSubmit" value="提交" /></td></tr></table></form><div id="msg"></div>
</body>
</html>

一般处理程序代码：

using System.Web;namespace Test
{/// <summary>/// Handler 的摘要说明/// </summary>public class Handler01 : IHttpHandler{/// <summary>/// 请求处理/// </summary>/// <param name="context"></param>public void ProcessRequest(HttpContext context){context.Response.ContentType = "text/plain";// 方式1string userName = context.Request.Params["txtUserName"].ToString();string userPwd = context.Request.Params["txtUserPwd"].ToString();context.Response.Write(string.Format("姓名：{0}，密码：{1}",userName, userPwd));context.Response.End();}public bool IsReusable{get{return false;}}}
}

方式2、页面序列化后放在data中，传递到后台

注：此种方式需设置页面控件的name属性

页面代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>纯Jquery表单和后台交互</title><script type="text/javascript" src="lib/jquery-1.7.2.min.js"></script><script type="text/javascript">$(function () {$("#btnSubmit").click(function () {$.ajax({type: "post",url: "Handler02.ashx",data: $("#frmUserInfo").serialize(),success: function (result) {$("#msg").html(result);}});return false;});});</script>
</head>
<body><form id="frmUserInfo" action="#"><table><tr><td>姓名</td><td><input type="text" id="txtUserName" name="txtUserName" /></td></tr><tr><td>密码</td><td><input type="password" id="txtUserPwd" name="txtUserPwd" /></td></tr><tr><td colspan="2"><input type="submit" id="btnSubmit" value="提交" /></td></tr></table></form><div id="msg"></div>
</body>
</html>

一般处理程序代码：

using System.Web;namespace Test
{/// <summary>/// Handler 的摘要说明/// </summary>public class Handler02 : IHttpHandler{/// <summary>/// 请求处理/// </summary>/// <param name="context"></param>public void ProcessRequest(HttpContext context){context.Response.ContentType = "text/plain";// 方式2（对应表单序列化）string userName = context.Request.Form["txtUserName"].ToString();string userPwd = context.Request.Form["txtUserPwd"].ToString();context.Response.Write(string.Format("姓名：{0}，密码：{1}", userName, userPwd));context.Response.End();}public bool IsReusable{get{return false;}}}
}

jQuery表单提交和后台交互相关推荐

html表单提交前验证,jquery表单提交前实现同步验证（附代码）
jquery表单提交前实现同步验证 .int{ height: 30px; text-align: left; width: 600px; } label{ width: 200px; margin- ...
form表单提交，后台实体类接收转义问题解决方案
Ajax传一个实体给后台,以@RequestBody来接收: https://blog.csdn.net/zhou_pp/article/details/94738434 前台提交整个表单数据,后台实 ...
BJUI使用ajax异步表单提交时后台action要加@ResponseBody
场景在使用BJUI的ajaxform异步表单提交时,后台直接使用 @RequestMapping时不能正常回显消息. 知识储备 ajaxform异步表单提交通过data属性使用(带验证): < ...
easyui表单提交，后台获取不到值
J2ee开发,使用easyui表单提交,在ie中可以正常将参数传递到后台,但使用firefox,chrome都无法将easyui的combobox值传递到后台,使用alert($('#form').s ...
jQuery 表单提交衣服尺寸选择勾选获取value值-20130720
1.效果及功能说明表单提交制作各大商城衣服尺寸选择勾选效果,点击购物车提交勾选尺寸value值.一款简单实用的衣服尺寸选择勾选效果 2.实现原理通过查询当前的图片的id然后通过对应id找到在通过遍 ...
表单提交与后台PHP如何接口？
在网页中,常常有这样那样的表单需要提交,比如登陆,比如注册,比如查询,比如填写问卷.在这样的表单提交过程中,我们究竟向后台提交了什么,是以什么形式提交的,是一个很值得探讨的问题. 提交了什么--就是我 ...
解决Form表单提交文件后台获取为null的情况
项目想做一个上传文件的功能模块,但是发现后台获取文件始终为null,而且在form表单上也配置好了需要的action属性.method属性和enctype="multipart/form-d ...
SSM项目 Jquery实现From表单提交 json后台并接受
2019-6-21 山西太原工作前台整理文章总结主要是前后台的交互代码,浪费了两个小时才弄好,注意前台往后台返回的时候使用的并非json格式传入后台 , 后台使用@ModelAttribut ...
form表单提交，后台实体类接收转义问题
问题:前台表单用ajax提交,data为validateForm.serializeArray(),后台用实体类接收参数,&符号被转义为&但是从request中直接取值是没问题的,请问 ...

jQuery表单提交和后台交互

jQuery表单提交和后台交互相关推荐

最新文章

热门文章