案例讲解asp.net中jquery post的用法

一、post案例：

1.前台default.aspx：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>$.post发送请求</title>
<script type="text/javascript"
src="Jscript/jquery-1.4.2-vsdoc.js">
</script>
<script type="text/javascript"
src="Jscript/jquery-1.4.2.js">
</script>
<style type="text/css">
body{font-size:13px}
.divFrame{width:260px;border:solid 1px #666}
.divFrame .divTitle{padding:5px;background-color:#eee;height:23px}
.divFrame .divTitle span{float:left;padding:2px}
.divFrame .divContent{padding:8px}
.divFrame .divContent .clsShow{font-size:14px}
select,input{float:left}
.txt{border:#666 1px solid;padding:2px;width:80px;margin-right:3px}
.btn {border:#666 1px solid;padding:2px;width:50px;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
</style>

    <script type="text/javascript">
$(function() {
$("#Button1").click(function() { //按钮单击事件
//打开文件，并通过回调函数返回服务器响应后的数据
$.post("Handler.ashx",
{ name: encodeURI($("#txtName").val()),
sex: encodeURI($("#selSex").val())
},
function(data) {
$("#divTip")
.empty() //先清空标记中的内容
.html(data); //显示服务器返回的数据
})
})
})
</script>

</head>
<body>
<div class="divFrame">
<div class="divTitle">
<span>姓名：</span>
<input id="txtName" type="text" class="txt" />
<select id="selSex" style="height:22px;margin-right:3px">
<option value="">选性别</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
<input id="Button1" type="button"
class="btn" value="请求" />
</div>
<div class="divContent">
<div id="divTip"></div>
</div>
</div>
</body>
</html>

2.后台handler.ashx

<%@ WebHandler Language="C#" Class="Handler" %>
using System;
using System.Web;
public class Handler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
//context.Response.ContentType = "text/plain";
//context.Response.Write("Hello World");

        string strName = System.Web.HttpUtility.UrlDecode(context.Request["name"]);//解码姓名字符
string strSex = System.Web.HttpUtility.UrlDecode(context.Request["sex"]);//解码性别字符

        string strHTML = "<div class='clsShow'>"; //初始化保存内容变量
if (strName == "<span style="font-family: Arial, Helvetica, sans-serif;">陶国荣</span>" && strSex == "<span style="font-family: Arial, Helvetica, sans-serif;">男</span>")
{
strHTML += "姓名：陶国荣<br>";
strHTML += "性别：男<br>";
strHTML += "邮箱：tao_guo_rong@163.com<hr>";
}
else if (strName == "<span style="font-family: Arial, Helvetica, sans-serif;">李建洲</span>" && strSex == "<span style="font-family: Arial, Helvetica, sans-serif;">女</span>")
{
strHTML += "姓名：李建洲<br>";
strHTML += "性别：女<br>";
strHTML += "邮箱：xiaoli@163.com<hr>";
}
strHTML += "</div>";
context.Response.Write(strHTML);
//context.Response.Write("return");//如直接返回字符，前台function中的data则为纯字符串“return”
}
public bool IsReusable {
get {
return false;
}
}
}

3.说明：
1）.传递的参数中的

形式，也可以加对双方加单引号，ashx文件都可以得到参数值

因此，name和对应的参数值encodeURI($("#txtName").val()),在函数中即可以表示为{name:encodeURI($("#txtName").val()),}

2）.encodeURI($("#txtName").val())是对遇到汉字的处理形式，相应的后台需要使用System.Web.HttpUtility.UrlDecode(Request["name"])来进行汉字解码

3）.后台尽量使用ashx文件响应，会使得的页面相应速度加快

4）.如直接使用context.Response.Write("return")，前台function中的data将得到纯字符串“return”（不含html）

5）.如果没有参数，post的第二个｛param1:...,param2:...,....｝等就可以不用添加

6）.post的第三个参数可以直接写函数名，函数名不用加引号

7）.其它的一些注意事项，见我的另一篇博客http://blog.csdn.net/goodshot/article/details/42638629

  <script>
$(function () {
$(".subBtn").click(function () {
$.post("HandlerGetTime.ashx",  getTime
)
});
})
function getTime (data) {
$(".time").text(data);
}
</script><p> </p><p>5.结果如图：</p><p><img alt="" src="https://img-blog.csdn.net/20150110112649685?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvR29vZFNob3Q=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" /><br /></p><p>另外附加使用服务器控件的案例：</p><p>1.前台</p><p></p><pre class="html" name="code" snippet_file_name="blog_20150110_4_8185861" code_snippet_id="576479"><%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>$.post发送请求</title>
<script type="text/javascript"
src="Jscript/jquery-1.4.2-vsdoc.js">
</script>
<script type="text/javascript"
src="Jscript/jquery-1.4.2.js">
</script>
<style type="text/css">
body{font-size:13px}
.divFrame{width:260px;border:solid 1px #666}
.divFrame .divTitle{padding:5px;background-color:#eee;height:23px}
.divFrame .divTitle span{float:left;padding:2px}
.divFrame .divContent{padding:8px}
.divFrame .divContent .clsShow{font-size:14px}
select,input{float:left}
.txt{border:#666 1px solid;padding:2px;width:80px;margin-right:3px}
.btn {border:#666 1px solid;padding:2px;width:50px;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
</style>
<script type="text/javascript">
$(function () {
$("#Button1").click(function () { //按钮单击事件
//打开文件，并通过回调函数返回服务器响应后的数据
$.post("Handler.ashx",
{

                    name: $("input[id*=txtName]").val(),

                    sex: $("#selSex").val()
},
function (data) {
$("#divTip")
.empty() //先清空标记中的内容
.html(data); //显示服务器返回的数据
})
})
})
</script>
</head>
<body>
<form runat=server>
<div class="divFrame">
<div class="divTitle">
<span>姓名：</span>


<asp:TextBox ID="txtName" runat="server"  class="txt" ></asp:TextBox>

             <select id="selSex" style="height:22px;margin-right:3px">
<option value="">选性别</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
<input id="Button1" type="button"
class="btn" value="请求" />
</div>
<div class="divContent">
<div id="divTip"></div>
</div>
</div>
</form>
</body>
</html>

后台与前面案例相同：

<%@ WebHandler Language="C#" Class="Handler" %>
using System;
using System.Web;
public class Handler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
//context.Response.ContentType = "text/plain";
//context.Response.Write("Hello World");
string strName = System.Web.HttpUtility.UrlDecode(context.Request["name"]);//解码姓名字符
string strSex = System.Web.HttpUtility.UrlDecode(context.Request["sex"]);//解码性别字符
string strHTML = "<div class='clsShow'>"; //初始化保存内容变量
if (strName == "陶国荣" && strSex == "男")
{
strHTML += "姓名：陶国荣<br>";
strHTML += "性别：男<br>";
strHTML += "邮箱：tao_guo_rong@163.com<hr>";
}
else if (strName == "李建洲" && strSex == "女")
{
strHTML += "姓名：李建洲<br>";
strHTML += "性别：女<br>";
strHTML += "邮箱：xiaoli@163.com<hr>";
}
strHTML += "</div>";
context.Response.Write(strHTML);
//context.Response.Write("return");
}
public bool IsReusable {
get {
return false;
}
}
}

结果显示：

csdn的编辑器好像有点问题哦，着重号都变成了标签来表示，改了好几次，只好将着重部分单独分隔成一段了，希望大家见谅

案例讲解asp.net中jquery post的用法相关推荐

ASP.NET中application对象的用法（面试题）
ASP.NET中application对象的用法本文导读:Application对象是HttpApplicationState类的一个实例,Application状态是整个应用程序全局的.Appli ...
谨慎Asp.net中static变量的用法
谨慎Asp.net中static变量的用法 .Net技术 2007-01-30 22:17:37 阅读925 评论11 字号:大中小谨慎Asp.net中static变量的用法在.Net平台下进行C ...
asp.net中jQuery $post用法
函数原型:$.post(url, params, callback) url是提交的地址,eg: "sample.ashx" params是参数,eg: { name:" ...
python编程中条件句_简单讲解Python编程中namedtuple类的用法
Python的Collections模块提供了不少好用的数据容器类型,其中一个精品当属namedtuple. namedtuple能够用来创建类似于元祖的数据类型,除了能够用索引来访问数据,能够迭代, ...
Asp.Net中索引器的介绍
一.索引器特性 1.get 访问器返回值.set 访问器分配值. 2.this 关键字用于定义索引器. 3.value 关键字用于定义由 set 索引器分配的值. 4.索引器不必根据整数值进行索引,由 ...
sql server数据库中raiserror函数的用法1
server数据库中raiserror的作用就和asp.net中的throw new Exception一样,用于抛出一个异常或错误.这个错误可以被程序捕捉到. raiserror的常用格式如下: r ...
aspx repeater 用法_ASP.NET中repeater控件用法实例
本文实例讲述了ASP.NET中repeater控件用法.分享给大家供大家参考.具体实现方法如下: repeater绑定数据: protected void Page_Load(object sende ...
mysql raiserror_sql server数据库中raiserror函数的用法
server数据库中raiserror的作用就和asp.NET中的throw new Exception一样,用于抛出一个异常或错误.这个错误可以被程序捕捉到. raiserror的常用格式如下: r ...
使用Jquery+EasyUI 进行框架项目开发案例讲解之三---角色管理源码分享
使用Jquery+EasyUI 进行框架项目开发案例讲解之三角色管理源码分享在上两篇文章 <使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享> & ...

案例讲解asp.net中jquery post的用法

案例讲解asp.net中jquery post的用法相关推荐

最新文章

热门文章