ajax处理json数据

在php生成json数据(json_decode())

参数为索引数组生成的数据格式为js数组

$fruit = array(‘apple‘,‘banana‘,‘pear‘,‘orange‘);
$fruit_jn = json_encode($fruit);    //[‘apple‘,‘banana‘,‘pear‘,‘orange‘]

  

参数为关联数组生成的数据是json对象格式

$fruit = array(‘a‘=>‘apple‘,‘b‘=>‘banana‘,‘c‘=>‘pear‘,‘d‘=>‘orange‘);
$fruit_jn = json_encode($fruit);//{"a":"apple","b":"banana","c":"pear","d":"orange"}

  

参数为对象生成的数据也是json对象格式,会忽略对象的方法

$animal = array(‘a‘=>array(‘aa‘=>‘cat‘,‘bb‘=>‘pig‘),"c"=>array("cc"=>‘chicken‘,"dd"=>‘duck‘));
echo json_encode($animal);    //{"a":{"aa":"cat","bb":"pig"},"c":{"cc":"chicken","dd":"duck"}}

  

处理json数据

  var info = xhr.responseText;

此时实际上json对象只是一个字符串,因为json对象是作为字符串返回的,所以我们并不能很方便的处理,那么我们如何把转为实实在在的js对象呢?这里我们要用到eval()函数。

  eval(‘var info = ‘+info);

现在info就是实实在在的json对象了,那么我们可以很轻松的将数据显示在想要的部分。

var xhr = function(){
	var xhr = null;
	if(window.XMLHttpRequest) {
		xhr = new XMLHttpRequest();
	} else if(window.ActiveXObject) {
		xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);
	}
	return xhr;
}

xhr.onreadystatechange = function(){
    if(xhr.readyState==4 && xhr.status==200){

        var info = xhr.responseText;

        //info是以字符串形式给我们返回string——‘{"name":"apple5s","price":"4999","number":"24","weight":"105"}‘

        //eval(‘var a= {"name":"apple5s","price":"4999"}‘);
        eval("var info_jn="+info);    //让info字符串内容当作表达式运行
        var rst = document.getElementById(‘result‘);
        rst.innerHTML += "名字:"+info_jn.name;
        rst.innerHTML += " 价格:"+info_jn.price;
        rst.innerHTML += " 重量:"+info_jn.weight;
        rst.innerHTML += " 数量:"+info_jn.number;
    }
}

xhr.open("get",‘./02.php‘);
xhr.send(null);

  

ajax处理json数据

时间: 2024-08-24 10:05:49

ajax处理json数据的相关文章

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

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

jquery实现ajax,返回json数据

jquery实现ajax可以调用几种方法 我经常用的是$get(url,data,callback,type)方法 其中url是异步请求的页面(可以是.ashx文件),data是参数,callback是回调函数,而type是返回数据的类型.type有xml,html,json,text等. 首先,页面引用jquery.js 在页面写ajax处理的js函数 1 2 3 4 5 6 7 8 9 10 11 12 13 function initMeeting() {             $.ge

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

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

ajax请求json数据异常:nested exception is net.sf.json.JSONException: java.lang.reflect.InvocationTargetException] with root cause

ajax请求json数据异常:nested exception is net.sf.json.JSONException: java.lang.reflect.InvocationTargetException] with root cause 1.异常原因:所请求的json数据中包含java.util.date数据类型,但是在后台并没有将其格式转换 2.解决方法:添加工具类DateJsonValueProcessor import java.text.SimpleDateFormat; imp

ajax获取json数据及实现跨域请求

最近想练习一下ajax获取json数据 , 首先上网找一些在线的可用来测试的接口. -----------------------------------------------------这里是接口分割线 Begin-------------------------------------------------------------------------------------------------- 电商接口 淘宝商品搜索建议: http://suggest.taobao.com/s

qml ajax 获取json数据示例

依赖ajax.js类库,以下代码很简单的实现了获取天气json数据并展示的任务 [TestAjax.qml] 1 import QtQuick 2.0 2 import QtQuick.Controls 1.2 3 import "ajax.js" as Ajax 4 5 6 /** 7 测试用ajax 获取 json 数据 8 */ 9 Grid{ 10 width: 600 11 height: 400 12 spacing: 10 13 columns: 2 14 15 Text

解决ajax post json数据 后端无法收到的问题

如图,想把input框中的文字以json格式post出去,结果后端收不到 使用wireshark抓包,根本没有抓到发往服务器的包,说明错误在前端. 后来发现ajax post json数据的时候key字段不能用字符串.正确格式如下: 原文地址:https://www.cnblogs.com/zealousness/p/8783380.html

AngularJS学习笔记(3)——通过Ajax获取JSON数据

通过Ajax获取JSON数据 以我之前写的与用户交互的动态清单列表为例,使用JSON前todo.html代码如下: <!DOCTYPE html> <html ng-app="todoApp"> <head> <meta charset="UTF-8"> <title>TO DO List</title> <link href="./bootstrap/css/bootstrap

Ajax(form表单文件上传、请求头之contentType、Ajax传递json数据)

form表单文件上传 上菜 file_put.html <form action="" method="post" enctype="multipart/form-data"> {# 这里必须要请求头格式才能把上传文件的对象传过去 enctype="multipart/form-data"#} 姓名 <input type="text" name="user">