zoukankan      html  css  js  c++  java
  • JQuery返回Json的Ajax例子

    前台HTML代码:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        
    <title></title>
        
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
        
    <script language="javascript" type="text/javascript">
            $(document).ready(function () {
                $(
    "#BtnJson").click(function () {
                    
    //alert('testjson');
                    AjaxJsonTest();
                }
                );
            }
            );

            function AjaxJsonTest() {
                $.ajax({
                    type: 
    'post',
                    url: 
    'Ajax/JsonTest.ashx',
                    dataType: 
    'json',
                    success: function (data) {
                        var str 
    = '<table border=1 style=" 400px;">';
                        str 
    += '<tr style="font-weight:bold"><td>name</td><td>age</td><td>sex</td></tr>';
                        
    for (var i = 0; i < data.length; i++) {
                            
    //alert('name:' + data[i].name + ' age:' + data[i].age + ' sex:' + data[i].sex);
                            
    //str += '<tr><td style="font-weight:bold">name</td><td>' + data[i].name + '</td><td style="font-weight:bold">age</td><td>' + data[i].age + '</td><td  style="font-weight:bold">sex</td><td>' + data[i].sex + '</td></tr>';
                            str += '<tr>';
                            
    for (var key in data[i]) {
                                str 
    += '<td>' + data[i][key] + '</td>';
                            }
                            str 
    += '</tr>';
                        }
                        str 
    += '</table>';
                        $(
    "#divjson").html(str);
                    },
                    error: function () {
                        alert(
    '系统繁忙,请稍候再试!');
                    }
                }
                    );            
    //end ajax
            }
        
    </script>
    </head>
    <body>
        
    <form id="form1" runat="server">
        
    <div id="divjson">
        
        
    </div>
        
    </form>
        
    <p>
            
    <input id="BtnJson" type="button" value="JsonTest" /></p>
    </body>
    </html> 

    后台的ASHX代码:

    using System;
    using System.Web;
    using System.Text;

    public class JsonTest : IHttpHandler {
        
        
    public void ProcessRequest (HttpContext context) {
            StringBuilder sb 
    = new StringBuilder();
            context.Response.ContentType 
    = "text/plain";
            sb.Append(
    "[");
            sb.Append(
    "{\"name\":\"cycle\",\"age\":\"28\",\"sex\":\"男\"},");
            sb.Append(
    "{\"name\":\"ring\",\"age\":\"27\",\"sex\":\"男\"},");
            sb.Append(
    "{\"name\":\"jingjing\",\"age\":\"22\",\"sex\":\"女\"}");
            sb.Append(
    "]");        
            context .Response .Write (sb.ToString ());
            context.Response.Flush();
            context.Response.End();
        }
     
        
    public bool IsReusable {
            
    get {
                
    return false;
            }
        }

    }
  • 相关阅读:
    228. Summary Ranges
    227. Basic Calculator II
    224. Basic Calculator
    222. Count Complete Tree Nodes
    223. Rectangle Area
    221. Maximal Square
    220. Contains Duplicate III
    219. Contains Duplicate II
    217. Contains Duplicate
    Java编程思想 4th 第4章 控制执行流程
  • 原文地址:https://www.cnblogs.com/ringwang/p/2037826.html
Copyright © 2011-2022 走看看