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

 

posted @ 2014-02-15 22:42  偏执的放纵  阅读(2703)  评论(0)  编辑  收藏  举报