json

最新推荐文章于 2023-02-22 10:01:33 发布
最新推荐文章于 2023-02-22 10:01:33 发布
阅读量509 收藏
点赞数
分类专栏： json

一．apache配置多域名

在apache的conf目录下找到httpd.conf，然后在该文件最后增加如下内容：

# 声明使用虚拟主机过滤规则

NameVirtualHost*:80

#虚拟主机localhost

<VirtualHost*:80>

ServerName  localhost

DocumentRoot"D:\xampp\htdocs\www"

</VirtualHost>

#虚拟主机test.mw.com

<VirtualHost*:80>

ServerName  test.mw.com

DocumentRoot"D:\xampp\htdocs\test.mw.com"

</VirtualHost>

其中第一个是保证原有的localhost还可以继续工作，第二个为新加域名test.mw.com。

然后再修改host文件（在C:\Windows\System32\drivers\etc\）

增加：

#  test.mw.com

127.0.0.1test.mw.com

注意修改httpd.conf后要重启下apache服务。

将《JSON进阶第二篇 AJAX方式传递JSON数据》文中的json2.php拷贝到D:\xampp\htdocs\test.mw.com目录中再在浏览器中输入网址http://test.mw.com/json2.php

运行结果如下：

在浏览器中能看到如上所示的JSON字符串说明已经成功为apache增加了新的域名，接下来就来体验下JSON的跨域名问题。

