后台的Datatbele转化为JSON字符串后,怎么传给JS
后台的Datatbele转化为JSON字符串后,怎么传给JS
最近有个项目是读取数据库里的经纬度然后标注在百度API里,但是有几百行数据。。也不可能去一个一个去标注。。就想用Datatable全部取出来转化JSON字符串,然后传给JS遍历JSON对象给标注赋经纬度。。
但是JS总是取不到这个JSON字符串的值。。运动会加油稿
这是后台转化的方法
C# code?public static string DataTable2Json() { DataTable dt = new DataTable(); dt.Columns.Add("name", typeof(string)); dt.Columns.Add("zuobiao1", typeof(float)); dt.Columns.Add("zuobiao2", typeof(float)); DataRow dr1 = dt.NewRow(); dr1[0] = "站点1"; dr1[1] = 16.12223; dr1[2] = 29.212223; DataRow dr2 = dt.NewRow(); dr2[0] = "站点2"; dr2[1] = 12.12223; dr2[2] = 29.312223; DataRow dr3 = dt.NewRow(); dr3[0] = "站点3"; dr3[1] = 12.12223; dr3[2] = 29.1223; dt.Rows.Add(dr1); dt.Rows.Add(dr2); dt.Rows.Add(dr3); StringBuilder JsonString = new StringBuilder(); //Exception Handling if (dt != null && dt.Rows.Count > 0) { JsonString.Append("[ "); for (int i = 0; i < dt.Rows.Count; i++) { JsonString.Append("{ "); for (int j = 0; j < dt.Columns.Count; j++) { if (j < dt.Columns.Count - 1) { JsonString.Append("\"" + dt.Columns[j].ColumnName.ToString() + "\":" + "\"" + dt.Rows[i][j].ToString() + "\","); } else if (j == dt.Columns.Count - 1) { JsonString.Append("\"" + dt.Columns[j].ColumnName.ToString() + "\":" + "\"" + dt.Rows[i][j].ToString() + "\""); } } if (i == dt.Rows.Count - 1) { JsonString.Append("} "); } else { JsonString.Append("}, "); } } JsonString.Append("]"); return JsonString.ToString(); } else { return null; } }
前台JS里得到后台方法的JSON字符串,可以总是得不到。。完全不知道哪里出错。。。
JavaScript code?<script type="text/javascript"> var ss = "<%=DataTable2Json()%>"; document.getElementById("jname").innerHTML = ss; </script>
var ss = "<%=DataTable2Json()%>";
改成
var ss = <%=DataTable2Json()%>;
或者jquery ajax获取,如果页面不刷新,要动态变化,则ajax获取是比较好的方法
jQuery Ajax 调用后台方法返回 DataSet 或者 DataTable 的例子
直接拷贝源代码粘贴成aspx文件即可运行看效果。
C# code?<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> /// <summary> /// param1 param2 对应前面js传递来的参数。 /// </summary> /// <param name="param1"></param> /// <param name="param2"></param> /// <returns></returns> [System.Web.Services.WebMethod] public static string GetDataTable(String param1, String param2) { return DataTable2Json(CreateDataTable(param1, param2)); } public static System.Data.DataTable CreateDataTable(String param1, String param2) { System.Data.DataTable dataTable1 = new System.Data.DataTable("BlogUser"); System.Data.DataRow dr; dataTable1.Columns.Add(new System.Data.DataColumn("UserId", typeof(System.Int32))); dataTable1.Columns.Add(new System.Data.DataColumn("UserName", typeof(System.String))); dataTable1.PrimaryKey = new System.Data.DataColumn[] { dataTable1.Columns["UserId"] }; for (int i = 0; i < 8; i++) { dr = dataTable1.NewRow(); dr[0] = i; dr[1] = "【孟子E章】" + i.ToString() + " 前端传递的参数的值分别是:" + param1 + ", " + param2; dataTable1.Rows.Add(dr); } return dataTable1; } public static string DataTable2Json(System.Data.DataTable dt) { StringBuilder jsonBuilder = new StringBuilder(); jsonBuilder.Append("{\""); jsonBuilder.Append(dt.TableName.ToString()); jsonBuilder.Append("\":["); for (int i = 0; i < dt.Rows.Count; i++) { jsonBuilder.Append("{"); for (int j = 0; j < dt.Columns.Count; j++) { jsonBuilder.Append("\""); jsonBuilder.Append(dt.Columns[j].ColumnName); jsonBuilder.Append("\":\""); jsonBuilder.Append(dt.Rows[i][j].ToString()); jsonBuilder.Append("\","); } jsonBuilder.Remove(jsonBuilder.Length - 1, 1); jsonBuilder.Append("},"); } jsonBuilder.Remove(jsonBuilder.Length - 1, 1); jsonBuilder.Append("]"); jsonBuilder.Append("}"); return jsonBuilder.ToString(); } </script> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>jQuery Ajax 调用后台方法返回 DataSet 或者 DataTable 的例子</title> <script type="text/javascript" src="jquery-1.6.2.min.js"></script> </head> <body> <form id="form1" runat="server"> <div id="result"></div> </form> <script type="text/javascript"> $(document).ready(function () { $.ajax({ type: "POST", url: "<%=Request.Url.ToString() %>/GetDataTable", /* 注意后面的名字对应CS的方法名称 */ data: "{\"param1\":\"8888\",\"param2\":\"参数2\"}", /* 注意参数的格式和名称 */ contentType: "application/json; charset=utf-8", dataType: "json", success: function (result) { data = jQuery.parseJSON(result.d); /*这里是否解析要看后台返回的数据格式,如果不返回表名则无需要 parseJSON */ t = "<table border='1'>"; $.each(data.BlogUser, function (i, item) { /* BlogUser是返回的表名 */ t += "<tr>"; t += "<td>" + item.UserId + "</td>"; t += "<td>" + item.UserName + "</td>"; t += "</tr>"; }) t += "</table>"; $("#result").html(t); } }); }); </script> </body> </html>