将后台的表格数据转为json传到前台

　　最近因为在学习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。

 

posted @ 2013-03-05 17:33  拓荒er  阅读(1254)  评论(0)  编辑  收藏  举报