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;
            }
        }

    }
  • 相关阅读:
    OpenFeign添加日志信息
    SpringCloud openFeign远程调用超时解决办法
    SpringCloud多个接口标注@FeignClient报错
    Maven依赖管理更新
    Spring Data Jpa中getOne和FindOne的区别
    Restful API规范解析
    Jpa查询部分字段的方法
    使用Jpa报错之Unable to locate Attribute with the the given name [***] on this ManagedType
    IDEA 安装三方插件的方法
    shiro重新赋值权限
  • 原文地址:https://www.cnblogs.com/ringwang/p/2037826.html
Copyright © 2011-2022 走看看