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

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

一、post案例：

1.前台default.aspx：

 

<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>

    <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>

姓名： 選性別男女  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);

<%@ webhandler="" language="C#" class="Handler">

        string strName = System.Web.HttpUtility.UrlDecode(context.Request[name]);//解碼姓名字元        string strSex = System.Web.HttpUtility.UrlDecode(context.Request[sex]);//解碼性別字元

        string strHTML = 

; //初始化儲存內容變數 if (strName == 陶國榮 && strSex == 男) { strHTML += 姓名：陶國榮
; strHTML += 性別：男
; strHTML += 郵箱：tao_guo_rong@163.com; } else if (strName == 李建洲 && strSex == 女) { strHTML += 姓名：李建洲
; strHTML += 性別：女
; strHTML += 郵箱：xiaoli@163.com; } strHTML +=; context.Response.Write(strHTML); //context.Response.Write(return);//如直接返回字元，前台function中的data則為純字串“return” } public bool IsReusable { get { return false; } } }
3.說明：
1.傳遞的參數中的

name和對應的參數值encodeURI($(#txtName).val()),在函數中即可以表示為{name:encodeURI($(#txtName).val()),}

形式，也可以加對雙方加單引號，ashx檔案都可以得到參數值

2.encodeURI($(#txtName).val())是對遇到漢字的處理形式，相應的後台需要使用System.Web.HttpUtility.UrlDecode(Request[name])來進行漢字解碼

3.後台盡量使用ashx檔案響應，會使得的頁面相應速度加快

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

 

4.結果

另外附加使用伺服器控制項的案例：

1.前台

 

<%@ page="" language="C#" autoeventwireup="true" codefile="Default.aspx.cs" inherits="_Default">   

    <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>       <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><%@ page="" language="C#" autoeventwireup="true" codefile="Default.aspx.cs" inherits="_Default">
                        
                              選性別                 男                 女                                              
                          
後台與前面案例相同：
 
 
<%@ 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 = 
; //初始化儲存內容變數 if (strName == 陶國榮 && strSex == 男) { strHTML += 姓名：陶國榮
; strHTML += 性別：男
; strHTML += 郵箱：tao_guo_rong@163.com; } else if (strName == 李建洲 && strSex == 女) { strHTML += 姓名：李建洲
; strHTML += 性別：女
; strHTML += 郵箱：xiaoli@163.com; } strHTML +=; context.Response.Write(strHTML); //context.Response.Write(return); } public bool IsReusable { get { return false; } } }
結果顯示：