json和xml以及ajax的数据格式用法
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>json数据</title>
</head>
<body>
</body>
<scripttype="text/javascript">
// json数据里面可以包含json数据
var json ={
"id":8,
"name":"小明",
"age":18,
"scroce":[99,35,12,45],
"message":{
marry:"no",
son:"yes",
}
}
// 字符串的json格式
var string ="{'id':8,'name':'小明'}";
// 如果使用JSON.parse(string);//会报错
var str ='{"id":8,"name":"小明"}';// json转换数据的字符串必须是(单引套双引)
// 注意:键值key要用双引号引起来(单引套双引)
// 例如:
var person='{"name" : "aaa","age" : 11}';
// 1.parse()方法把字符串转成JSON格式
var json = JSON.parse(str);
var json =eval(str);//这种方法既不安全,可能会执行一些恶意代码。
// 2.stringify()方法第一个参数是一个数组,第二个参数是一个函数,第三个参数则表示是否在JSON字符串中保留缩进。
var str= JSON.stringify(json,function,num);//转换成JSON字符串
// PHP中的转化方法:
// json_encode()就是将PHP数组转换成Json。
// json_decode()就是将Json转换成PHP数组。
// json格式
var person='{"name":"小明","age":11,"sex":"男"}';
// 字符串
var string1 ="{'name':'小明','age':11,'sex':'男'}"
var string2 ='{"name":"小明","age":11,"sex":"男"}';
// 1.实现将字符串转化成JSON格式
JSON.parse(string1);//报错
JSON.parse(string2);//Object {name: "小明", age: 11, sex: "男"};
// 2.实现将JSON格式数据转化成字符串
console.log(JSON.stringify(person));//"{\"name\":\"小明\",\"age\":11,\"sex\":\"男\"}";
// 3.三个参数
// 第一个参数:json格式数据
// 第二个数据:对这个json数据进行处理的函数
// 第三个参数:缩进
var string3 = JSON.parse(person,function(k,v){
// console.log(k,v);//{"name":"小明","age":11,"sex":"男"}
// k,v对应的是person里面的键值对值
// 匹配处理
switch(k){
case"name":
return"姓名"+v;
break;
case"age":
return"年龄"+v;
break;
case"sex":
return"性别"+v;
break;
default:
return v;
}
},2);
console.log(string3);// Object {name: "姓名小明", age: "年龄11", sex: "性别男"};
</script>
</html>
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>ajax_get</title>
</head>
<body>
<h1>省份</h1>
<ul>
<li>城市1</li>
<li>城市2</li>
<li>城市3</li>
<li>城市4</li>
</ul>
<button>加载XML数据</button>
</body>
<scripttype="text/javascript">
// 获取按钮
var btn = document.querySelector("button");
var h1 = document.querySelector("h1");
var lis = document.querySelectorAll("li");
// 1.创建对象
var xmlhttp ;//自定义对象
// 考虑兼容性写法IE5/6
// 判断浏览器是否支持XMLHttpRequest();
if(XMLHttpRequest){
// 非IE5/6
xmlhttp =newXMLHttpRequest();
}else{
// IE5/6
xmlhttp =ActiveXObject("Msxml2.XMLHTTP");
}
// js中添加绑定事件addEventListener();
// 添加点击事件
btn.onclick =function(){
// 使用open(data)设置请求参数
// open(method,url,bol);
xmlhttp.open("GET","2-city.xml",true);
// 使用send发送请求
xmlhttp.send();
}
// 响应服务器
// 给xmlhttp对象添加onreadystatechange事件
xmlhttp.onreadystatechange =function(){
// 两类,1.readyState与status
// 要判断服务器有没有异常
/*console.log("readyState",xmlhttp.readyState);
console.log("status",xmlhttp.status);*/
if(xmlhttp.readyState ==4&& xmlhttp.status ==200){
// 接受服务器端的数据
// xml,返回XML数据格式
// responseText 获得字符串形式的响应数据。
// responseXML 获得 XML 形式的响应数据。
var dataXML = xmlhttp.responseXML;
console.log(dataXML);
/*-------------处理数据怎么处理--------------*/
// 获取XML文档里面name标签的内容
var name = dataXML.getElementsByTagName("name")[0].innerHTML;
console.log(name);
h1.innerText = name;
// 替换城市内容
var citys = dataXML.getElementsByTagName("city");
document.querySelector("ul").innerHTML ="";
for(var i=0;i<citys.length;i++){
var li = document.createElement("li");
li.innerText = citys[i].innerHTML;
document.querySelector("ul").appendChild(li);
}
}
}
</script>
</html>
<?xml version="1.0" encoding="UTF-8"?>
<province>
<name>广东省</name>
<citys>
<city>广州</city>
<city>深圳</city>
<city>东莞</city>
<city>惠州</city>
<city>湛江</city>
<city>佛山</city>
</citys>
</province>

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8"/>
<title>Document</title>
</head>
<body>
<label>
姓名:<span>XXX</span>
</label>
<label>
年龄:<span>XXX</span>
</label>
<button>获取数据</button>
</body>
<scripttype="text/javascript">
var btn = document.querySelector("button");
var span = document.querySelectorAll("span");
var xmlhttp ;
if(XMLHttpRequest){
// 非IE5/6
xmlhttp =newXMLHttpRequest();
}else{
// IE5/6
xmlhttp =ActiveXObject("Msxml2.XMLHTTP");
}
btn.onclick =function(){
// 使用open(data)设置请求参数
// open(method,url,bol);
xmlhttp.open("GET","get.txt",true);
// 使用send发送请求
xmlhttp.send();
}
xmlhttp.onreadystatechange =function(){
if(xmlhttp.readyState ==4&& xmlhttp.status ==200){
// 获取字符串
var data = xmlhttp.responseText;
// 把字符串转换成json格式object对象
var str1 = JSON.parse(data);
// console.log(str1);
// console.log(dataXML);
var name = str1.name;
var age = str1.age;
// console.log(name);
span[0].innerText = name;
span[1].innerText = age;
}
}
</script>
</html>

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8"/>
<title>Document</title>
</head>
<body>
<!-- <form action="" method=""> -->
<!-- <label> -->
姓名:<inputtype="text"name="user">
<!-- </label> -->
<!-- <label> -->
年龄:<inputtype="text"name="age">
<!-- </label> -->
<inputtype="button"value="输入">
<!-- </form> -->
<divstyle="border:1px solid red;padding:30px">
<h2>你的信息:</h2>
<p>XXX</p>
<p>XXX</p>
</div>
</body>
<scripttype="text/javascript">
var btn = document.querySelector("input[type=button]");
var input = document.querySelectorAll("input[type=text]");
var p = document.querySelectorAll("p");
var xmlhttp ;
if(XMLHttpRequest){
// 非IE5/6
xmlhttp =newXMLHttpRequest();
}else{
// IE5/6
xmlhttp =ActiveXObject("Msxml2.XMLHTTP");
}
btn.onclick =function(){
var value1 = input[0].value;
var value2 = input[1].value;
// 使用open(data)设置请求参数
// open(method,url,bol);
// get获取类型:获取字符在url后面加上"xxx.php?name" +value1+ "&age=" +value2
xmlhttp.open("GET","5-ajax-get-php.php?name="+value1+"&age="+value2,true);
// 使用send发送请求
xmlhttp.send();
}
// 接收服务器响应的数据
xmlhttp.onreadystatechange =function(){
if(xmlhttp.readyState ==4&& xmlhttp.status ==200){
var data = xmlhttp.responseText;// 获取的是字符串
console.log(data);
var str = JSON.parse(data);
p[0].innerText = str.name;
p[1].innerText = str.age;
}
}
</script>
</html>
<?php
// 接受前端数据
$name = $_GET['name'];
$age = $_GET['age'];
/*
-------------------连接数据库,sql语句,执行----------------------
*/
// 可以用echo输出
echo '{"name":"姓名:'.$name.'","age":"年龄:'.$age.'"}';
// 需要特别注意单引号套双引号在套单引号,.$name.和.$age.用单引号套,因为PHP用点(.)连接字符;
/*'{"name":"姓名:' .$name. '","age":"年龄:' .$age. '"}'*/
?>

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8"/>
<title>Document</title>
</head>
<body>
<!-- <form action="" method=""> -->
<!-- <label> -->
姓名:<inputtype="text"name="user">
<!-- </label> -->
<!-- <label> -->
年龄:<inputtype="text"name="age">
<!-- </label> -->
<inputtype="button"value="输入">
<!-- </form> -->
<divstyle="border:10px solid red;padding:30px">
<h2>你的信息:</h2>
<p>XXX</p>
<p>XXX</p>
</div>
</body>
<scripttype="text/javascript">
var btn = document.querySelector("input[type=button]");
var input = document.querySelectorAll("input[type=text]");
var p = document.querySelectorAll("p");
var xmlhttp ;
if(XMLHttpRequest){
// 非IE5/6
xmlhttp =newXMLHttpRequest();
}else{
// IE5/6
xmlhttp =ActiveXObject("Msxml2.XMLHTTP");
}
btn.onclick =function(){
var value1 = input[0].value;
var value2 = input[1].value;
// 使用open(data)设置请求参数
// open(method,url,bol);
xmlhttp.open("POST","6-ajax-get-php.php",true);
// 设置编码格式
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
// 使用send发送请求
xmlhttp.send("name="+value1+"&age="+value2);
}
xmlhttp.onreadystatechange =function(){
if(xmlhttp.readyState ==4&& xmlhttp.status ==200){
var data = xmlhttp.responseText;
console.log(data);
var str = JSON.parse(data);
p[0].innerText = str.name;
p[1].innerText = str.age;
}
}
</script>
</html>
<?php
// 接受前端数据
$name = $_POST['name'];
$age = $_POST['age'];
/*
-----连接数据库,sql语句,执行-----
*/
// 可以用echo输出
echo '{"name":"姓名:'.$name.'","age":"年龄:'.$age.'"}';
/*'{"name":"姓名:' .$name. '","age":"年龄:' .$age. '"}'*/
?>

