`
天梯梦
  • 浏览: 13732784 次
  • 性别: Icon_minigender_2
  • 来自: 洛杉矶
社区版块
存档分类
最新评论

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的交互。

分享到:
评论

相关推荐

    Jquery从入门到精通

    3. **数据绑定**: EasyUI与后台数据的绑定通常通过JSON进行,如`$("#dg").datagrid({url:"getdata.php",columns:[...],...})`将数据网格与服务器端的"data.php"进行数据交互。 4. **自定义主题**: EasyUI支持更换...

    jquery-10分钟入门

    **jQuery 10分钟入门** 在IT行业中,jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。在短短的10分钟内,我们可以快速了解jQuery的核心概念和基本用法。...

    jQuery经典入门教程

    **jQuery经典入门教程** jQuery,一个轻量级的JavaScript库,是前端开发中不可或缺的工具。它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互,使得开发者能够更高效地创建交互性强的网页应用。这...

    jquery开发ajax入门实例

    ### jQuery 开发 AJAX 入门实例详解 #### 一、简介 AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使...

    jQuery中文入门指南 要学习JQuery从这里开始吧

    **jQuery中文入门指南** jQuery是一款广泛应用于Web开发的JavaScript库,它简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。对于初学者来说,jQuery提供了一个更加友好的编程环境,让网页动态化变得更加...

    不错的JSON入门教程

    ### 不错的JSON入门教程详解 #### 一、JSON简介及应用场景 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。JSON是基于JavaScript的一个子集,它...

    PHP+JQUERY操作JSON实例

    在PHP与jQuery结合实现数据交互时,JSON经常作为数据交换格式。 知识点二:PHP与JSON 在PHP中处理JSON数据,可以使用内置的`json_encode()`函数将PHP数组或对象编码为JSON格式的字符串,也可以使用`json_decode()`...

    jquery快速入门

    **jQuery 快速入门** jQuery 是一个广泛使用的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画和Ajax交互。这个“jQuery 快速入门”将引导你掌握这个强大工具的基本用法,帮助你高效地进行网页开发。 **...

    jquery Grid Demo

    - **编辑与添加**:通过 `editGridRow` 和 `addGridRow` 方法实现行的编辑和添加。 - **删除**:使用 `delGridRow` 方法删除选中的行。 - **分页**:内置分页功能,只需配置 `rowNum` 和 `pager` 参数即可。 ### 5....

    JQuery入门

    3. **数据文件**:`ratings.dat`和`rate.php`可能涉及数据存储和服务器端处理,对于理解jQuery与服务器通信有帮助。 4. **CSS和库**:`css`目录包含样式文件,`lib`可能包含其他库或jQuery插件,这些在实际项目中必...

    JQUERY入门书籍

    jQuery的选择器与CSS选择器类似,但功能更加强大。例如,你可以使用`$("#id")`来选取ID为"id"的元素,`$(".class")`选取所有class为"class"的元素,`$("tag")`选取所有特定标签的元素。 ## 三、jQuery DOM操作 1. ...

    jquery入门

    **jQuery入门:Ajax技术详解** 在Web开发领域,jQuery是一个非常流行且强大的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。本教程将带你入门jQuery,特别是针对Ajax的使用,让你...

    Ajax和PHP入门

    **Ajax和PHP入门** Ajax(Asynchronous JavaScript and XML)与PHP是Web开发中的两种核心技术,它们结合使用可以创建出交互性更强、用户体验更佳的网页应用。本教程将引导初学者从零开始学习Ajax和PHP的集成应用。 ...

    jquery 入门实例

    **jQuery入门实例——深入理解AJAX应用** 在Web开发领域,jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。本实例将聚焦于jQuery中的AJAX功能,帮助初学者理解如何...

    dwr+ajax+jquery入门ppt

    DWR是一种JavaScript库,允许JavaScript代码在客户端与Java服务器端进行直接通信,实现Web应用的实时更新。它简化了异步通信的过程,使得开发者可以像调用本地方法一样调用服务器端的Java方法。DWR的主要特点包括...

    jQuery基础教程(第二版)

    "jQuery入门教程.pdf"是学习jQuery的基础材料,它将详细介绍jQuery的基本概念、用法和实例,帮助初学者快速上手。此外,官方文档(api.jquery.com)和在线教程(如W3Schools、MDN等)也是很好的学习资源。 总的来说...

    jquery简单入门

    ### jQuery简单入门与Drupal主函数钩子:hook_menu() #### jQuery简介 jQuery 是一款轻量级的 JavaScript 库,极大地简化了 HTML 文档遍历、事件处理、动画以及 Ajax 交互等常见操作。由于它的易用性和兼容性,...

Global site tag (gtag.js) - Google Analytics