首页 > 代码库 > JSONP

JSONP

2024-07-16 22:13:13   219人阅读

01.先定义一个Person类

 /// <summary>    /// 包含用户的基本信息    /// </summary>    public class Person    {        /// <summary>        /// 获取或设置用户名        /// </summary>        public string Name { get; set; }        /// <summary>        /// 获取或设置用户年龄        /// </summary>        public int Age { get; set; }        /// <summary>        /// 获取或设置用户性别        /// </summary>        public string Gender { get; set; }        /// <summary>        /// 获取或设置用户国籍        /// </summary>        public string Country { get; set; }        /// <summary>        /// 获取或设置用户电子邮箱        /// </summary>        public string Email { get; set; }    }

02.为Person集合添加数据

  public static List<Person> GetPersons()        {            List<Person> ps = new List<Person>();            Person p1 = new Person { Name = "Tom", Age = 32, Country = "US", Gender = "Male", Email = "tom@gmail.com" };            Person p2 = new Person { Name = "Jack", Age = 23, Country = "UK", Gender = "Male", Email = "jack@gmail.com" };            Person p3 = new Person { Name = "Eden", Age = 25, Country = "Canada", Gender = "Female", Email = "eden@gmail.com" };            Person p4 = new Person { Name = "Li Hua", Age = 29, Country = "China", Gender = "Male", Email = "lihui@163.com" };            Person p5 = new Person { Name = "Lvo", Age = 40, Country = "US", Gender = "Male", Email = "lvo@gmail.com" };            ps.Add(p1);            ps.Add(p2);            ps.Add(p3);            ps.Add(p4);            ps.Add(p5);            return ps;        }

03.服务端代码

 

 public void ProcessRequest(HttpContext context)        {            string callbackFun = context.Request["CallBackFun"]; //客户端执行的方法名称            List<Person> person = PersonRepository.GetPersons();            string json = JsonConvert.SerializeObject(person); //Json.Net序列化            string fun = callbackFun + "(" + json + ")";            context.Response.Write(fun);        }

 

04.客户端代码

 

<!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 type="text/javascript">        function doAjax(data) {            for (var key in data) {                document.writeln(data[key].Name);                document.writeln(data[key].Age);                document.writeln(data[key].Gender);                document.writeln(data[key].Country);                document.writeln(data[key].Email);                document.writeln("<br/>");            }        }        function doAjaxJQ(data) {            for (var key in data) {                alert(data[key].Name);            }        }        function GetAreaByIP(data) {            alert(data.latitude);        }    </script>    <script type="text/javascript" src="http://localhost:8092/c01test.ashx?CallBackFun=doAjax">        //Script 标签请求    </script>    <script src="http://www.mamicode.com/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>    <script type="text/javascript">        $(function () {            $("#btnDoAjax").click(function () {                $.ajax(                {                    url: "http://localhost:8092/c01test.ashx",                    type: "GET",                    dataType: "jsonp",                    jsonp: "CallBackFun", //传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)                    jsonpCallback: "doAjaxJQ", //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据                    success: function (data) {                        //console.log(arguments)                    }                });            });            $("#btnIP").click(function () {                $.ajax({                    url: "http://api.wipmania.com/jsonp",                    type: "Get",                    dataType: "jsonp",                    jsonpCallback: "GetAreaByIP",                    success: function (data) {                    }                });            });        });    </script></head><body>    <input type="button" id="btnDoAjax" value="http://www.mamicode.com/JQ版的JsonP" />    <input type="button" id="btnIP" value="http://www.mamicode.com/根据IP获取地区" /></body></html>

 


联系
我们