JSON jquery 与php 入门

先编写json.php：

<?php
echo json_encode(array('foo' => 'bar'));
?>

再编写json.htm：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$.getJSON('/json.php', function(data){
alert(data.foo);
});
</script>

把两个文件放到根目录下，运行http://localhost/json.htm，就能看到效果了。

上面的例子没有什么难度，下面尝试一下在跨域情况下的效果，

编写C:\WINDOWS\system32\drivers\etc\hosts文件，加入如下映射：

127.0.0.1 www.foobar.com

修改json.htm的内容：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$.getJSON('http://www.foobar.com/json.php', function(data){
alert(data.foo);
});
</script>

此时，重启浏览器后再浏览http://localhost/json.htm，程序不会运行，会出现Permission denied错误。

这是因为由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源。

如果想规避跨域问题，可以通过使用html的script标记来进行跨域请求，并在响应中返回要执行的script代码。此技术的一种实际应用方式被称为JSONP，Remote JSON - JSONP 一文对其原理做了介绍。

先修改json.htm的内容：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$.getJSON('http://www.foobar.com/json.php?callback=?', function(data){
alert(data.foo);
});
</script>

再修改json.php的内容：

<?php
echo $_GET['callback'], '(', json_encode(array('foo' => 'bar')), ')';
?>

此时，如果再浏览json.htm，就会发现即便是跨域，程序也能正常运行。

有了callback=?后，JQuery就会知道你要进行一次JSONP请求，它会自动生成一个回调函数的名字，然后替换callback=?中的问号。callback并不是必须的命名规则，而只是客户端和服务端之间的一种约定，比如说在FlickrAPI 里，使用的就不是callback，而是jsoncallback。不管使用什么命名，最后不过是生成一种function_name(json_data)的调用形式而已。

当然你也可以使用下面的方式

   $.ajax({type: "post",                                                //使用post方法访问后台dataType: "json",                                        //返回json格式的数据url: "test.php",                                             //要访问的后台地址data: "id=" + $(this).val(),                           //要发送的数据complete :function(){$("#load").hide();},   //AJAX请求完成时隐藏loading提示success: function(msg){//msg为返回的数据，在这里做数据绑定     }});

附件是两个实例，一个是生成JSON XML WORD EXCEL 或者数据库备份的 php类，另一个是通过jquery的php与JSON的交互。

JSON jquery 与php 入门相关推荐

《jQuery与JavaScript入门经典》——第 1 章　动态Web编程简介 1.1理解Web服务器浏览器范式...
本节书摘来自异步社区<jQuery与JavaScript入门经典>一书中的第1章,第1.1节,作者:[美]Brad Dayley著,更多章节内容可以访问云栖社区"异步社区&quo ...
《jQuery与JavaScript入门经典》——2.6　小结
本节书摘来自异步社区<jQuery与JavaScript入门经典>一书中的第2章,第2.6节,作者:[美]Brad Dayley著,更多章节内容可以访问云栖社区"异步社区&quo ...
AJAX+json+jquery实现预加载瀑布流布局
AJAX+json+jquery实现预加载瀑布流布局转载于:https://www.cnblogs.com/zhujiabin/p/4860954.html
jQuery零基础入门——（三）层级选择器
2019独角兽企业重金招聘Python工程师标准>>> <jQuery零基础入门>系列博文是在廖雪峰老师的博文基础上,补充了个人的理解和日常遇到的点,用我的理解表述出来, ...
linux json 写sql注入,sql注入之AJAX（SQL Injection (AJAX/JSON/jQuery)）
sql注入之AJAX(SQL Injection (AJAX/JSON/jQuery)) 0x1 网上搜下没有关于ajax的sql注入文章,这里简单写一下抛砖引玉. 原理自己百度,这里简单说下: 通过 ...
《jQuery Mobile快速入门》—— 1.6　可主题化的设计
本节书摘来异步社区<jQuery Mobile快速入门>一书中的第1章,第1.6节,作者:[美]Brad Broulik,更多章节内容可以访问云栖社区"异步社区"公众号 ...
JQuery基础快速入门（超级详细）
JQuery基础学习 JQuery概念快速入门 JQuery对象和JS对象区别与转换选择器 1.基本操作的学习 2.分类 2.1基本选择器 2.2 层级选择器 2.3属性选择器 2.4过滤选择器 ...
jquery mobile快速入门_【K些项目】学透jquery，11个国内最新项目资料
对代码.编程感兴趣的可以关注老K玩代码和我交流! " jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaSc ...
jQuery的jsTree入门使用
官网下载及文档:https://www.jstree.com/ 一. 介绍 jsTree是jQuery插件,它提供交互式树.在MIT许可下,它是完全免费的.开源的和分布式的. jsTree具有可扩展性 ...

JSON jquery 与php 入门

JSON jquery 与php 入门相关推荐

最新文章

热门文章