GVKun编程网logo

post请求获取json数据 解析json数据(post application/json参数获取)

13

在本文中,我们将给您介绍关于post请求获取json数据解析json数据的详细内容,并且为您解答postapplication/json参数获取的相关问题,此外,我们还将为您提供关于AJAXMVC服务

在本文中,我们将给您介绍关于post请求获取json数据 解析json数据的详细内容,并且为您解答post application/json参数获取的相关问题,此外,我们还将为您提供关于AJAX MVC 服务器返回Json数据,客户端获取Json数据、AJAX 跨域请求 - JSONP获取JSON数据、Ajax 跨域请求 jsonp获取json数据、AJAX 跨域请求-JSONP获取json数据的知识。

本文目录一览:

post请求获取json数据 解析json数据(post application/json参数获取)

post请求获取json数据 解析json数据(post application/json参数获取)

<script>
        window.onload = function () {
            var str;
           // console.log(@ViewBag.ID);
            $.post("/ServiceBills/ServiceBills/UpdateA",
                { id: @ViewBag.ID},
                function (data) {
                    for (var attr in data) {
                       // console.log(attr);//name,age,gender
                        //console.log(data[attr]);//jack,25,male  //值
                        //console.log(typeof json1[attr]);
                        // $("#" + attr).val("111111111");

                        $("#" + attr).val(data[attr]);  //id

                        if ((data[attr] + "").indexOf("/Date(") != -1) {  //时间
                            str = data[attr] + "";
                            str = timestampToTime(str.substring(6, str.length - 2)); //转换时间
                          //  console.log(str);
                        }
                        else {
                            str = data[attr];
                        }
                        if ((attr + "").indexOf("workResult") != -1) { //包含workResult字符串
                            console.log("++++");
                            str = null;                          
                        }
                        if ((attr + "").indexOf("UserSatisfaction") != -1) {
                            console.log("----");
                            str = null;
                        }
                        if (str != null) {
                            $("input[name=''" + attr + "'']").val(str); //输入框   
                        }
                       

                        //复选框
                        if ((attr + "").indexOf("demandType") != -1) {  //包含该字符串
                            var strs = (data[attr] + "").split(",");  //输出这个字符串分割为数组
                            //获取集合
                            var objs = document.getElementsByName("demandType[]"); //获得对象集合
                           // console.log(objs);
                            for (var i = 0; i < objs.length; i++) {
                                for (var j = 0; j < strs.length; j++) {
                                    if (strs[j].indexOf(objs[i].value) > -1) { //判断对象的值是否在这个数组中
                                       // console.log(strs[j]);
                                        objs[i].checked = true;       //选中复选框                                
                                    }
                                };
                            }
                        }
                        if ((attr + "").indexOf("userDemand") != -1) {  //包含该字符串
                            var strs = (data[attr] + "").split(",");  //输出这个字符串分割为数组
                            //获取集合
                            var objs = document.getElementsByName("userDemand[]"); //获得对象集合
                           // console.log(objs);
                            for (var i = 0; i < objs.length; i++) {
                                for (var j = 0; j < strs.length; j++) {
                                    if (strs[j].indexOf(objs[i].value) > -1) { //判断对象的值是否在这个数组中
                                        //console.log(strs[j]);
                                        objs[i].checked = true;       //选中复选框                                
                                    }
                                };
                            }
                        }

                        //单选框
                       // workResult
                        if ((attr + "").indexOf("workResult") != -1){
                            var str0 = data[attr] + "";
                            var objs = document.getElementsByName("workResult"); //获得对象集合
                           // console.log(objs);
                            for (var i = 0; i < objs.length; i++) {
                                //console.log(objs.length);                       
                                if (str0.indexOf(objs[i].value) > -1){
                                    objs[i].checked = true;
                                    console.log(objs[i].value);
                                }
                              
                            }
                        }
                        if ((attr + "").indexOf("UserSatisfaction") != -1) {
                            var str0 = data[attr] + "";
                            var objs = document.getElementsByName("UserSatisfaction"); //获得对象集合
                            for (var i = 0; i < objs.length; i++) {
                                if (str0.indexOf(objs[i].value) > -1) {
                                    objs[i].checked = true;
                                    console.log(objs[i].value);
                                }
                            }

                        }

                    }
                });
        }
        function timestampToTime(timestamp) {
            var date = new Date(timestamp * 1);//时间戳为10位需*1000,时间戳为13位的话不需乘1000
            Y = date.getFullYear() + ''-'';
            M = (date.getMonth() + 1 < 10 ? ''0'' + (date.getMonth() + 1) : date.getMonth() + 1) + ''-'';
            D = date.getDate() + '' '';
            h = date.getHours() + '':'';
            m = date.getMinutes() + '':'';
            s = date.getSeconds();
            return Y + M + D + h + m + s;
        }
    </script>

 

