JSONP处理跨域请求及WEB中JSON处理

Ajax中默认是不允许跨域访问的,意思就是Ajax不能请求其他服务器的数据。用jsonp(json with padding,翻译是填充式json,参数式json)可以间接解决跨域问题。因为WEB端也经常需要处理JSON数据,记录一下WEB端接收JSON后的一些处理方法。


getJSON处理跨域方法

JQuery封装的Ajax方法很好用,直接用getJSON来实现跨域比较直观,用的就是JSONP。

WEB端代码(只能get)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<head lang="en">
<meta charset="UTF-8">
<title>getJSON测试</title>
<script src="../JQuery/jquery-2.2.2.min.js"></script>
<script>
$(document).ready(function(){
//本服务器
$("#btn1").click(function(){
$.getJSON("server.php", function (data) {
alert(data);
alert(data.name); //获取name
});
});
//其他服务器: 跨域.
$("#btn2").click(function(){
var url ="http://localhost:8088/server.php?jsoncallback=?";
$.getJSON(url,function(data){
alert(data.name+"\n"+data.age);
});
});
});
</script>
</head>
<body>
<button type="button" id="btn1">getJSON本服务器</button>
<button type="button" id="btn2">getJSON跨域服务器</button>
</body>

本地开2个服务器,另一个端口设为8088。
跨域访问要求格式:
xx.php?参数名=?

对应的服务器端输出json格式(带括号):
参数名对应值 (json数据)

对应服务器端代码:

1
2
3
4
5
6
7
8
9
<?php
$arr = array("name"=>"xuneng","age"=>"12");
if(isset($_GET['jsoncallback'])){
//跨域
echo $_GET['jsoncallback']."(".json_encode($arr).")";
}else{
echo json_encode($arr);
}

JS中JSON数据处理方法

JSON ==> 字符串

  • 方法:eval
    var jsonObj = eval(‘(‘ + str + ‘)’);
    JSON中引号可以单双通用,这个最常用。
  • 方法:parseJSON
    jQuery.parseJSON(str);
    只支持标准JSON
  • 方法:parse
    JSON.parse(str);
    只支持标准JSON

字符串 ==> JSON

  • 方法:toJSONString
    obj.toJSONString()
    JSON中引号可以单双通用,这个最常用。
  • 方法:stringify
    JSON.stringify(obj);

JSON读取与遍历

用点号,下标进行读取。

直接上一段综合代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>JSON处理</title>
<script src="../jquery-2.2.2.min.js"></script>
<script>
$(function () {
$("#myBtn1").click(function () {
//字符串==>JSON
var str = '{ "username": "John" }'; //能解析json, 引号单双无所谓.
var jsonObj = eval('(' + str + ')');
alert(jsonObj.username);
/*
这两者只支持标准的JSON格式
jQuery.parseJSON(str)
JSON.parse(str);
要解析跟不标准的JSON, 可以用JQuery扩展.
*/
});
$("#myBtn2").click(function () {
//JSON==>字符串
//obj.toJSONString();
//或者JSON.stringify(obj);
var jsonObj = {"username": "Tim"}; //这就是JSON
alert(jsonObj.username);
alert(jsonObj.toString());
alert(JSON.stringify(jsonObj));
});
$("#myBtn3").click(function () {
//JSON读取
var jsonObj = {
root: [{'name': '6200', 'value': '0'}, {'name': '6101', 'value': 'xa'}, {
'name': '6102',
'value': 'beijing'
}, {'name': '6103', 'value': 'haerbin'}]
};
//简单读取
alert(jsonObj.root[0].name);
//循环读取
$.each(jsonObj.root, function(index,item){
$("#jsonData").append(
"<p>" +index+ " : " +item.name+ "</p><hr/>"
)
});
});
});
</script>
</head>
<body>
<button id="myBtn1">string=>JSON</button>
<button id="myBtn2">JSON=>string</button>
<button id="myBtn3">JSON数据解析</button>
<p id="jsonData">数据</p>
</body>
</html>

结语

以上记录一些web端关于JSON相关的东西。有些通过学习JavaScript与JQuery文档记录。

转载请注明出处,有疑问欢迎留言!