zoukankan      html  css  js  c++  java
  • Ajax获取json信息例子

     JQuery的四中异步获取后台代码方法

    <!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>
        <title></title>
        <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $("#Getjson").click(function () {
                    $.getJSON("ProceseAjaxJson.ashx", "b=3", function (date) {
                        alert(date[0].CityName);
                    });
                });
    
                $("#GET").click(function () {
                    $.get("ProceseAjaxJson.ashx", "b=4", function (date) {
                        var j = $.parseJSON(date);
                        alert(j[2].CityName);
                    });
                });
    
                $("#Post").click(function () {
                    $.post("ProceseAjaxJson.ashx", { b: 5, date: '2014' }, function (date) {
                        alert(date[0].CityName);
                    },"json");
                });
    
                $("#Ajax").click(function () {
                    $.ajax({
                    url:"ProceseAjaxJson.ashx",
                    data:"ss=11",
                    type:"get",
                    success:function(date){
                        alert(date);
                    },
                    error:function(date){
                        alert("出错了");
                    }
                    });
                });
            });
        </script>
    </head>
    <body>
        <input type="button" id="Getjson" value="Ajax获取Json数据" />
        <input type="button" id="GET" value="Ajax的Get请求" />
        <input type="button" id="Post" value="Ajax的Post请求" />
        <input type="button" id="Ajax" value="Ajax的请求" />
        <input type="text" id="txtjson" />
    </body>
    </html>
    前台代码
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    
    namespace 一般处理程序操作.AjaxJson
    {
        /// <summary>
        /// ProceseAjaxJson 的摘要说明
        /// </summary>
        public class ProceseAjaxJson : IHttpHandler
        {
            public class CityInfo
            {
                public int CityId
                {
                    get;
                    set;
                }
                public string CityName
                {
                    get;
                    set;
                }
            }
            public void ProcessRequest(HttpContext context)
            {
                context.Response.ContentType = "text/plain";
                System.Collections.Generic.List<CityInfo> Citys = new List<CityInfo>()
                {
                    new CityInfo(){CityId=1,CityName="湛江"},
                    new CityInfo(){CityId=2,CityName="广州"},
                    new CityInfo(){CityId=3,CityName="茂名"}
                };
                //第一种方式。必须懂
                //System.Text.StringBuilder sb = new System.Text.StringBuilder();
                //sb.Append("[");
                //foreach (var city in Citys)
                //{
                //    sb.Append("{");
                //    sb.AppendFormat(""CityId":"{0}","CityName":"{1}"", city.CityId, city.CityName);
                //    sb.Append("},");
                //}
                //string str=sb.ToString().TrimEnd(',');
                //str = str + "]";
    
                //第二种方式。方便快捷
                System.Web.Script.Serialization.JavaScriptSerializer javaScriptSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();
                string str=javaScriptSerializer.Serialize(Citys);
                context.Response.Write(str);
            }
    
            public bool IsReusable
            {
                get
                {
                    return false;
                }
            }
        }
    }
    后台代码

    Ajax使用

    <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $("#BtnAjax").click(function () {
                    var xhr;
                    if (XMLHttpRequest) {
                        xhr = new XMLHttpRequest(); //ie8,ie9
                    }
                    else {
                        xhr = new ActiveXObject("XMLHttpRequest?IP=33"); //ie6
                    }
                    //get请求
                    //                xhr.open("GET", "ProcessAjax.ashx", "True");
                    //                xhr.send();
    
                    //post请求
                    xhr.open("Post", "ProcessAjax.ashx", true);
                   
                    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                    xhr.send("IP=33");
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState == 4) {
                            alert(xhr.responseText);
                        }
                    }
                });
            });
        </script>
    View Code
  • 相关阅读:
    delphi 文件的读取(二进制文件和文本文件)
    delphi中用代码实现注册Ocx和Dll(有点怪异,使用CallWindowProc来调用指定函数DllRegisterServer)
    delphi 控件大全(确实很全)
    C#编写Windows 服务
    SSD Buffer Pool Extension
    .NET Web开发技术简单整理
    Python数据库访问之SQLite3、Mysql
    infiniband学习总结
    模板引擎开发3自定义标签的处理
    CSS选择器、优先级与匹配原理
  • 原文地址:https://www.cnblogs.com/huijie/p/3550928.html
Copyright © 2011-2022 走看看