AJAX如何接收JSON数据示例介绍

简介
在我们了解如何使用AJAX返回JSON数据的时候要先明白下列几点
1、 JSON如何来表示对象的
2、 JSON如何来表示数组的


复制代码 代码如下:

var object = { "labId": "1", "labName": "服装" };

通常我们使用如上的方式来表示JSON对象,那么数组呢


复制代码 代码如下:

var array = [{ "labId": "1", "labName": "时尚" }, { "labId": "2", "labName": "服装" }, { "labId": "3", "labName": "手表"}]

数组的话就如上面这样来表示

AJAX如何接收JSON数据
假设JSON数据是这样的:


复制代码 代码如下:

private void GetJSON()
{
sb.Append("[");
sb.Append("{\"artId\":\"1\",\"title\":\"新疆巴楚暴恐案一审宣判:5名被告2人获死刑\",\"content\":\"天山网讯(记者田山报道) 2013年8月12日,新疆喀什地区中级人民法院对巴楚“4?23”暴力恐怖案件中木萨?艾散等5名被告人一审公开开庭审理并当庭宣判,分别以组织、领导恐怖组织罪、非法制造爆炸物罪、故意杀人罪数罪并罚,判处被告人木萨?艾散死刑,剥夺政治权利终身;以参加恐怖组织罪、故意杀人罪数罪并罚,判处被告人热合曼?吾甫尔死刑...\"},");
sb.Append("{\"artId\":\"2\",\"title\":\"国防大学教授称军队房产整顿与谷俊山案有关\",\"content\":\"有军队学者分析,推动军队的廉政建设,尤其是拿下像王守业、谷俊山这样的军队高官,表达了军队和中央顶层的反腐决心。曾任军事科学院政治工作研究所副所长,现为国防大学军队政治工作教研室副主任、教授的公方彬,对军队作风和廉政建设有长期、深入的研究,近日他接受了本刊采访。\"}");
sb.Append("]");
}

第一种:


复制代码 代码如下:

$(".btn").live("click", function () {
$.post("JSON.aspx", { action: "GETJSON" },
function (data) {
//现在data的类型只是string,现在我们把它转换成JSON对象
var json = eval("(" + data + ")");
if (typeof (json) === 'object') {
$(json).each(function (i) {
$("#wrap").append("<div style=\"width:100%; background:#f00;\">第一种</div>"+json[i].artId + " " + json[i].title + "<br/>内容摘要:" + json[i].content);
});
}
}
);
});

第二种:


复制代码 代码如下:

$(".btn").live("click", function () {
$.post("JSON.aspx", { action: "GETJSON" },
function (data) {
$(data).each(function (i) {
$("#wrap").append(data[i].artId + " " + data[i].title + "<br/>内容摘要:" + data[i].content + "<br/>");
});
}, "json"
);
});

我们这里最后设置了一个参数,就是dataType,当你设置json后返回的json字符串传递到客户端就是JSON对象了
由于返回的data数据是一个数组对象,所以对其进行遍历然后获取每一个对象属性值

时间: 2013-08-11

jquery的ajax和getJson跨域获取json数据的实现方法

很多开发人员在使用jquery在前端和服务器端进行数据交互,所以很容易会认为在前端利用jquery就可以读取任何站点的数据了.近日在进行开 发时,因为要和第三方公司的一个项目进行数据的共享,因为考虑多不占用服务器的资源,遂决定直接在html进行数据的读取,不走服务器端进行中转了.然后 正好就遇到了浏览器端跨域访问的问题. 跨域的安全限制都是指浏览器端来说的,服务器端不存在跨域安全限制的问题. 目前浏览器端跨域访问常用的两种方法有两种: 1.通过jQuery的ajax进行跨域,这其实是采用的jso

$.ajax json数据传递方法

前台 复制代码 代码如下: <!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>无标题页&l

