[c#]asp.net+jQuery+json做Ajax

Ajax常用在網頁單獨某一區塊的內容更新，不需要整頁網頁重新整理就可以得到區塊內容的更新，而常用與Web-Server做資料交換的格式有純文字、Parameter(key=value)、XML或是json等，而json為最常使用的格式之一，它不像XML格式，需要開始Tag與結束Tag，只需要利用Key,Value的方式來進行資料的設定，比XML更為簡單、內容大小更為精簡，詳細內容及方法可以參考http://www.json.org/。

asp.net(使用c sharp)使用jQuery實作Ajax與伺服器溝通。

建立Web服務器asmx

利用Web服務器的函數(方法)來處理Ajax的需求及回應

要使用Ajax呼叫Web服務，需要把System.WebScript.Services.SrciptService這行的mark拿掉才可以。

Web服務

再來建立相對應的函數(方法)，Ajax呼叫的網頁會是getData.asmx/函數(方法)

如需要共用Session內容，則需在WebMethod加上enableSession:true才可

WebMethod Session:true

另一個範例，使用request來取得Ajax傳來的POST及GET二種方法的資料，而使用Response來回傳處理過後json格式資料。

回傳json格式需設定檔頭header的contentType為application/jsp，否則會被設定為xml格式
取得post資料使用the.Context.Request.Form[key名稱]
取得Get資料則使用the.Context.Response.QueryString[key名稱]
利用Dictionary來設定及存放要回應的資料
使用JavaScriptSerializer來序列化dictionary內容，會自動產生json格式，不使用return而需使用Response.Write內容才可。

request及reponse

原始碼：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Script.Serialization;
namespace JQueryJson
{
    /// <summary>
    /// getData 的摘要描述
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // 若要允許使用 ASP.NET AJAX 從指令碼呼叫此 Web 服務，請取消註解下一行。
    [System.Web.Script.Services.ScriptService]
    public class getData : System.Web.Services.WebService
    {


        [WebMethod(enableSession: true)]
        public void HelloWorld()
        {
            //設定輸出格式為json格式
            this.Context.Response.ContentType = "application/json";

            //post
            String data = this.Context.Request.Form["ret"];
            //get
            String data1 = this.Context.Request.QueryString["val"];

            Dictionary<String, Object> dic = new Dictionary<string, object>();
            dic["data"] = "Post取得的值為:"+data;
            dic["data1"] = "Get取得的值為:"+data1;

            //新版的可以用
            //System.Runtime.Serialization.Json.DataContractJsonSerializer

            JavaScriptSerializer serializer = new JavaScriptSerializer();
       
            //輸出json格式
            this.Context.Response.Write(serializer.Serialize(dic));


        }



        //以下Session的使用
        [WebMethod(enableSession: true)]
        public string removeSession()
        {

            Session.Remove("test");
            return "移除Session : 測試Session裡的值為: " +Session["test"];
        }
        [WebMethod(enableSession: true)]
        public string showSession()
        {
            String data = (String)Session["test"];
            if (data == null)
                data = "Session內無值";
            return "Session['test']值為:"+data;
        }
        [WebMethod(enableSession:true)]
        public string setSession()
        {
            
            Session["test"] = "helloworld";
            return "設定Session成功!";
        }
    }
}

asp.net網頁內容

建立四個按鈕及一個顯示資料的區塊

範例按鈕

撰寫jQuery Ajax動作

Session相關的範例因為回傳的資料型態預設為xml，所以需要利用jQuery來解析XML，而url的參數則設定成getData.asmx/方法(函數)

jQuery處理XML

另一範例則是傳送了get及post內容給Web服務，取出後再組合成json格式回傳到網頁端，因為回傳格式為json，所以可以直接使用response.keyName來取得Value

jQuery處理json

程式碼：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="JQueryJson._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 runat="server">
    <title>測試</title>
    <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //設定Session
            $("#bt1").click(function () {
                $.ajax({
                    type: "post",
                    url: "getData.asmx/setSession",
                    success: function (response) {                      
                        $("#data").html($(response).find("string").text());
                    }
                });
            }
            );
            //顯示Session內容
            $("#bt2").click(function () {
                $.ajax({
                    type: "post",
                    url: "getData.asmx/showSession",
                    success: function (response) {                       
                        $("#data").html($(response).find("string").text());
                    }
                });
            }
            );
            //移除Session內容
            $("#bt3").click(function () {
                $.ajax({
                    type: "post",
                    url: "getData.asmx/removeSession",
                    success: function (response) {                        
                        $("#data").html($(response).find("string").text());
                    }
                });
            }
            );


            //傳送值及接數json回傳
            $("#bt4").click(function () {
                $.ajax({
                    type: "post",
                    url: "getData.asmx/HelloWorld?val=哈囉",
                    data:"ret=資料內容",
                    success: function (response) {

                        $("#data").html(response.data + "<br/>"+response.data1 );
                        
                    }
                });
            }
            );
        });
    </script>
</head>
<body>
    <input type="button" id="bt1"  value="設定Session" />
    <input type="button" id="bt2"  value="顯示Session結果" />
    <input type="button" id="bt3"  value="移除Session" />
    <input type="button" id="bt4"  value="傳送值及回傳json" />

    <div id="data">
    123
    </div>
    
</body>
</html>