ASP.NET 使用JQuery取后台数据并绑定到前台

最新推荐文章于 2024-05-30 11:27:58 发布

diukuijian4440

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量199

点赞数

文章标签： javascript json xhtml ViewUI

原文链接：http://www.cnblogs.com/Jersen/p/3505923.html

版权

最近的项目开始要用到JQuery了，但是我JQuery用的好少，做了一个简单的通过Ajax和后台交换数据的demo,预先练习下。

主要是用AJAX调用后台的方法 url: "Default.aspx/GetJosnData", 即页面/方法，方法必须加上[WebMethod]，然后返回Josn，然后前台解析。

[WebMethod]

命名空间 System.Web.Services;

向使用 ASP.NET 创建的 XML Web services 中的某个方法添加此特性后，就可以从远程 Web 客户端调用该方法。

前台的

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <title></title>
    <script type="text/javascript" language="javascript">
        function showData() {
            $.ajax({
                type: "post",
                url: "Default.aspx/GetJosnData",
                datatype: "json",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    var obj = (eval('(' + data.d + ')')[0]).JosnData;
                    //循环Josn
                    $.each(obj, function (i, item) {
                        //i 序号,item对应的对象
                        $("#tab1").append("<tr><td> " + i + "</td><td>" + item.ID + " </td><td>" + item.Name + " </td></tr>");
                    });
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(errorThrown);
                }
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table id="tab1">
            <tr>
                <td>
                    编号
                </td>
                <td>
                    ID
                </td>
                <td>
                    Name
                </td>
            </tr>
        </table>
        <input id="Button1" type="button" value="查询" onclick="showData()" />
    </div>
    </form>
</body>
</html>

然后是后台的

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Data;
using System.Text;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    [WebMethod]
    public static string GetJosnData()
    {
        string Josn = "";
        //先随便构造一个Table
        DataTable dt = new DataTable();
        dt.Columns.Add("ID");
        dt.Columns.Add("Name");
        for (int i = 0; i < 3; i++)
        {
            DataRow dr = dt.NewRow();
            dr["ID"] = "编号" + i.ToString();
            dr["Name"] = "值" + i.ToString();
            dt.Rows.Add(dr);
        }
        //将DataTable转换成Josn
        Josn = DataTableToJson("JosnData", dt);
        return Josn;
    }
    /// <summary>
    /// 将DataTble转为Josn数据
    /// </summary>
    /// <param name="jsonName">Josn名</param>
    /// <param name="dt">需要转换的DataTble</param>
    /// <returns></returns>
    public static string DataTableToJson(string jsonName, DataTable dt)
    {
        StringBuilder Json = new StringBuilder();
        Json.Append("[{\"" + jsonName + "\":[");
        if (dt.Rows.Count > 0)
        {
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                Json.Append("{");
                for (int j = 0; j < dt.Columns.Count; j++)
                {
                    Json.Append("\"" + dt.Columns[j].ColumnName.ToString() + "\":\"" + dt.Rows[i][j].ToString() + "\"");
                    if (j < dt.Columns.Count - 1)
                    {
                        Json.Append(",");
                    }
                }
                Json.Append("}");
                if (i < dt.Rows.Count - 1)
                {
                    Json.Append(",");
                }
            }
        }
        Json.Append("]}]");
        return Json.ToString();
    }

}

转载于:https://www.cnblogs.com/Jersen/p/3505923.html

diukuijian4440

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ASP.NET 使用JQuery取后台数据并绑定到前台

最近的项目开始要用到JQuery了，但是我JQuery用的好少，做了一个简单的通过Ajax和后台交换数据的demo,预先练习下。主要是用AJAX调用后台的方法url: "Default.aspx/GetJosnData", 即页面/方法，方法必须加上[WebMethod]，然后返回Josn，然后前台解析。[WebMethod]命名空间 System.Web.Service...
复制链接

扫一扫