将json2.html中“$.post("json2.php", {}, function(data){”的“json2.php”改成“http://test.mw.com/json2.php”表示我们要引用test.mw.com域名下的json2.php文件。然后在json2.html中点击按钮，可以发现没任何效果。

用Firefox的Firebug查看点击按钮后AJAX响应的详细过程，可以看到AJAX请求信息已经发送到服务器上了（就是那个127.0.0.1:80），但因为安全性问题，服务器返回的数据被屏蔽了——这就是大名鼎鼎的跨域问题。

二．JSONP——解决JSON跨域问题

使用JSONP(JSON with Padding)就可以解决JSON的跨域问题，JSONP的原理可以访问http://zh.wikipedia.org/zh-cn/JSONP，简单的说就是利用了<script>标签拥有的开放策略（相对于同域策略）。下面介绍如何使用JSONP。

JSONP的使用分为二步：

第一将html文件中的

$.post("http://test.mw.com/json2.php",{}, function(data){

改成

$.getJSON("http://test.mw.com/json2.php?format=json&jsoncallback=?",{}, function(data){

第二将json2.php最后的

echo$article_json;

改成

echo$_REQUEST['jsoncallback'] . "(" . $article_json . ")";

修改这二个地方后就可以解决JSON的跨域问题了。

下面也给出完整的示例程序，分为json2.php和json2.html， json2.html上有个按钮，按下后将发送AJAX请求得到json2.php返回的跨域JSON数据。注意和上一篇《JSON进阶第二篇 AJAX方式传递JSON数据》文中的代码进行比较。

1．Json2.php

[php] view plain copy print ?
  1. <?php 
  2. // by MoreWindows( http://blog.csdn.net/MoreWindows ) 
  3. $article_array = array( 
  4.     array( 
  5.         "id"=>"001", 
  6.         "title"=>"PHP访问MySql数据库 初级篇",  
  7.         "link"=>"http://blog.csdn.net/morewindows/article/details/7102362" 
  8.     ), 
  9.     array( 
  10.         "id"=>"001", 
  11.         "title"=>"PHP访问MySql数据库 中级篇 Smarty技术",  
  12.         "link"=>"http://blog.csdn.net/morewindows/article/details/7094642" 
  13.     ), 
  14.     array( 
  15.         "id"=>"001", 
  16.         "title"=>"PHP访问MySql数据库 高级篇 AJAX技术",  
  17.         "link"=>"http://blog.csdn.net/morewindows/article/details/7086524" 
  18.     ), 
  19. ); 
  20. $article_json = json_encode($article_array); 
  21.  
  22. //echo $article_json; 
  23. echo $_REQUEST['jsoncallback'] . "(" . $article_json . ")"; 
  24. ?>  
<?php
// by MoreWindows( http://blog.csdn.net/MoreWindows )
$article_array = array(
	array(
		"id"=>"001",
		"title"=>"PHP访问MySql数据库 初级篇", 
		"link"=>"http://blog.csdn.net/morewindows/article/details/7102362"
	),
	array(
		"id"=>"001",
		"title"=>"PHP访问MySql数据库 中级篇 Smarty技术", 
		"link"=>"http://blog.csdn.net/morewindows/article/details/7094642"
	),
	array(
		"id"=>"001",
		"title"=>"PHP访问MySql数据库 高级篇 AJAX技术", 
		"link"=>"http://blog.csdn.net/morewindows/article/details/7086524"
	),
);
$article_json = json_encode($article_array);

//echo $article_json;
echo $_REQUEST['jsoncallback'] . "(" . $article_json . ")";
?>

2．Json2.html    // by MoreWindows( http://blog.csdn.net/MoreWindows )

[html] view plain copy print ?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <title>ajax方式请求跨域的json数据</title> 
  5. <script type="text/javascript" src="../jquery-1.7.min.js"></script> 
  6. <script type="text/javascript"> 
  7. //显示提示 
  8. function OnMouseEnterDivInfo(thisObj, title) 
  9. { 
  10.     $("#article_link").css("position","absolute"); 
  11.     $("#article_link").css("left","20px"); 
  12.     $("#article_link").css("top",$(thisObj).offset().top + $(thisObj).height()); 
  13.     $("#article_link").html("链接地址" + title); 
  14.     $("#article_link").slideDown("fast"); 
  15.     $(thisObj).css("background-color","red");    
  16. } 
  17. //隐藏提示 
  18. function OnMouseLeaveDivInfo(thisObj) 
  19. { 
  20.     $("#article_link").hide(); 
  21.     $(thisObj).css("background-color","yellow"); 
  22. }   
  23. //jquery通过AJAX方式得到JSON数据 
  24. $(document).ready(function(){ 
  25.     $("#GetDataBtn").click(function(){ 
  26.         //$.post("http://test.mw.com/json2.php", {}, function(data){   
  27.         $.getJSON("http://test.mw.com/json2.php?format=json&jsoncallback=?", {}, function(data){   
  28.             var g_jsonstr = eval(data); 
  29.             var ilen = g_jsonstr.length; 
  30.             var detailhtml = ""; 
  31.             for (var i = 0; i < ilen; i++) 
  32.             { 
  33.                 var divhtml = '<div id=\"div_' + i + '\"  onmouseenter=\"OnMouseEnterDivInfo(this, \' '+ g_jsonstr[i]['link'] + '\');\" onmouseleave=\"OnMouseLeaveDivInfo(this);\" >'; 
  34.                 divhtml += '<h1>' + g_jsonstr[i]['title'] + '</h1>'; 
  35.                 divhtml += '</div>'; 
  36.                 detailhtml += divhtml; 
  37.             } 
  38.             $("#detail").html(detailhtml);//生成新的标题区域 
  39.             $("#detail").slideDown("slow"); 
  40.         }); 
  41.     }); 
  42. }); 
  43. </script> 
  44. <style type="text/css"> 
  45. div 
  46. { 
  47.     font-family:sans-serif; 
  48. } 
  49. </style> 
  50. </head>    
  51. <body> 
  52. <input type="button" id="GetDataBtn" value="生成数据" /> 
  53. <div id="detail"> 
  54. </div> 
  55. <p><span id="article_link" style="display:none;z-index:100"></span></p> 
  56. </body> 
  57. </html>  
<!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>ajax方式请求跨域的json数据</title>
<script type="text/javascript" src="../jquery-1.7.min.js"></script>
<script type="text/javascript">
//显示提示
function OnMouseEnterDivInfo(thisObj, title)
{
    $("#article_link").css("position","absolute");
    $("#article_link").css("left","20px");
    $("#article_link").css("top",$(thisObj).offset().top + $(thisObj).height());
    $("#article_link").html("链接地址" + title);
    $("#article_link").slideDown("fast");
    $(thisObj).css("background-color","red");	
}
//隐藏提示
function OnMouseLeaveDivInfo(thisObj)
{
    $("#article_link").hide();
    $(thisObj).css("background-color","yellow");
}  
//jquery通过AJAX方式得到JSON数据
$(document).ready(function(){
    $("#GetDataBtn").click(function(){
        //$.post("http://test.mw.com/json2.php", {}, function(data){  
        $.getJSON("http://test.mw.com/json2.php?format=json&jsoncallback=?", {}, function(data){  
            var g_jsonstr = eval(data);
            var ilen = g_jsonstr.length;
            var detailhtml = "";
            for (var i = 0; i < ilen; i++)
            {
                var divhtml = '<div id=\"div_' + i + '\"  οnmοuseenter=\"OnMouseEnterDivInfo(this, \' '+ g_jsonstr[i]['link'] + '\');\" οnmοuseleave=\"OnMouseLeaveDivInfo(this);\" >';
                divhtml += '<h1>' + g_jsonstr[i]['title'] + '</h1>';
                divhtml += '</div>';
                detailhtml += divhtml;
            }
            $("#detail").html(detailhtml);//生成新的标题区域
            $("#detail").slideDown("slow");
        });
    });
});
</script>
<style type="text/css">
div
{
	font-family:sans-serif;
}
</style>
</head>	
<body>
<input type="button" id="GetDataBtn" value="生成数据" />
<div id="detail">
</div>
<p><span id="article_link" style="display:none;z-index:100"></span></p>
</body>
</html>

再用Firefox的Firebug查看点击按钮后AJAX响应的详细过程，可以发现已经可以收到跨域后的JSON数据了。

有兴趣的筒子可以再试试这种方式：

将http://test.mw.com/json2.php的

echo$_REQUEST['jsoncallback'] . "(" . $article_json . ")";

换成

echo"ShowData($article_json)";

再将json2.html的

$(document).ready(function(){... }

换成

[javascript] view plain copy print ?
  1. function ShowData(data) 
  2. { 
  3.     var g_jsonstr = eval(data); 
  4.     var ilen = g_jsonstr.length; 
  5.     var detailhtml = ""; 
  6.     for (var i = 0; i < ilen; i++) 
  7.     { 
  8.         var divhtml = '<div id=\"div_' + i + '\"  οnmοuseenter=\"OnMouseEnterDivInfo(this, \' '+ g_jsonstr[i]['link'] + '\');\" οnmοuseleave=\"OnMouseLeaveDivInfo(this);\" >'; 
  9.         divhtml += '<h1>' + g_jsonstr[i]['title'] + '</h1>'; 
  10.         divhtml += '</div>'; 
  11.         detailhtml += divhtml; 
  12.     } 
  13.     $("#detail").html(detailhtml);//生成新的标题区域 
  14.     $("#detail").slideDown("slow"); 
  15. } 
  16. //jquery通过AJAX方式得到JSON数据 
  17. $(document).ready(function(){ 
  18.     $("#GetDataBtn").click(function(){ 
  19.         //jsonp原理--利用<script>标签的开放策略 
  20.         var script = document.createElement('script'); 
  21.         script.setAttribute('src', "http://test.mw.com/json2.php"); 
  22.         document.getElementsByTagName('head')[0].appendChild(script); 
  23. }  
function ShowData(data)
{
    var g_jsonstr = eval(data);
    var ilen = g_jsonstr.length;
    var detailhtml = "";
    for (var i = 0; i < ilen; i++)
    {
        var divhtml = '<div id=\"div_' + i + '\"  οnmοuseenter=\"OnMouseEnterDivInfo(this, \' '+ g_jsonstr[i]['link'] + '\');\" οnmοuseleave=\"OnMouseLeaveDivInfo(this);\" >';
        divhtml += '<h1>' + g_jsonstr[i]['title'] + '</h1>';
        divhtml += '</div>';
        detailhtml += divhtml;
    }
    $("#detail").html(detailhtml);//生成新的标题区域
    $("#detail").slideDown("slow");
}
//jquery通过AJAX方式得到JSON数据
$(document).ready(function(){
    $("#GetDataBtn").click(function(){
        //jsonp原理--利用<script>标签的开放策略
        var script = document.createElement('script');
        script.setAttribute('src', "http://test.mw.com/json2.php");
        document.getElementsByTagName('head')[0].appendChild(script);
}

来试试，同样可以得到数据的(有一点不足——此时鼠标移动到标题是不会触发提示的)。

另外，关于JSON有个小小的问题要注意下：

[php] view plain copy print ?
  1. $array1 = array("a", "b"); 
  2. $array2 = array('001'=>"a", '002'=>"b"); 
  3. $json1 = json_encode($array1); 
  4. $json2 = json_encode($array2); 
  5. echo $json1 . "<br />"; 
  6. echo $json2 . "<br />";  
$array1 = array("a", "b");
$array2 = array('001'=>"a", '002'=>"b");
$json1 = json_encode($array1);
$json2 = json_encode($array2);
echo $json1 . "<br />";
echo $json2 . "<br />";

会输出

["a","b"]

{"001":"a","002":"b"}

这说明，$json1是数组，而且$json2是对象。将$json1和$json2传到js代码中，$json1.length是合法的，但$json2.length是未定义的。读者可以对比本篇json2.php中数组$article_array与上一篇的区别。

至此，JSON进阶三篇全部完成。下面列出目录，以供参考：

1．《JSON进阶第一篇 在PHP与javascript 中使用JSON》

2．《JSON进阶第二篇 AJAX方式传递JSON数据》

3．《JSON进阶第三篇 apache多域名及JSON的跨域问题（JSONP）》

转载请标明出处，原文地址：http://blog.csdn.net/morewindows/article/details/7235992

z313731418
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android获取Apache服务器的JSON格式的数据并显示到Text View里
2301_77245438的博客
06-20 493
在AndroidManifest.xml中引入network_security_config.xml文件，并且加入声明INTERNET 权限。在 xml文件夹添加一个network_security_config.xml文件并且写入。3.创建一个Persons类，双击打开Persons类，在空白处右键，找到生成选项。6.点击ok ,生成Persons实体类的具体字段。（2）解析方法：parseJsonWithGSON。9.Activity_main.xml文件布局如下。11.接下来让我们看看结果如何。
使用Apache HttpClient发送和接收JSON格式的数据
热门推荐
你好，我们在哪里见过啊！
06-12 1万+
JSON格式数据的优点：　   A.数据格式比较简单，易于读写，格式都是压缩的，占用带宽小，是非常轻量级的数据格式；　　B.易于解析，客户端JavaScript可以简单的通过eval()进行JSON数据的读取；　　C.支持多种语言，其中在Java端有丰富的工具操作和解析JSON；　　D.因为JSON格式能直接为服务器端代码使用，大大简化了服务器端和客户端的代码开发量，且完成任务不变，并且易于维护；...
JSON进阶第三篇 apache多域名及JSON的跨域问题（JSONP）
MoreWindows Blog
02-06 1万+
本文先介绍如何为apache配置多域名，然后再用JSONP(JSON with Padding)来解决JSON的跨域问题。阅读本文之前，推荐先参阅《JSON进阶第二篇AJAX方式传递JSON数据》。 一．apache配置多域名在apache的conf目录下找到httpd.conf，然后在该文件最后增加如下内容：# 声明使用虚拟主机过滤规则NameVirtualHost*:80#虚拟主机localh
Apache如何解决跨域问题
小渣渣
12-07 6004
缺点：安全性缺失。公交车，谁都能访问。相当于完全放弃跨域控制。 且无法发送登陆凭证，发送cookie等依然会被拦截1.修改apache/conf/httpd.conf 文件找到 #LoadModule headers_module modules/mod_headers.so,把#注释符去掉，目的是开启apache头信息自定义模块2.找到你的虚拟主机文件 注意是被跨域的网站的 具体内容是这样的文件也有可能是别的样子的，但是 不变
JSON工具类封装与解析
Sonder-ZH的博客
05-23 1170
package com.***.util;import org.apache.commons.lang3.StringUtils;import org.codehaus.jackson.map.DeserializationConfig;import org.codehaus.jackson.map.ObjectMapper;import org.codehaus.jackson.map.Seri...
apache json解析开源项目
01-18
apache的json解析工具类，非常方便实用，如果编写java项目可以直接使用它来解析json数据。
labview JSON包
01-27
由簇数据类型生成处理JSON
PowerBI 主题Json文件
10-01
PowerBI 主题Json文件
echarts 全国地图json数据
08-25
echarts 全国地图json数据
四川省地图数据json
06-09
四川省地图数据json
国际电话区号表json
05-22
国际电话区号表json
JSON
超域的博客
04-19 97
JSON 在线工具 https://www.sojson.com/ http://www.w3school.com.cn/json/ http://www.runoob.com/json/json-tutorial.html JSON(JavaScriptObjectNotation) 最初是给js准备的，用于交换信息，和xml功能一样 轻量级的数据交换格式，基于ECMAScript json格式...
Json的作用域
qq_73767908的博客
02-22 131
作用域是JS中一个很基础但是很重要的概念，面试中也经常出现，本文会详细深入的讲解这个概念及其他相关的概念，包括声明提升，块级作用域，作用域链及作用域链延长等问题。 什么是作用域 第一个问题就是我们要弄清楚什么是作用域，这不是JS独有的概念，而是编程领域中通用的一个概念。我们以下面这个语句 let x = 1; 为例: 这一个简单的语句其实包含了几个基本的概念: 变量(variable)：这里x就是一个变量，是用来指代一个值的符号。 值(value)：就是具体的数据，可以是数字，字符串，
Apache ab在post请求中用Json传参时候的注意事项
Tree的代码窝
07-12 6669
1.-p后面带的参数文件，最好不要用记事本自己建，用Notepad++等软件来建立.txt格式的文件，然后填入Json格式的参数；2.注意-T的参数和-p要同时出现，且-T的参数要符合-p的文件类型，如果是Json类型的参数，content-type要设置成application/json;3.还是要特别强调一下，一定不要把文件里面的Json格式写错（毕竟我之前就是因为写错了这个格式，浪费了好多时...
Apache Hive 加载JSON数据与JSON解析
猫君之上的博客
07-21 427
首先Hive提供了三种方案（应用于不同的场景）： 建表JsonSerDe 内置函数get_json_object 内置函数json_tuple 1.使用JsonSerDe创建表加载JSON文件 注意此种方式需要满足的条件： json文件必须是形如如下格式： 下面 xxx可以是对象，也可以是数组 { key1:xxxx, key2:xx, key3,xxx } 另外...
Apache 自定义 JSON 格式日志
qingshanli1988的专栏
01-10 1316
原文出处： http://blog.mreald.com 1 2 3 4 5 6 7 cat httpd.conf     LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\"" combined     Log
apache httpclient HTTPS发送JSON调用接口实例
guoxiaozhuang4的博客
03-28 2135
1.目的：调用第三方接口2.协议：https3.报文格式：JSON4.依赖jar如下 &lt;!-- httpclient --&gt; &lt;dependency&gt; &lt;groupId&gt;org.apache.httpcomponents&lt;/groupId&gt; &lt;artifactId&gt;httpclient&lt;/artifactId&gt...
Tomcat和Apache部署XML,JSON文件
Sept23的博客
09-02 2843
Tomcat：需要在Tomcat文件夹下面的webapps文件夹里面新建文件夹,eg:A，在新建的文件夹A下面存储json,xml等文件 访问方法：127.0.0.1:8080/A/XX.xml Apache:在httpd下面直接存储XML等文件就好。 访问方法：127.0.0.1/xx.xml
json buffer
最新发布
04-12
JSON Buffer是指用于存储和传输JSON数据的缓冲区。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于前后端之间的数据传输。JSON Buffer可以是一个字节数组或者字符串，用于在内存中暂存JSON...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值