Jquery Step00-$.Ajax Json

最新推荐文章于 2023-04-20 14:31:33 发布

原创最新推荐文章于 2023-04-20 14:31:33 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #function #json #string #服务器 #list

JQuery 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个具体的案例，使用Ajax与jQuery从服务器获取JSON格式的数据，并展示了如何解析这些数据并将其显示在前端页面上。具体实现包括服务器端采用ashx文件处理请求及返回数据，客户端使用jQuery的getJSON方法获取数据并展示。

1.json :Newtonsoft.Json http://files.cnblogs.com/ie421/Json20.zip

2.js:jQuery

3.服务器端:ashx

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";

string method = context.Request.Params["m"];

            if(method=="test")
                context.Response.Write(GetPersonListJosnString_2());
        }

返回:{"ID":1,"FirstName":"肖","LastName":"永志"}

4.前台页面接收

    $(document).ready(function(){
        $.getJSON("/ashx/Ajax.ashx",{m:"test"},function(json){
            $.each(json,function(i,item){
                $("#test").append(item.ID+"."+item.FirstName+"<br/>");
            })
        })
    });

$(document).ready(function(){
        $.getJSON("/ashx/Ajax.ashx",{m:"test"},function(json){

            var tb=$("#tb_name_list");
            tb.find("tr").each(function(i){ //清空表,保留第一行
                if (i>0) $(this).remove();
            });

            $.each(json,function(i,item){
                var tr="<tr><td>"+item.ID+"</td><td>"+item.FirstName+"</td><td>"+item.LastName+"</td></tr>";
                tb.append(tr);
            })
        })
    });