JQuery表单提交与后台交互
来源:互联网 发布:绿色童年软件下载 编辑:程序博客网 时间:2024/06/14 06:41
方式一
index01.html
<!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>
Hander01.ashx
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";
// 方式1
string 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;
}
}
}
}
方式二
index02.html
<!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>
hander02.ashx
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;
}
}
}
}
0 0
- JQuery表单提交与后台交互
- jQuery $.post提交与C#后台交互
- jQuery 与后台交互
- form表单提交后与浏览器交互
- golang表单提交与服务器的交互
- 表单提交与后台PHP如何接口?
- Yii2.0表单提交与后台接收
- jsp提交表单与后台java处理表单
- JQuery以及highchart与后台数据交互
- JQuery以及highchart与后台数据交互
- jquery与asp.net后台交互
- 用jQuery实现ajax与后台交互
- Ajax使用jQuery与后台交互
- Ajax使用jQuery与后台交互
- Ajax使用jQuery与后台交互
- JQuery实战:实现表单验证满足条件后提交后台
- DOM 与Jquery模拟表单提交
- 前端表单验证与后台交互的知识点总结
- 【蓝桥杯题】 之 算法训练-字串统计
- 背景色及背景图片的覆盖范围
- 树莓派3 使用串口查看log
- 第一篇,写给我的2017
- 第六天 Android学习总结(Activity)
- JQuery表单提交与后台交互
- android+mvp+retrofit+rxjava+okhttp的demo支持加载对话框消失取消请求
- ExtJS学习笔记(九) Layout
- 众人所知,去广告神器:天行广告防火墙!
- Struts2中关于"There is no Action mapped for namespace / and action name"的总结
- kafka一之配置文件说明
- matlab 字符串处理函数
- [00312]基本的日期与时间转换
- js checkbox选取