jQuery中使用Ajax获取JSON格式数据示例代码

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.JSONM文件中包含了关于"名称"和"值"的信息.有时候我们需要读取JSON格式的数据文件,在jQuery中可以使用Ajax或者 $.getJSON()方法实现. 下面就使用jQuery读取music.txt文件中的JSON数据格式信息. 首先,music.txt中的内容如下: 复制代码 代码如下: [ {"optionKey":"1"

详谈 Jquery Ajax异步处理Json数据.

所谓的Ajax.这里我们讲二种方法 方法一:(微软有自带Ajax框架) 在Asp.net里微软有自己的Ajax框架.就是在页面后台.cs文件里引入 using System.Web.Services 空间 然后定义静态方法(方法前加上 [WebMethod]) [WebMethod] public static string ABC(string ABC) { return ABC; } 好了,现在我们谈谈前台Js怎么处理后台返回的数据吧,可利用Jquery处理返回的纯html,json,Xml

jquery的ajax异步请求接收返回json数据实例

jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以. 代码示例如下: 复制代码 代码如下: $('#send').click(function () {     $.ajax({         type : "GET",         url : "a.php",         dataType : "json

jQuery Ajax异步处理Json数据详解

先我们来看一个官方的实例使用 AJAX 请求来获得 JSON 数据,并输出结果: 复制代码 代码如下: $("button").click(function(){  $.getJSON("demo_ajax_json.js",function(result){    $.each(result, function(i, field){      $("div").append(field + " ");    });  });

Ajax如何传输Json和xml数据

ajax传输xml数据:只要把数据封装成xml格式就可以实现传输,前台js用responseXML接收xml参数,后台读取用流和dom4j来解析 前台页面 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix=&q

jquery序列化form表单使用ajax提交后处理返回的json数据

1.返回json字符串: 复制代码 代码如下: /** 将一个字符串输出到浏览器 */     protected void writeJson(String json) {         PrintWriter pw = null;         try {             servletResponse.setContentType("text/plain;charset=UTF-8");             pw = servletResponse.getWrit

ajax用json实现数据传输

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C.C++.C#.Java.JavaScript.Perl.Python等).这些特性使JSON成为理想的数据交换语言. 易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络传输速率). json简单说就是javascript中的对象和数组,所以这两种结构就是对象和数组两种结构,

浅析ajax请求json数据并用js解析(示例分析)

自从接触了jquery就喜欢上了前端开发,而且深深感受到了前端开发的强大与重要之处.同时也想为asp.net鸣不平,事实上asp.net并没有臃肿,说它臃肿的人无非是那些不了解它的人,可能他们看见过一些asp.net低级程序员在不断往页面里拖控件,然后发现生成的页面中含有大量的垃圾代码,而且几乎把所有的逻辑处理都写在了服务器端,觉得服务器压力太大了.事实上,刚入门asp.net的人会有拖控件的习惯,但是当你再深入你会发现,最终asp.net的开发模式还是跟PHP.jsp等其它web开发模式是一样

ajax请求json数据案例详解

今天有这样一个需求,点击六个大洲,出现对应的一些请求信息,展示在下面,请求请求过后,第二次点击就无需请求. 如图所示:点击北美洲下面出现请求的一些数据 html代码结构: <div class="conSixmap"> <div class="name conmap01" data-name="beimeizhou"> <a href="javascript:void(0)">北美洲<

jquery教程ajax请求json数据示例

复制代码 代码如下: $.ajax({            url: '这个地址要换成你自己的',            data: {S_CourseID: courseid , CurrTime : new Date().getTime()}, //加个时间戳,否则会不自动更新数据            dataType: 'json',            success: function(data)            { if (data != null) { if ( dat

浅析json与jsonp区别及通过ajax获得json数据后格式的转换

有关json与jsonp的区别(json才是目的,jsonp只是手段)介绍如下所示: 一言以蔽之,json返回的是一串数据:而jsonp返回的是脚本代码(包含一个函数调用): JSON其实就是JavaScript中的一个对象,跟var obj={}在质上完全一样,只是在量上可以无限扩展.简单地讲,json其实就是JavaScript中的对象(Object)和数组(Array,其实也是对象)这倆好基友在那儿你嵌我我嵌你地套上n多层,以此模拟出许多复杂的数据结构. json易于人阅读和编写,也易于机

Ajax异步请求JSon数据(图文详解)

上一篇讲了Ajax请求数据text类型,text和html都是处理比较简答的数据,而在编程过程中使用Ajax调用数据的时候,难免要进行逻辑的处理,接受的数据也变的复杂比如数组类型的数据,这时候就需要使用JSON数据类型进行处理,今天就说说,JSON数据请求过程中的一些细节: 我们友情提醒本文所需工具和原料如下: wamp或lamp环境.jquery.js.编辑器 具体方法/步骤请看下面: 1.创建基本的文件结构json_ajax.html和json_ajax.php,下载jquery.js,如图

ajax动态加载json数据并详细解析

效果图 jsp代码 <form > 姓名:<input name="name" type="text"/> 年龄:<input name="age" type="text"/> <input type="button" class="get" value="get提交"/> <input type="bu

Struts2.5 利用Ajax将json数据传值到JSP的实例

AJAX +JSON=>JSP AJAX  AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面. JSON JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.它基于 ECMAScript (w3c制定的js规

ThinkPHP中使用ajax接收json数据的方法

本文实例讲述了ThinkPHP中使用ajax接收json数据的方法.分享给大家供大家参考.具体分析如下: 这里通过ThinkPHP+jquery实现ajax,扩展了下,写了个查询,前台代码如下: 首先需要引入jquery.js,主要代码如下: 复制代码 代码如下: function ajax(id,pic){     //由于ThinkPHP不解析JavaScript里的ThinkPHP常量,所以需要先在这里定义. var URL='__URL__';         $.ajax({     

jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法

效果: json文件: { "books":[ {"id":1,"imgUrl":"images/ly.jpg","price":"45.00","title":"论语","publish":"人民文学出版社","num":"303","desc":

jQuery基于ajax操作json数据简单示例

本文实例讲述了jQuery基于ajax操作json数据的方法.分享给大家供大家参考,具体如下: jQuery Ajax 实例演示 jQuery Ajax 的三种格式,在与后台进行数据交互的时候可以是json格式也可以是xml格式,本人建议将数据转化成json格式. Xml与json的比较 1.可读性 JSON和XML的可读性可谓不相上下,一边是建议的语法,一边是规范的标签形式,很难分出胜负. 2.可扩展性 XML天生有很好的扩展性,JSON当然也有,没有什么是XML能扩展,JSON不能的. 3.