怎么用JQueryAjax绑定数据到页面呢？

Question

在asp.netMVC开发中怎么使用JqueryAjax把SQLserver的数据绑定到页面呢？求给个实力，小弟在JqueryAjax这方面不是很熟练，求各位大侠给个简单的实例或说明下思路，小弟在此万分感谢，100分，全给你们了!JQueryAjaxSQL Server

Answer 1

http://www.cnblogs.com/celery94/archive/2011/01/17/1937494.html

Answer 2

我一般是用这个做的： 
jQuery EasyUI datagrid

Answer 3

原理就是Ajax提交请求——>一般处理程序（ashx）查询获取数据——>返回数据——>——>绑定数据到页面绑定就是jQuery操作HTML标签的问问题了

Answer 4

给你个局部刷新的。主分页面参考，Controller返回的是DataTableController:
        public ActionResult RepairWork()
        {
            return View();
        }        public PartialViewResult RepairWorkList()
        {
            string sn = "";
            if (!string.IsNullOrEmpty(Request[SN]))
            {
                sn = Request[SN].ToString().Trim().ToUpper().Replace('-', '+');
            }            DataTable dt = _repairWork.SelectRepairBySNandUser(sn, "R", Session[SESSION_LOGIN_ID].ToString());            return PartialView(dt);
        }主页面放一个按钮，一个空DIV：
                    <div id="AjaxMain" style="width: 100%; text-align: center">
                    </div>
点击按钮加载数据到DIV：
       function checkSubmit() {
            $("#AjaxMain").html("<br/><img src='../../Content/images/loading.gif' /><br/>数据加载中，请等待...")            var data = "ProjectID=" + $("#projectID").val() + "&FactoryID=" + $("#ddlFactory").val() + "&StartTime=" + $("#StartTime").val() + "&EndTime=" + $("#EndTime").val();            $.post("/RepairCNT/RepairCNTList/", data,
            function (data) {
                $("#AjaxMain").html(data);
            }, "text"
             );
        }局部视图：
@model System.Data.DataTable
<table id="listTable" width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="b5d6e6"
    onmouseover="changeto()" onmouseout="changeback()">
    <tr class="tbg">
        <td nowrap="nowrap" colspan="">
            姓名
        </td>
        <td nowrap="nowrap">
            工号
        </td>
        <td nowrap="nowrap">
            待维修(pcs)
        </td>
        <td nowrap="nowrap">
            维修成功(pcs)
        </td>
        <td nowrap="nowrap">
            维修升级(pcs)
        </td>
        <td nowrap="nowrap">
            等级品(pcs)
        </td>
        <td nowrap="nowrap">
            返外协(pcs)
        </td>
        <td nowrap="nowrap">
            维修报废(pcs)
        </td>
        <th nowrap="nowrap">
            合计(pcs)
        </th>
        <td nowrap="nowrap">
            维修完成待入库(pcs)
        </td>
    </tr>
    @if (Model.Rows.Count > 0)
    {
        foreach (System.Data.DataRow dr in Model.Rows)
        {  
        <tr class="lbg">
            <td class="tc">
                @dr["user_name"]
            </td>
            <td class="tc">
                @dr["user_id"]
            </td>
            <td align="right" style="padding-right: 5px" nowrap="nowrap">
                @dr["repairing_cnt"]
            </td>
            <td align="right" style="padding-right: 5px" nowrap="nowrap">
                @dr["repair_cnt"]
            </td>
            <td align="right" style="padding-right: 5px" nowrap="nowrap">
                @dr["repair_update_cnt"]
            </td>
            <td align="right" style="padding-right: 5px" nowrap="nowrap">
                @dr["GRADE_PRODUCT_CNT"]
            </td>
            <td align="right" style="padding-right: 5px" nowrap="nowrap">
                @dr["reback_factory_cnt"]
            </td>
            <td align="right" style="padding-right: 5px" nowrap="nowrap">
                @dr["apply_cnt"]
            </td>
            <td align="right" style="padding-right: 5px" nowrap="nowrap">
                @dr["wait_inbound_cnt"]
            </td>
        </tr> 
        }
    }
    else
    {
        <tr class="lbg">
            <td colspan="9" align="center" class="tc">
                暂无数据
            </td>
        </tr>
    }
</table>

Answer 5

其实只要你认证看看js基础，再稍微花点时间看看jquery的用法，理解了服务器客户端web
想怎么绑定数据，就怎么绑定数据
其实我只是建议楼主多学学基础，多学点没坏处是吧

Answer 6

 //WebService里面的方法
 [WebMethod(EnableSession = true)]
        public string GetAllDebt()
        {
            StringBuilder sb = new StringBuilder();
            List<Models.Debt> list = new List<Models.Debt>();
            list = new Controllers.DebtController().GetAllDebt(((Models.UserInfo)Session["UserInfo"]).UserId);
            if (list.Count <= 0)
            {
                sb.Append("没有您要查询的数据");
            }
            else
            {
                sb.Append("<ul>");
                sb.Append("<li style='background-color:#eaeaea;'>负债编号</li>");
                sb.Append("<li style='background-color:#eaeaea;'>年利息</li>");
                sb.Append("<li style='background-color:#eaeaea;'>负债金额</li>");
                sb.Append("<li style='background-color:#eaeaea;'>负债时间</li>");
                sb.Append("<li style='background-color:#eaeaea;'>负债对象</li>");
                sb.Append("<li style='background-color:#eaeaea;'>操作</li>");
                foreach (Models.Debt item in list)
                {
                    sb.Append("<li>"+item.deId+"</li>");
                    sb.Append("<li>" + item.deAccrual + "</li>");
                    sb.Append("<li>" + item.deManey + "</li>");
                    sb.Append("<li>" + item.detime + "</li>");
                    sb.Append("<li>" + item.deObject + "</li>");
                    sb.Append("<li><a href='#' style='color:blue'>还债</a>  <a href='#' style='color:blue;' onclick=way(" + item.deId + ")>删除</a>  <a href='#' style='color:blue;' onclick=fun(" + item.deId + ")>负债原因</a></li>");
                    
                }
                sb.Append("</ul>");
            }
            return sb.ToString();
        }//JQ调用就好了 把传过来的值放到<div id="DebtFind"></div>
 $.ajax({
                type: "post",
                contentType: "application/json",
                url: "../../WebServices/DebtWebService.asmx/GetAllDebt",
                data: "{}",
                dataType: "json",
                success: function (result) {
                    $("#DebtFind").html(result.d);
                }
            })