json和xml以及ajax的数据格式用法的更多相关文章
- ajax ---- json 和 xml 区别
2.XML和JSON优缺点 (1).XML的优缺点<1>.XML的优点 A.格式统一,符合标准: B.容易与其他系统进行远程交互,数据共享比较方便.<2>.XML的缺点 A.X ...
- Ajax调用返回json,xml数据类型(0517--pm)
一.返回Json型数据: 1.主页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- Go语言中的数据格式(json、xml 、msgpack、protobuf)
在分布式的系统中,因为涉及到数据的传输,所以一定会进行数据的交换,此时就要定义数据交换的格式,例如二进制.Json.Xml等等.本篇文章就是总结一下常用的几种数据格式. 一.Json格式 如果想使用J ...
- Ajax--PHP+JQuery+Ajax解析json、XML数据、加载页面
一.JQuery+Ajax用get.post方式提交和请求数据 知识要点: $('#userName').blur(function () { var txt = $(this).val(); $.a ...
- json,xml,html三种数据格式
json.xml.html xml解析如下: 1.DOM:基于XML文档树结构的解析 解析器读入整个文档,然后构建一个驻留内存的树结构,然后代码就可以使用 DOM 接口来操作这个树结构.优点:整个文档 ...
- Beego 输出数据格式JSON、XML、JSONP
JSON.XML.JSONP beego 当初设计的时候就考虑了 API 功能的设计,而我们在设计 API 的时候经常是输出 JSON 或者 XML 数据,那么 beego 提供了这样的方式直接输出: ...
- [转载]Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...
- (转)Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
详细解读Jquery各Ajax函数: $.get(),$.post(),$.ajax(),$.getJSON() 一,$.get(url,[data],[callback]) 说明:url为请求地址, ...
- Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...
随机推荐
- css+html+JQuery 万能弹出层,居中显示
function ShowMsg(str) {//要提示的文字 $(".payment_time_mask").remove(); $("body").appe ...
- Delphi开发安卓程序的感受
Delphi XE7开发安卓程序,界面开发速度非常快,这是eclipse无法比的,还有就是界面自适应能力很棒,我在不同版本和尺寸的设备中测试,运行良好,这些设备包括:三星I9100(安卓2.3:不到5 ...
- 【ocp-12c】最新Oracle OCP-071考试题库(39题)
39.choose the best answer View the Exhibit and examine the description of the EMPLOYEES table. You w ...
- kvm虚拟化存储池配置
1.创建基于文件夹的存储池(目录) 2.定义存储池与其目录 # virsh pool-define-as vmdisk --type dir --target /data/vmfs 3.创建已定义的存 ...
- Java多线程(汇聚页)
Java多线程(汇聚页) Java多线程总结
- php使用xa规范实现分布式事务处理
具体实例如下,对数据表进行插入和删除操作,两个操作都成功才会修改数据表,否则数据表不变. <?php class connDb{ private static $host = 'jxq-off- ...
- mysql 赋给用户远程权限 grant all privileges on
我配置了权限 就可以在Windows下访问我虚拟机中的数据库了 来源:http://blog.csdn.net/louisliaoxh/article/details/52767209 登录: 在本机 ...
- tomcat 线程模型
最近看到了内网ATA上的一篇断网故障时Mtop触发tomcat高并发场景下的BUG排查和修复(已被apache采纳),引起了我的好奇,感觉原作者对应底层十分了解,写的很复杂.原来对于tomcat的线程 ...
- JAVA数组的定义方式
JAVA中,数组有以下几种定义方式: 1.先定义数组中元素的个数,然后再进行元素赋值 int[] a=new int[2]; a[0]='a'; a[1]='b';a[2]='c'; 2.元素个数与元 ...
- [Swift实际操作]七、常见概念-(14)使用UIColor设置界面组件的颜色属性
打开移动应用程序,不可避免的需要和颜色打交道.本文将为你演示颜色对象的使用. 首先导入需要使用到的界面工具框架 import UIKit 通过UIColor的属性,可以获得橙色.右侧的实时反馈区,显示 ...