先编写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的交互。
分享到:
相关推荐
3. **数据绑定**: EasyUI与后台数据的绑定通常通过JSON进行,如`$("#dg").datagrid({url:"getdata.php",columns:[...],...})`将数据网格与服务器端的"data.php"进行数据交互。 4. **自定义主题**: EasyUI支持更换...
**jQuery 10分钟入门** 在IT行业中,jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。在短短的10分钟内,我们可以快速了解jQuery的核心概念和基本用法。...
**jQuery经典入门教程** jQuery,一个轻量级的JavaScript库,是前端开发中不可或缺的工具。它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互,使得开发者能够更高效地创建交互性强的网页应用。这...
### jQuery 开发 AJAX 入门实例详解 #### 一、简介 AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使...
**jQuery中文入门指南** jQuery是一款广泛应用于Web开发的JavaScript库,它简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。对于初学者来说,jQuery提供了一个更加友好的编程环境,让网页动态化变得更加...
### 不错的JSON入门教程详解 #### 一、JSON简介及应用场景 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。JSON是基于JavaScript的一个子集,它...
在PHP与jQuery结合实现数据交互时,JSON经常作为数据交换格式。 知识点二:PHP与JSON 在PHP中处理JSON数据,可以使用内置的`json_encode()`函数将PHP数组或对象编码为JSON格式的字符串,也可以使用`json_decode()`...
**jQuery 快速入门** jQuery 是一个广泛使用的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画和Ajax交互。这个“jQuery 快速入门”将引导你掌握这个强大工具的基本用法,帮助你高效地进行网页开发。 **...
- **编辑与添加**:通过 `editGridRow` 和 `addGridRow` 方法实现行的编辑和添加。 - **删除**:使用 `delGridRow` 方法删除选中的行。 - **分页**:内置分页功能,只需配置 `rowNum` 和 `pager` 参数即可。 ### 5....
3. **数据文件**:`ratings.dat`和`rate.php`可能涉及数据存储和服务器端处理,对于理解jQuery与服务器通信有帮助。 4. **CSS和库**:`css`目录包含样式文件,`lib`可能包含其他库或jQuery插件,这些在实际项目中必...
jQuery的选择器与CSS选择器类似,但功能更加强大。例如,你可以使用`$("#id")`来选取ID为"id"的元素,`$(".class")`选取所有class为"class"的元素,`$("tag")`选取所有特定标签的元素。 ## 三、jQuery DOM操作 1. ...
**jQuery入门:Ajax技术详解** 在Web开发领域,jQuery是一个非常流行且强大的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。本教程将带你入门jQuery,特别是针对Ajax的使用,让你...
**Ajax和PHP入门** Ajax(Asynchronous JavaScript and XML)与PHP是Web开发中的两种核心技术,它们结合使用可以创建出交互性更强、用户体验更佳的网页应用。本教程将引导初学者从零开始学习Ajax和PHP的集成应用。 ...
**jQuery入门实例——深入理解AJAX应用** 在Web开发领域,jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。本实例将聚焦于jQuery中的AJAX功能,帮助初学者理解如何...
DWR是一种JavaScript库,允许JavaScript代码在客户端与Java服务器端进行直接通信,实现Web应用的实时更新。它简化了异步通信的过程,使得开发者可以像调用本地方法一样调用服务器端的Java方法。DWR的主要特点包括...
"jQuery入门教程.pdf"是学习jQuery的基础材料,它将详细介绍jQuery的基本概念、用法和实例,帮助初学者快速上手。此外,官方文档(api.jquery.com)和在线教程(如W3Schools、MDN等)也是很好的学习资源。 总的来说...
### jQuery简单入门与Drupal主函数钩子:hook_menu() #### jQuery简介 jQuery 是一款轻量级的 JavaScript 库,极大地简化了 HTML 文档遍历、事件处理、动画以及 Ajax 交互等常见操作。由于它的易用性和兼容性,...