最近因为在学习json，所以想用json改了一些程序，如果要获得数据，难免要将后台的表格转化到前台，并绑定到相应的相应的标签上，所以写了点儿东西来练习一下。
程序目的：将后台所获得的数据表格转换成json语句，并返回到前台，在前台将相应的数据绑定到一个div里面
webForm前台名称：Photo.aspx
webForm后台方法：BindPhoto
前台的javascript代码：
<script src="Js/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript" language="javascript"> $.ajax({ type: "POST", //提交方式 contentType: "application/json; charset=utf-8", //内容类型 dataType: "json", //类型 data:null, //所传入的参数，如果没有，可以为空 url: "Photo.aspx/BindPhoto", //提交的页面，方法名 success: function (data) { var result = eval("(" + data.d + ")"); var bind_str = "" for (var i = 0; i < result.length; i++) { bind_str += "<div class='Photo_single'>"; bind_str += "<div class='Photo_title'><input type='checkbox' class='titleCheck'/><label>" + result[i].name + "</label></div>"; bind_str += "<div class='Photo_Img'><img src='My Photo/" + result[i].image_URL + "'></img></div>"; bind_str += "<div class='Photo_operate'><a href='#'>删除</a>|<a href='#'>编辑</a></div>"; bind_str += "</div>"; } $("#PhotoList").html(bind_str); }, error: function (err) { alert("err:" + err); } }); </script>
前台的body内的代码：
<body> <div id="PhotoList"></div> </body>
后台代码
1 using System; 2 using System.Data; 3 using System.Text; 4 using System.Web.Services; 5 namespace Cms.Web 6 { 7 public partial class WebForm1 : System.Web.UI.Page 8 { 9 static int AdminNo =3; 10 protected void Page_Load(object sender, EventArgs e) 11 { 12 13 14 } 15 [WebMethod] 16 public static string BindPhoto(){ 17 Cms.BLL.Photo Photos = new Cms.BLL.Photo(); 18 DataTable dt = Photos.GetPhotos(AdminNo,0,1); 19 //上面代码主要是我用来获取table列表，可以不看 20 StringBuilder json_stb = new StringBuilder(); 21 json_stb.Append("["); 22 foreach (DataRow dr in dt.Rows) { 23 json_stb.Append("{"); 24 json_stb.AppendFormat("'id':'{0}','name':'{1}','image_URL':'{2}'",dr[0],dr[3],dr[4]); 25 json_stb.Append("},"); 26 } 27 json_stb.Append("]"); 28 return json_stb.ToString(); 29 } 30 } 31 }
注意事项：
前台的javascript的代码中var result = eval("(" + data.d + ")");是很重要的，因为我们获得的data.d只是json语句，必须将其转化为javascript对象，从而才能用下文中的result.length。