示例代码：
// 基本对象{
"name":"fox",
"age":"18 ",
"sex":"true",
"car":"null"
}
// 数组
[
{
"name":"小小",
"age":"1"
},
{
"name":"大大",
"age":"2"
}
] JSON 解析 JavaScript使用JSON对象
JSON.parse()方法：将JSON字符串转化为JavaScript对象 需要接收
JSON.stringify()方法：将JavaScript对象，转化为JSON字符串 需要接收
IE（8以下）浏览器中没有 JSON 对象，通过导入 JSON2.js 框架即可解决，框架获取地址JSON2.js_github地址
<script type="text/javascript"> var obj = { name:"fox", age:18, skill:"撩妹" };console.log( "原生形式"+obj); //将javaScript对象格式化为JSON字符串 var jsonStr = JSON.stringify(obj); console.log("我是json字符串"+jsonStr);
// 将JSON字符串 格式化为javaScript对象
var jsonObj = JSON.parse(jsonStr);
console.log("我是javaScript对象+jsonObj ");
</script>
需要将内容使用（）括号包裹起来，
var jsonStr1 = '{ "name":"fox","age":18,"skill":"撩妹" }' ; var jsonObj = eval('('+jsonStr1+')'); console.log(jsonObj); console.log(jsonObj.name);json_decode() ： 将json字符串 转化为变量
json_encode() : 将变量转化为‘json’字符串
<?phpheader("Content-Type:text/html;charset=utf-8"); // json字符串 $jsonStr = '{"name":"itcast","age":54,"skill":"Singing"}'; // 字符串转化为php对象 print_r(json_decode($jsonStr)); echo '<br>'; // php数组 $arrayName = array('name'=>'littleFox','age'=>12); // php对象转化为json字符串 print_r(json_encode($arrayName));
使用例子：
json：
[ { "name":"jay", "skill" :"singing", "path" :"images/jay.jpg" } { "name":"ED", "skill" :"singing", "path" :"images/ed.jpg" } ]php:
<?php echo file_get_contents('info/stars.json); ?>html:
<body> <input type="button" value="获取"> </body> <script type="text/javascript"> document.querySelector("#getStars").onclick = function(){ var ajax = new XMLHttpRequest() ; ajax.open('post','getStars.php'); ajax.setRequestHeader("content-type","application/x-www-form-urlencoded"); ajax.send(); ajax.onreadystatechange = function(){ if(ajax.readystate ==4 && ajax.status==200){ // 转化为js对象，不光是数组还是对象都可以使用该方法转化 var strArr = JSON.parse(ajax.responseText); // 这里也方法哦一个table中 var str=""; str+='<table>' for(var i=0;i<strArr.length;i++){ str+='<tr>'; str+='<td>' +strArr[i].name+'</td>'. ; str+='<td>' +strArr[i].skill +'</td>'. ; str+='<td><img src="'+strArr[i].path+'"></td'; str+='</tr>'; } document.body.innerHtml = str ; } } </script>封装一下
// ajax get 五部曲 function ajax_get(url,data) { // 异步对象 var ajax = new XMLHttpRequest(); // url 方法 // 如果是get发送数据 发送的格式为 xxx.php?name=jack&age=18 // 所以 这里 需要拼接 url if (data) { // 如果有值 需要拼接字符串 // 拼接为xxx.php?name=jack&age=18 url+='?'; url+=data; }else{ } ajax.open('get',url); // 发送 ajax.send(); // 注册事件 ajax.onreadystatechange = function () { // 在事件中 获取数据 并修改界面显示 if (ajax.readyState==4&& ajax.status==200) { console.log(ajax.responseText); } } } // ajax_post五部曲 function ajax_post(url,data) { // 异步对象 var ajax = new XMLHttpRequest(); // url 方法 ajax.open('post',url); // 设置 请求报文 ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 发送 if (data) { // 如果 有值 post请求 是在 send中 发送给服务器 ajax.send(data); }else{ ajax.send(); } // 注册事件 ajax.onreadystatechange = function () { // 在事件中 获取数据 并修改界面显示 if (ajax.readyState==4&&ajax.status==200) { console.log(ajax.responseText); } } } // 将 get 跟post 封装到一起 /* 参数1:url 参数2:数据 参数3:请求的方法 参数4:数据成功获取以后 调用的方法 */ function ajax_tool(url,data,method,success) { // 异步对象 var ajax = new XMLHttpRequest(); // get 跟post 需要分别写不同的代码 if (method=='get') { // get请求 if (data) { // 如果有值 url+='?'; url+=data; }else{ } // 设置 方法 以及 url ajax.open(method,url); // send即可 ajax.send(); }else{ // post请求 // post请求 url 是不需要改变 ajax.open(method,url); // 需要设置请求报文 ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 判断data send发送数据 if (data) { // 如果有值 从send发送 ajax.send(data); }else{ // 木有值 直接发送即可 ajax.send(); } } // 注册事件 ajax.onreadystatechange = function () { // 在事件中 获取数据 并修改界面显示 if (ajax.readyState==4&&ajax.status==200) { // console.log(ajax.responseText); // 将 数据 让 外面可以使用 // return ajax.responseText; // 当 onreadystatechange 调用时 说明 数据回来了 // ajax.responseText; // 如果说 外面可以传入一个 function 作为参数 success success(ajax.responseText); } } }使用代码：
get方式：php：
<?php // 获取get提交的数据 echo $_GET['skill']; ?>
相关文章
精彩导读
热门资讯
关注我们
