JS 动态绑定数据方法

function test() {
$.ajax({
type: "GET", //用GET方式传输
dataType: "json", //数据格式
url: "Handler.ashx", //目标地址
data: "Rid=2&t=" + Math.random() + "",
complete: function () {

}, //接收数据完毕
success: function (data) {
//CreateSelect(data, "select", "Rid", "Rname");
CreateTable(data);
}
});

/*绑定下拉框*/

function CreateSelect(data, id, Rid, Rname) {
var sel=document.getElementById(id);
for(i=sel.length;i>=0;i--){

//清空数据
sel.remove(i);
}
var newOption = document.createElement("OPTION");
newOption.text = "===请选择===";
newOption.value = "0";
sel.options.add(newOption);
//if (data.text[0].NO == null) {

//绑定数据
$.each(data.text, function (i, n) {
var newOption = document.createElement("OPTION");
newOption.text = n[Rname];
newOption.value = n[Rid];
sel.options.add(newOption);
});
// }
}
function CreateTable(data) {
$("#table").empty();//清空table包含的所有数据
//动态绑定Table数据

$.each(data.text, function (i, n) {
var html = "<tr><td>" + n.Rid + "</td><td>" + n.Rname + "</td></tr>";//将数据添加到Table中;
$("#table").append(html);
});
//alert(document.getElementById("table").rows[0].cells[0].innerHTML);//获取某一行莫一列的内容

/*
//获取鼠标所点击的行
$("#table tr").click(alertRow);
function alertRow() {
var index = $(this).prevAll().length;
alert(index);
}*/
}
}

 

对应的.ashx文件

<%@ WebHandler Language="C#" Class="Handler" %>

using System;

using System.Web;
using DBHelpClass;
using System.Text;
using System.Data;
public class Handler : IHttpHandler {
public void ProcessRequest (HttpContext context) {

if (context.Request.RequestType == "GET")
{
if (context.Request.QueryString["Rid"] == null || context.Request.QueryString["Rid"] == "")
{
context.Response.Clear();
context.Response.ContentType = "test/plain";
context.Response.Write("Error");
}
else
{

DBHelp db = new DBHelp();
//string str = "select * from User";
string str = "select * from Role ";
DataTable dt = db.GetDataTable(str);
context.Response.Clear();
context.Response.ContentType = "text/plain";
context.Response.Write(ReturnJsonData(dt));
}
}
}
private static string ReturnJsonData(DataTable dt)
{

string Text = "{\"text\":[";
if (dt.Rows.Count <= 0)//判断DataTable 中的 count是否小于0
// if (1 != 1)
{
StringBuilder sb = new StringBuilder();
sb.Append("{");

sb.Append("\"NO\":");
sb.Append("\"");
sb.Append("0");
sb.Append("\"");
sb.Append("}");
Text += string.Format("{0}]", sb.ToString());
Text += "}";
return Text;
//return string.Empty;
}
else
{
//for (int i = 0; i < 100; i++)
for (int i = 0; i < dt.Rows.Count; i++)
{
StringBuilder sb = new StringBuilder();
sb.Append("{");

sb.Append("\"Rid\":");
sb.Append("\"");
sb.Append(dt.Rows[i]["Rid"].ToString());
sb.Append("\",");

sb.Append("\"Rname\":");
sb.Append("\"");
sb.Append(dt.Rows[i]["Rname"].ToString());
sb.Append("\"");

sb.Append("}");

//Text += i != dt.Rows.Count - 1
// ? string.Format("{0},", sb.ToString())
// : string.Format("{0}]", sb.ToString());
Text += i != dt.Rows.Count-1? string.Format("{0},", sb.ToString()) : string.Format("{0}]", sb.ToString());

}
Text += "}";
return Text.Replace("\\", "/").ToString();
}
}


public bool IsReusable {
get {
return false;
}
}

}

 .ashx文件的另外的一种写法

public void ProcessRequest(HttpContext context)

{

//初始化JSON数据，当errorno不为0时，返回的数据为null或是错误数据
string rtn = "{\"errorno\":1,\"id\":\"\"}";
int uid = Convert.ToInt32( context.Request.QueryString["uid"]);
string title = context.Request.QueryString["title"];
string message = context.Request.QueryString["message"];
context.Response.Clear();
context.Response.ContentType = "text/plain";
//if (string.IsNullOrEmpty(uid))
//{
// context.Response.Write("Error");
// rtn = "{\"errorno\":2,\"id\":\"\"}";
//}

model.title = title;
model.message = message;
model.addtime = DateTime.Now;
model.uid = uid;
model.UpdateAttributes();

if ( MessageProcess.Insert(model));
{

//直接所需要的JSOn数据
rtn = "{\"errorno\":0,\"id\":\"" + model.id + "\"}";
// rtn ="{'errno':0,'errmsg':'','data':{'uid':'xxx'}}";
}
context.Response.Write(rtn);

}