AJAX MVC 服务器返回Json数据,客户端获取Json数据

AJAX MVC 服务器返回Json数据,客户端获取Json数据

<>

控制器 Controller

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using System.Web.Script.Serialization; namespace MvcApplication2.Controllers { public class HomeController : Controller { public ActionResult Index() { return View(); } //---------------------------------第一种写法:服务器返回一个Json对象 public ActionResult GetData1() { JsonResult json = new JsonResult(); json.JsonRequestBehavior = JsonRequestBehavior.AllowGet; //允许来自客户端的HTML GET请求 json.Data = new { code = 0,message = "成功" }; return json; //这里直接返回一个json对象给客户端,客户端通过ajax的请求后,获得的直接就是一个json对象,不需要再用$.parseJSON(data)这个方式将字符串转换成Json对象了,因为取到的本身就是一个json对象,而不是一个字符串。 } //---------------------------------第二种写法:服务器返回一个Json对象 public ActionResult GetData2() { //其实调用的是JsonResult类下的这个方法:protected internal JsonResult Json(object data); //注意:Json()是一个方法,参数是一个object类型的对象,返回值是JsonResult类型 return Json(new { code = 0,message = "ON" }); //通过测试:采用这种形式,客户端只能通过异步的Post请求才能取到数据,如果异步Get请求,无法获取数据 } //---------------------------------第三种写法:服务器返回一个Json格式的字符串 public ActionResult GetData3() { JavaScriptSerializer json = new JavaScriptSerializer(); var jsonObj = new { code = 1,message = "OK" }; //构造一个对象 string jsonStr = json.Serialize(jsonObj); //将这个对象转换成json格式的字符串 return Content(jsonStr); //返回一个json格式的字符串。 所以客户端通过ajax请求后,获得的这个数据仅仅是一个json格式的字符串,所以需要用$.parseJSON(data)这个方式将字符串转换成Json对象 } } }

视图 View

<html> <head> <Meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/jquery-1.11.2.js"></script> </head> <body> <div> <button id="submit1">提交1</button> <button id="submit2">提交2</button><button id="submit3">提交3</button> </div> </body> </html> <script type="text/javascript"> $(function () { $("#submit1").click(function () { $.get("/Home/GetData1",function (data) { //服务器端返回的是一个Json对象,所以这个data是一个json对象,并不是一个json格式的字符串。 alert(data.code); //打印出:0 alert(data.message);//打印出:成功 //除了以上的取值方式外下面的方式也是可以取到值的 alert(data["code"]); //打印出:0 alert(data["message"]); //打印出:成功 }) }) }) </script> <script type="text/javascript"> $(function () { $("#submit2").click(function () { //不知道为什么这种一定要是异步Post请求,如果是异步Get请求无法取到数据 $.post("/Home/GetData2",function (data) { //服务器端返回的是一个Json对象,所以这个data是一个json对象,并不是一个json格式的字符串。 alert(data.code); //打印出:0 alert(data.message); //打印出:ON }) }) }) </script> <script type="text/javascript"> $(function () { $("#submit3").click(function () { $.get("/Home/GetData3",function (data) { //服务器返回的是一个json格式的字符串,所以这个data是一个字符串,并不是一个对象 var jsonObj = $.parseJSON(data); //将这个字符串 转换成json对象 alert(jsonObj.code); //打印出:1 alert(jsonObj.message); //打印出:OK }) }) }) </script>

AJAX 跨域请求 - JSONP获取JSON数据

AJAX 跨域请求 - JSONP获取JSON数据

原文地址:http://justcoding.iteye.com/blog/1366102

AJAX 跨域请求 - JSONP获取JSON数据

    博客分类:
  • Javascript /Jquery / Bootstrap / Web

 

Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术。Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索。使用 XMLHttpRequest 函数获取数据,它是一种 API,允许客户端 JavaScript 通过 HTTP 连接到远程服务器。Ajax 也是许多 mashup 的驱动力,它可将来自多个地方的内容集成为单一 Web 应用程序。

 

不过,由于受到浏览器的限制,该方法不允许跨域通信。如果尝试从不同的域请求数据,会出现安全错误。如果能控制数据驻留的远程服务器并且每个请求都前往同一域,就可以避免这些安全错误。但是,如果仅停留在自己的服务器上,Web 应用程序还有什么用处呢?如果需要从多个第三方服务器收集数据时,又该怎么办?

 

理解同源策略限制

同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说,受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容,以防止它们之间的操作。这个浏览器策略很旧,从 Netscape Navigator 2.0 版本开始就存在。

 

克服该限制的一个相对简单的方法是让 Web 页面向它源自的 Web 服务器请求数据,并且让 Web 服务器像代理一样将请求转发给真正的第三方服务器。尽管该技术获得了普遍使用,但它是不可伸缩的。另一种方式是使用框架要素在当前 Web 页面中创建新区域,并且使用 GET 请求获取任何第三方资源。不过,获取资源后,框架中的内容会受到同源策略的限制。

 

克服该限制更理想方法是在 Web 页面中插入动态脚本元素,该页面源指向其他域中的服务 URL 并且在自身脚本中获取数据。脚本加载时它开始执行。该方法是可行的,因为同源策略不阻止动态脚本插入,并且将脚本看作是从提供 Web 页面的域上加载的。但如果该脚本尝试从另一个域上加载文档,就不会成功。幸运的是,通过添加 JavaScript Object Notation (JSON) 可以改进该技术。

 

1、什么是JSONP?

 

要了解JSONP,不得不提一下JSON,那么什么是JSON ?

JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the language with no muss or fuss.

JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。

 

2、JSONP有什么用?

由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源,为了实现跨域请求,可以通过script标签实现跨域请求,然后在服务端输出JSON数据并执行回调函数,从而解决了跨域的数据请求。

 

3、如何使用JSONP?

下边这一DEMO实际上是JSONP的简单表现形式,在客户端声明回调函数之后,客户端通过script标签向服务器跨域请求数据,然后服务端返回相应的数据并动态执行回调函数。

 

HTML代码 (任一 ):

 

Html代码

  1. <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />  

  2. <script type="text/javascript">  

  3.     function jsonpCallback(result) {   

  4.         //alert(result);   

  5.         for(var i in result) {   

  6.             alert(i+":"+result[i]);//循环输出a:1,b:2,etc.   

  7.         }   

  8.     }   

  9.     var JSONP=document.createElement("script");   

  10.     JSONP.type="text/javascript";   

  11.     JSONP.src="http://crossdomain.com/services.php?callback=jsonpCallback";   

  12.     document.getElementsByTagName("head")[0].appendChild(JSONP);   

  13. </script>  

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript">
	function jsonpCallback(result) {
		//alert(result);
		for(var i in result) {
			alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
		}
	}
	var JSONP=document.createElement("script");
	JSONP.type="text/javascript";
	JSONP.src="http://crossdomain.com/services.php?callback=jsonpCallback";
	document.getElementsByTagName("head")[0].appendChild(JSONP);
</script>

 

或者

 

Html代码

  1. <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />  

  2. <script type="text/javascript">  

  3.     function jsonpCallback(result) {   

  4.         alert(result.a);   

  5.         alert(result.b);   

  6.         alert(result.c);   

  7.         for(var i in result) {   

  8.             alert(i+":"+result[i]);//循环输出a:1,b:2,etc.   

  9.         }   

  10.     }   

  11. </script>  

  12. <script type="text/javascript" src="http://crossdomain.com/services.php?callback=jsonpCallback"></script>  

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript">
	function jsonpCallback(result) {
		alert(result.a);
		alert(result.b);
		alert(result.c);
		for(var i in result) {
			alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
		}
	}
</script>
<script type="text/javascript" src="http://crossdomain.com/services.php?callback=jsonpCallback"></script>

 

JavaScript的链接,必须在function的下面。

 

服务端PHP代码 (services.php):

 

Php代码

  1. <?php   

  2.   

  3. //服务端返回JSON数据   

  4. $arr=array(''a''=>1,''b''=>2,''c''=>3,''d''=>4,''e''=>5);   

  5. $result=json_encode($arr);   

  6. //echo $_GET[''callback''].''("Hello,World!")'';   

  7. //echo $_GET[''callback'']."($result)";   

  8. //动态执行回调函数   

  9. $callback=$_GET[''callback''];   

  10. echo $callback."($result)";  

<?php

//服务端返回JSON数据
$arr=array(''a''=>1,''b''=>2,''c''=>3,''d''=>4,''e''=>5);
$result=json_encode($arr);
//echo $_GET[''callback''].''("Hello,World!")'';
//echo $_GET[''callback'']."($result)";
//动态执行回调函数
$callback=$_GET[''callback''];
echo $callback."($result)";

 

如果将上述JS客户端代码用jQuery的方法来实现,也非常简单。

 

$.getJSON
$.ajax
$.get

 

客户端JS代码在jQuery中的实现方式1:

 

Js代码

  1. <script type="text/javascript" src="jquery.js"></script>   

  2. <script type="text/javascript">   

  3.     $.getJSON("http://crossdomain.com/services.php?callback=?",   

  4.     function(result) {   

  5.         for(var i in result) {   

  6.             alert(i+":"+result[i]);//循环输出a:1,b:2,etc.   

  7.         }   

  8.     });   

  9. </script>  

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
	$.getJSON("http://crossdomain.com/services.php?callback=?",
	function(result) {
		for(var i in result) {
			alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
		}
	});
</script>

 

客户端JS代码在jQuery中的实现方式2:

 

Js代码

  1. <script type="text/javascript" src="jquery.js"></script>   

  2. <script type="text/javascript">   

  3.     $.ajax({   

  4.         url:"http://crossdomain.com/services.php",   

  5.         dataType:''jsonp'',   

  6.         data:'''',   

  7.         jsonp:''callback'',   

  8.         success:function(result) {   

  9.             for(var i in result) {   

  10.                 alert(i+":"+result[i]);//循环输出a:1,b:2,etc.   

  11.             }   

  12.         },   

  13.         timeout:3000   

  14.     });   

  15. </script>  

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
	$.ajax({
		url:"http://crossdomain.com/services.php",
		dataType:''jsonp'',
		data:'''',
		jsonp:''callback'',
		success:function(result) {
			for(var i in result) {
				alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
			}
		},
		timeout:3000
	});
</script>

 

客户端JS代码在jQuery中的实现方式3:

 

Js代码

  1. <script type="text/javascript" src="jquery.js"></script>   

  2. <script type="text/javascript">   

  3.     $.get(''http://crossdomain.com/services.php?callback=?'', {name: encodeURIComponent(''tester'')}, function (json) { for(var i in json) alert(i+":"+json[i]); }, ''jsonp'');   

  4. </script>  

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
	$.get(''http://crossdomain.com/services.php?callback=?'', {name: encodeURIComponent(''tester'')}, function (json) { for(var i in json) alert(i+":"+json[i]); }, ''jsonp'');
</script>

 

其中 jsonCallback 是客户端注册的,获取 跨域服务器 上的json数据 后,回调的函数。
http://crossdomain.com/services.php?callback=jsonpCallback
这个 url 是跨域服务 器取 json 数据的接口,参数为回调函数的名字,返回的格式为

 

Js代码

  1. jsonpCallback({msg:''this is json data''})  

jsonpCallback({msg:''this is json data''})

 

Jsonp原理:
首先在客户端注册一个callback, 然后把callback的名字传给服务器。

此时,服务器先生成 json 数据。
然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 jsonp.

最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。

客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里.(动态执行回调函数)

使用JSON的优点在于:

  • 比XML轻了很多,没有那么多冗余的东西。

  • JSON也是具有很好的可读性的,但是通常返回的都是压缩过后的。不像XML这样的浏览器可以直接显示,浏览器对于JSON的格式化的显示就需要借助一些插件了。

  • 在JavaScript中处理JSON很简单。

  • 其他语言例如PHP对于JSON的支持也不错。

JSON也有一些劣势:

  • JSON在服务端语言的支持不像XML那么广泛,不过JSON.org上提供很多语言的库。

  • 如果你使用eval()来解析的话,会容易出现安全问题。

尽管如此,JSON的优点还是很明显的。他是Ajax数据交互的很理想的数据格式。

 

主要提示:

JSONP 是构建 mashup 的强大技术,但不幸的是,它并不是所有跨域通信需求的万灵药。它有一些缺陷,在提交开发资源之前必须认真考虑它们。

 

第一,也是最重要的一点,没有关于 JSONP 调用的错误处理。如果动态脚本插入有效,就执行调用;如果无效,就静默失败。失败是没有任何提示的。例如,不能从服务器捕捉到 404 错误,也不能取消或重新开始请求。不过,等待一段时间还没有响应的话,就不用理它了。(未来的 jQuery 版本可能有终止 JSONP 请求的特性)。

 

JSONP 的另一个主要缺陷是被不信任的服务使用时会很危险。因为 JSONP 服务返回打包在函数调用中的 JSON 响应,而函数调用是由浏览器执行的,这使宿主 Web 应用程序更容易受到各类攻击。如果打算使用 JSONP 服务,了解它能造成的威胁非常重要。

Ajax 跨域请求 jsonp获取json数据

Ajax 跨域请求 jsonp获取json数据

遇到Ajax的跨域请求出问题 找了中解决办法如下:

参考内容:http://justcoding.iteye.com/blog/1366102


由于受到浏览器的限制,该方法不允许跨域通信。如果尝试从不同的域请求数据,会出现安全错误。如果能控制数 据驻留的远程服务器并且每个请求都前往同一域,就可以避免这些安全错误。但是,如果仅停留在自己的服务器上,Web 应用程序还有什么用处呢?如果需要从多个第三方服务器收集数据时,又该怎么办?

理解同源策略

同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说,受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容,以防止它们之间的操作。这个浏览器策略很旧,从 netscape Navigator 2.0 版本开始就存在。

克服该限制的一个相对简单的方法是让 Web 页面向它源自的 Web 服务器请求数据,并且让 Web 服务器像代理一样将请求转发给真正的第三方服务器。尽管该技术获得了普遍使用,但它是不可伸缩的。另一种方式是使用框架要素在当前 Web 页面中创建新区域,并且使用GET请求获取任何第三方资源。不过,获取资源后,框架中的内容会受到同源策略的限制。

克服该限制更理想方法是在 Web 页面中插入动态脚本元素,该页面源指向其他域中的服务 URL 并且在自身脚本中获取数据。脚本加载时它开始执行。该方法是可行的,因为同源策略不阻止动态脚本插入,并且将脚本看作是从提供 Web 页面的域上加载的。但如果该脚本尝试从另一个域上加载文档,就不会成功。幸运的是,通过添加 JavaScript Object Notation (JSON) 可以改进该技术。

1、什么是JSONP?

要了解JSONP,不得不提一下JSON,那么什么是JSON?

JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript,it can be used in the language with no muss or fuss.

JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。

2、JSONP有什么用?

由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源,为了实现跨域请求,可以通过script标签实现跨域请求,然后在服务端输出JSON数据并执行回调函数,从而解决了跨域的数据请求。


3、JSONP原理
首先在客户端注册一个callback,然后把callback的名字传给服务器。

此时,服务器先生成 json 数据。
然后以 javascript 语法的方式,生成一个function,function 名字就是传递上来的参数 jsonp.
最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。
客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里.(动态执行回调函数)

4、JSONP优缺点

JSONP 是构建 mashup 的强大技术,但不幸的是,它并不是所有跨域通信需求的万灵药。它有一些缺陷,在提交开发资源之前必须认真考虑它们。

第一,也是最重要的一点,没有关于 JSONP 调用的错误处理。如果动态脚本插入有效,就执行调用;如果无效,就静默失败。失败是没有任何提示的。例如,不能从服务器捕捉到 404 错误,也不能取消或重新开始请求。不过,等待一段时间还没有响应的话,就不用理它了。(未来的 jQuery 版本可能有终止 JSONP 请求的特性)。

JSONP 的另一个主要缺陷是被不信任的服务使用时会很危险。因为 JSONP 服务返回打包在函数调用中的 JSON 响应,而函数调用是由浏览器执行的,这使宿主 Web 应用程序更容易受到各类攻击。如果打算使用 JSONP 服务,了解它能造成的威胁非常重要。



具体实现:

前台Ajax请求 在ajax的函数中新增一行dataType:'jsonp',标示为跨域的请求如下:

</pre><pre name="code"><script>
	function sendJson(){
		var value = $("#xiaoh").val();
		alert(value);
		 $.ajax({
	   			type : 'post',dataType:'jsonp',url  : 'http://localhost:8080/springMVC/jsonDo',data : {'tokenId' : value},success : function(data){
	   	   			alert(data.tokenId);
	   		    },error : function(data) {
	   		    	alert(data.tokenId);
	   		    }
	   	    }); 
	       
	}
</script>

action的后台代码也要做相应的处理,如下

在jsonDo的参数值中加入 String callback参数,这个参数在前台的ajax中不用赋值,jquery会自动给这个参数赋值的,

然后再后台中封装下返回这个参数值 callback({。。。。}) , 大括号中传要返回的参数就行。下面是例子:

 @RequestMapping(value="/jsonDo",produces = "application/json;charset=UTF-8")    
	    public @ResponseBody String jsonDo(String tokenId,String callback) {  
		 System.out.println("tokenId:"+tokenId);
		 StringBuilder sb = new StringBuilder();
			sb.append(callback);
			sb.append("(");
			sb.append("{\"tokenId\":\"111111111\"}");
			sb.append(")");
	        return sb.toString();          
	    }  

AJAX 跨域请求-JSONP获取json数据

AJAX 跨域请求-JSONP获取json数据

1、JSONP简介

JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。

2、JSONP解决了什么问题

由于同源策略的限制,xmlHttpRequest只容许请求当前源的资源(域名、协议、端口)的资源,为了实现跨域请求,可以通过script标签实现跨域请求,然后在服务器段输出JSON数据并执行回调函数,从而解决了跨域的数据请求;

3、java后端构造jsonp

public String writeJsonp(Object data) { StringBuilder sb = new StringBuilder(); String callback = request.getParameter("callback"); if (!StringUtils.isEmpty(callback)) { sb.append(callback); sb.append("("); if (data instanceof List) { sb.append(JSONArray.toJSONString(data,SerializerFeature.disableCircularReferenceDetect)); } else { sb.append(JSONObject.toJSONString(data,SerializerFeature.disableCircularReferenceDetect)); }
            sb.append(")");
        } else {
            sb.append(JSONObject.toJSONString(data,SerializerFeature.disableCircularReferenceDetect));
        }
        return sb.toString().replaceAll("null","");
    }

4、使用jsonp
HTML代码:

<Meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript"> function jsonpCallback(result) { //alert(result); for(var i in result) { alert(i+":"+result[i]);//循环输出a:1,b:2,etc. } } var JSONP=document.createElement("script"); JSONP.type="text/javascript"; JSONP.src="http://crossdomain.com/services.PHP?callback=jsonpCallback"; document.getElementsByTagName("head")[0].appendChild(JSONP); </script>

jqery来实现

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"> $.getJSON("http://crossdomain.com/services.PHP?callback=?",function(result) { for(var i in result) { alert(i+":"+result[i]);//循环输出a:1,etc. } }); </script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"> $.ajax({ url:"http://crossdomain.com/services.PHP",dataType:'jsonp',data:'',jsonp:'callback',success:function(result) { for(var i in result) { alert(i+":"+result[i]);//循环输出a:1,etc. } },timeout:3000 }); </script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"> $.get('http://crossdomain.com/services.PHP?callback=?',{name: encodeURIComponent('tester')},function (json) { for(var i in json) alert(i+":"+json[i]); },'jsonp'); </script>

其中 jsonCallback 是客户端注册的,获取 跨域服务器 上的json数据 后,回调的函数。
http://crossdomain.com/services.php?callback=jsonpCallback
这个 url 是跨域服务 器取 json 数据的接口,参数为回调函数的名字,返回的格式为

jsonpCallback({msg:'this is json data'})

Jsonp原理

首先在客户端注册一个callback,然后把callback的名字传给服务器。

此时,服务器先生成 json 数据。
然后以 javascript 语法的方式,生成一个function,function 名字就是传递上来的参数 jsonp.

最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。

客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里.(动态执行回调函数)

源文件链接

关于post请求获取json数据 解析json数据post application/json参数获取的问题就给大家分享到这里,感谢你花时间阅读本站内容,更多关于AJAX MVC 服务器返回Json数据,客户端获取Json数据、AJAX 跨域请求 - JSONP获取JSON数据、Ajax 跨域请求 jsonp获取json数据、AJAX 跨域请求-JSONP获取json数据等相关知识的信息别忘了在本站进行查找喔。

本文标签: