Ajax的四种请求方式

简介: ==============================================================html页面================================     ...
==============================================================html页面================================
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnGetJson").click(
                function () {
                    $.getJSON("ResponseJson.ashx", "a=3&b=4", function (data) {
                        alert(data[1].CityName);
                    });
                });
            $("#btnJQGet").click(function () {
                $.get("ResponseJson.ashx", "aa=22", function (data) {
                    alert(data);
                });
            });
            $("#btnJQPost").click(function () {
                $.post("ResponseJson.ashx", "bb=22", function (data) {
                    alert(data[0].CityName);
                }, "json")
            });
            $("#btnAjax").click(
                function () {
                    $.ajax({
                        url: "ResponseJson.ashx",
                        data: "a=3",
                        type: "Post",
                        success: function (data) {
                            //alert(data);
                            $("#divDemo").text(data);
                        },
                        error: function () {
                            alert("错误!");
                        }
                    });
                }
                );
            $("#btnLoad").click(function () {
                $("#divDemo").load("ResponseJson.ashx", { id: 333 }, function (data) {
                    alert(data);
                });  
            });
        });
    </script>
</head>
<body>
    <input id="btnGetJson" type="button" value="JQ GetJson" />
    <input type="button" value="JQ Get" id="btnJQGet" />
    <input type="button" value="JQ Post" id="btnJQPost" />
    <input type="button" value="JQ ajax" id="btnAjax" />
    <input type="button" value="JQ load" id="btnLoad" />
    <div id="divDemo">


    </div>
</body>
</html>
===========================================================================ashx================================================
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;


namespace _20141224.Ajax
{
    /// <summary>
    /// Summary description for ResponseJson
    /// </summary>
    public class ResponseJson : IHttpHandler
    {


        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            //context.Response.Write("Hello World");
            System.Collections.Generic.List<CityInfo> cities = new List<CityInfo>() {
                new CityInfo() { CityId = 1, CityName = "郑州" },
                new CityInfo() { CityId = 2, CityName = "周口" },
                new CityInfo() { CityId = 3, CityName = "漯河" },
                new CityInfo() { CityId = 4, CityName = "驻马店" },
                new CityInfo() { CityId = 5, CityName = "许昌" },
                new CityInfo() { CityId = 6, CityName = "开封" },
                new CityInfo() { CityId = 7, CityName = "巩义" }
};
            //StringBuilder sb = new StringBuilder();
            //sb.Append("[");
            //foreach (var CityInfo in cities)
            //{
            //    sb.Append("{");
            //    sb.AppendFormat("\"CityId\":\"{0}\",\"CityName\":\"{1}\"", CityInfo.CityId,CityInfo.CityName);
            //    sb.Append("},");
            //}
            //string str = sb.ToString().TrimEnd(',');
            //str += "]";




            System.Web.Script.Serialization.JavaScriptSerializer javaScriptSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();
            string json = javaScriptSerializer.Serialize(cities);
            context.Response.Write(json);
        }


        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
        public class CityInfo
        {
            public string CityName { get; set; }
            public int CityId { get; set; }
        }
    }
}
相关文章
|
4月前
|
XML JSON 前端开发
深入了解JavaScript中的AJAX和HTTP请求
深入了解JavaScript中的AJAX和HTTP请求
|
3月前
|
XML JSON 前端开发
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
58 1
|
4月前
|
前端开发 JavaScript 数据安全/隐私保护
ajax请求中的reponseType和withCredetials分别是啥?
ajax请求中的reponseType和withCredetials分别是啥?
ajax请求中的reponseType和withCredetials分别是啥?
|
4月前
|
资源调度 前端开发 JavaScript
Vue3中如何使用axios进行Ajax请求?
Vue3中如何使用axios进行Ajax请求?
113 1
|
3月前
|
XML JSON 前端开发
|
3月前
|
前端开发 JavaScript
|
3月前
|
JSON 前端开发 安全
浏览器跨域限制:为什么浏览器不能跨域发送Ajax请求?
浏览器跨域限制:为什么浏览器不能跨域发送Ajax请求?
37 0
|
3月前
|
JSON 前端开发 JavaScript
JavaScript学习 -- ajax方法的POST请求
JavaScript学习 -- ajax方法的POST请求
29 0
|
3月前
|
XML 前端开发 JavaScript
AJAX如何向服务器发送请求?
AJAX如何向服务器发送请求?
44 0
|
4月前
|
JSON 前端开发 JavaScript
Django实践-04静态资源和Ajax请求
Django实践-04静态资源和Ajax请求
Django实践-04静态资源和Ajax请求