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; }
        }
    }
}
相关文章
|
8月前
|
JSON 前端开发 JavaScript
axios请求成功而$.ajax却不行排错
axios请求成功而$.ajax却不行排错
70 2
|
8月前
|
前端开发
解决前端ajax跨域请求不携带cookie信息JSESSIONID的问题
解决前端ajax跨域请求不携带cookie信息JSESSIONID的问题
|
2月前
|
XML 前端开发 JavaScript
|
29天前
|
JSON 前端开发 JavaScript
Python中如何判断是否为AJAX请求
AJAX请求是Web开发中常见的异步数据交互方式,允许不重新加载页面即与服务器通信。在Python的Django和Flask框架中,判断AJAX请求可通过检查请求头中的`X-Requested-With`字段实现。Django提供`request.is_ajax()`方法,Flask则需手动检查该头部。本文详解这两种框架的实现方法,并附带代码示例,涵盖安全性、兼容性、调试及前端配合等内容,帮助开发者提升Web应用性能与用户体验。
43 0
|
3月前
|
JSON JavaScript 前端开发
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
79 22
|
3月前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
49 18
|
3月前
|
前端开发 JavaScript Java
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
115 4
|
3月前
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
172 1
|
4月前
|
前端开发
React技术栈-react使用的Ajax请求库实战案例
这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例,展示了如何通过这些库发送GET和POST请求,并处理响应和错误。
72 10
|
4月前
|
前端开发
React技术栈-react使用的Ajax请求库用户搜索案例
这篇文章展示了一个React技术栈中使用Ajax请求库(如axios)进行用户搜索的实战案例,包括React组件的结构、状态管理以及如何通过Ajax请求获取并展示GitHub用户数据。
41 7
React技术栈-react使用的Ajax请求库用户搜索案例