Jen

Json.net搭配jquery實作ajax前後端的資料交換

標題看似專業,

 

其實是個又臭又長的標題, (我實在不知道怎麼下標題好).

 

此篇主要是回應別人的問題,

 

專業人士勿擾- -…

 

(尤其是5k秘密軍團的伙伴,說實在話,你們真的是我覺得最強的, 5k萬歲!!!)

 

 

 

- 本片開始 -

------------------------------------------------

原始問題:

http://www.blueshop.com.tw/board/show.asp?subcde=BRD20090907214359671&fumcde=

 

 

 

示範

1.先下載Json.Net : http://json.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=29756

1

 

 

 

 

 

 

2.為了做示範,資料庫我也自已test開了一下

2

 

 

 

 

 

 

3.我先定義一個資料交換的類別(對應到剛剛開的資料表)

public class GMAPS
{
    public int ID;
    public string X;
    public string Y;
    public DateTime cTime;
    public string HTML;
    public string[] TYPE;
}
 
 
 
 
4.寫一隻簡單的hanlder, 我取名為Handler.ashx
using System;
using System.Web;
using System.Data;
using System.Data.SqlClient;
using Newtonsoft.Json;
using System.Collections.Generic;
using System.Collections;
public class Handler : IHttpHandler {
    public void ProcessRequest (HttpContext context) {
        SqlConnection sqlcon = new SqlConnection("Data Source=localhost;Initial 
               Catalog=TEST;Persist Security Info=True;User ID=xxx;Password=xxx");
        SqlDataAdapter da = new SqlDataAdapter("SELECT * FROM GMAP", sqlcon);
        DataTable dt = new DataTable();
        sqlcon.Open();
        int rows = da.Fill(dt);
        
        List<GMAPS> c = new List<GMAPS>();
        foreach (DataRow item in dt.Rows)
        {
            GMAPS g = new GMAPS();
            g.ID =  Convert.ToInt32(item["ID"]);
            g.X = Convert.ToString(item["X"]);
            g.Y = Convert.ToString(item["Y"]);
            g.HTML = Convert.ToString(item["HTML"]);
            g.cTime = Convert.ToDateTime(item["CTIME"]);
            g.TYPE = new string[]{"a","b","c"};
            c.Add(g);
        }
        string josnString = JsonConvert.SerializeObject(c);
        context.Response.ContentType = "text/plain";
        context.Response.Write(josnString);
    }
    public bool IsReusable {
        get {return false;     }
    }
}
 
重點在最後紅紅那三行.
 
 
 
 
 
 
5.這個handler吐出來就是一串JsonString.
3 

 

 

 

 

 

6.在前端jQuery的部分

   $.ajax({  
      type: "POST", //or GET  
      url: "Handler.ashx",  
      data: "XXX",  
      dataType:"json", //指定為json最方便
      success:function(e){  
         jQuery.each(e,function(i,returnObj){
           //returnObj就可以算是GMAPS類別的物件,
           //隨意你取值啊 !!!!!然後就你是google map加點的程式碼了
           returnObj.ID
           //經緯度
           returnObj.X
           returnObj.Y
           returnObj.cTime
           returnObj.HTML
         });
      }  
    }); 
 
 
接下來google map上加節點的話, 我想你也應該會了.
 
加油, 好嗎!?
 
(我都做成這樣了, QP不給我說不過去啦!!!!!!!)

0 意見: