ajax怎么接受json数据

  • 原创
  • |
  • 浏览:88513
  • |
  • 更新:

以前做前端开发,异步加载数据,基本上用的是xml格式来传输,但自从json数据出来后,大受欢迎,现在大多数都改用json来传输数据了,相对xml格式,他可以省却解析这一步,json数据返回,在JS脚本里,是可以直接当做对象数据来操作的。

下面看下,ajax是怎样接受json格式数据的。

ajax怎么接受json数据

工具/原料

  • Jquery插件

方法/步骤

  1. 1

    首先引入Jquery插件库,当然这个不是必须的,但引入一个脚本库,可以为我们省却不少重复麻烦的工作。

    (如果你没用过这个Jquery, 可是百度‘jquery',然后下载脚本文件回来,放到自己的项目里的脚本文件夹,最后引入就行了)

    ajax怎么接受json数据
  2. 2

    然后用 Jquery的ajax请求,去加载服务器的数据。

    需要做一些额外的设置,dataType设置成 json,这个意思是说 ’服务器的数据返回的是json格式数据,需要帮我把数据转换成对象‘

    ajax怎么接受json数据
  3. 3

    再看下 ajax请求的 服务器端 的代码是怎样的,这里以php代码为例。

    这里关键是把返回的header设置成 text/json格式,他表明的是服务器返回的数据是文本(字符串),而且是一个json格式的文本数据。

    json_encode在php里,主要是把一个对象,或者数组,转化成一个json格式的字符串。

    这里输出的是要一个标准格式的json数据字符串,如果转化不了json数据的,在前端脚本里是会有问题的。

    ajax怎么接受json数据
  4. 4

    前端调用,后端响应返回的数据都有了,我们试着调用一下看。

    点击触发ajax的按钮,我们可以看到,服务器有数据返回了。

    由于后台php代码里设置成 text/json格式输出了,所以这里的返回有个 json的项。

    这里的数据是在FireBug看(firefox的插件,做前端开发的都知道)

    ajax怎么接受json数据
  5. 5

    看下 json项的数据,返回的数据已经可以看到是一个对象了,可以直接在js脚本里调用了。而不像xml格式,还要解析这个xml。

    ajax怎么接受json数据
  6. 6

    改下代码,看下js是否可以直接调用返回的数据?

    可以看到,alert弹出的数据,就是返回的数据,经过 jquery转换了一下,后端返回的json字符串,已经成功转换成js的对象了。

    ajax怎么接受json数据
    ajax怎么接受json数据
    END
  7. 6
    此文章非法爬取自百度经验
经验内容仅供参考,如果您需解决具体问题(尤其法律、医学等领域),建议您详细咨询相关领域专业人士。
作者声明:本篇经验系本人依照真实经历原创,未经许可,谢绝转载。
展开阅读全部