【Asp.net】使用Ajax和Jquery在前台向後台傳參數並傳回值的執行個體

一、前言

      以前在做項目的時候遇到asp.net前後台通過AJAX傳遞資料，當時做完了，自己一直沒有總結，雖說上手快，但是還是要總結一下，以供以後的學習，思考。 二、要點分析

      asp.net的前台可以通過按F7進入後台，但是要想通過AJAX在後台捕獲AJAX傳過來的參數的時候就要添加[WebMethod] ，才可以。不過可以在asp.net捕獲AJAX使用很多的是用“一般處理常式”來完成。具體操作看下文。 三、使用方式情節

      在這裡小編給出兩種方案來實現資料的傳遞： 方案一 直接調用後台

      前台：

    <%--引入JQuery--%>    <script src="js/jquery-2.1.1.min.js"></script>    <%--向後台利用AJAX傳遞參數，調用後台參數--%>    <script type="text/javascript">        $(function () {            <%--當txtUserName失去焦點的時候觸發--%>            $('#txtUserName').blur(function () {                var username = $(this).val();                $.ajax({                    type: "post",                    contentType: "application/json",//傳值的方式                    url: "index.aspx/GetValueAjax",//WebAjaxForMe.aspx為目標檔案，GetValueAjax為目標檔案中的方法                    data: "{username:'" + username + "'}",//username 為想問後台傳的參數（這裡的參數可有可無）                    success: function (result) {                        alert(result.d);//result.d為後台返回的參數                    }                })            })        })    </script> <input id="txtUserName" type="text" />

      後台：一定要添加[WebMethod]

        [WebMethod]//方法前邊必須添加 [WebMethod]              public static string GetValueAjax(string username)//這個方法需要是靜態方法要用到關鍵字static               {            //在這裡可以對傳進來的參數進行任何操作                       return username;        }

方案二 一般處理常式

      建立一般處理常式ajaxtest.ashx後，完成如下操作：

      前台：

     <%--引入JQuery--%>     <script src="js/jquery-2.1.1.min.js"></script>     <%--使用AJAX向一般處理常式傳遞參數，調用函數--%>     <script type="text/javascript">         $(function () {              <%--當txtYiBan失去焦點的時候觸發--%>             $('#txtYiBan').blur(function () {                 var username = $(this).val();                 $.ajax({                     type: "GET",                     url: "ajaxtest.ashx?json=" + username,//ajaxtest.ashx為目標檔案                     dataType: "text",                     success: function (result) {                         alert(result.d);//result.d為後台返回的參數                     }                 })             })         })    </script><input id="txtYiBan" type="text" />

      ajaxtest.ashx 一般處理常式：

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Services;using System.Web.SessionState;namespace aspAjaxTest{    /// <summary>    /// ajaxtest 的摘要說明    /// </summary>    [WebService(Namespace = "http://tempuri.org/")]    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]    public class ajaxtest : IHttpHandler    {        HttpContext Context;        /// <summary>        /// 擷取傳的值,並調用其他的方法        /// </summary>        /// <param name="context"></param>        public void ProcessRequest(HttpContext context)        {            Context = context;            context.Response.Clear();            context.Response.ContentType = "text/html; charset=utf-8";            //擷取傳來的值            string methodName = GetQueryString("json");            //可以調用其他方法------看下文        }        /// <summary>        /// 擷取傳的值        /// </summary>        /// <param name="name"></param>        /// <returns></returns>        string GetQueryString(string name)        {            //擷取傳的值            return Context.Request.Params[name];        }        public bool IsReusable        {            get            {                return false;            }        }    }}

      可以調用的方法：

private string GetJsonStr(string methodName, string session, string strname, string Userid, string strWhere)        {            string jsonString = "";            switch (methodName)            {                case "GetWorksContent":    //調用分頁的效果                    jsonString = new JCZB.YMGJ.Web.Web.WebManager.home.AddHistory().GetRMContent(session);                    //jsonString = "1";                    break;                case "GetWorkssetContent":   //調用分頁的效果                    jsonString = new JCZB.YMGJ.Web.Web.WebManager.home.worksset().GetRMContent(session,strname,Userid);                    break;                case "GetWorkContent":   //調用分頁的效果                    jsonString = new JCZB.YMGJ.Web.Web.WebManager.home.works().GetRMContent(session, strWhere);                    break;                case "GetWorkssetByTimeContent":   //調用分頁的效果                    jsonString = new JCZB.YMGJ.Web.Web.WebManager.home.workssetByTime().GetRMContent(session, strname, Userid);                    break;                case "GetWorkssetByPositionContent":   //調用分頁的效果                    jsonString = new JCZB.YMGJ.Web.Web.WebManager.home.workssetByPosition().GetRMContent(session, strname, Userid);                    break;                case "GetWorkssetByArtistidContent":   //調用分頁的效果                    jsonString = new JCZB.YMGJ.Web.Web.WebManager.home.workssetByArtistid().GetRMContent(session, strname, Userid);                    break;            }            return jsonString;        }

四、學到什麼 在aspx的後台可以用如下的方式來捕獲參數：

workstateValue = Request.QueryString["workstateValue"];

在一般處理常式中可以用：

return Context.Request.Params[name];

四、小結

      這些都是比較常用的，無論是任何語言，一定要以虔誠的心態去學習，這樣才能提高自己的熟練度，不至於忘記了怎麼做。加油。學習要心細。