正文
原生js，jquery通过ajax获得后台json数据动态新增页面元素
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
一、原生js通过ajax获取json数据
因为IE浏览器对ajax对象的创建和其他浏览器不同，为了兼容全部浏览器，我用下面的代码：
function createXMLHttpRequest(){
try{
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP"); //在IE创建较高版本的ajax对象
}
catch(e){
try{
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");//在IE中创建较低版本的ajax对象
}
catch (e){
XMLHttpReq = new XMLHttpRequest(); //其他浏览器ajax对象的创建
}
}
}
创建完Ajax对象之后，下面就是发送Ajax请求。
function sendAjaxRequest() {
createXMLHttpRequest();
XMLHttpReq.open('post', 'test.php', true);
XMLHttpReq.onreadystatechange = response;
XMLHttpReq.send(null);
}
注释：
1. open(method, url, async) 方法需要三个参数:
method：发送请求所使用的方法（GET或POST）；与POST相比，GET更简单也更快，并且在大部分情况下都能用；然而，在以下情况中，请使用POST请求：
- 无法使用缓存文件（更新服务器上的文件或数据库）
- 向服务器发送大量数据（POST 没有数据量限制）
- 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
url：规定服务器端脚本的 URL(该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）)；
async：规定应当对请求进行异步（true）或同步（false）处理；true是在等待服务器响应时执行其他脚本，当响应就绪后对响应进行处理；false是等待服务器响应再执行。
2. send() 方法可将请求送往服务器。
3. onreadystatechange：存有处理服务器响应的函数，每当 readyState 改变时，onreadystatechange 函数就会被执行。
4. readyState：存有服务器响应的状态信息。
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成，且响应已就绪
5. responseText：获得字符串形式的响应数据。
接收后台返回的数据
function response() {
if(XMLHttpReq.readyState == 4){
if(XMLHttpReq.status == 200){
var user = XMLHttpReq.responseText;
user = eval(user); //这里需注意，后台返回的是纯文本数据而不是json数据，要用eval方法转换成json格式的数据
//利用后台返回的json数据自动创建节点，采用拼接字符串的方法
for(var i = 0; i < user.length; i ++){
htmlNodes += '<figure><div class="img"><img width="120" height="120" src="' + user[i].images + '"></div><figcaption><strong>' + user[i].name + '</strong><p>' + user[i].caption + '</p></figcaption></figure>';
}
$('#container').append(htmlNodes);
}
}
}
eval()：与 JOSN.parse() :
两种解析字符串的方法：
eval() :
eval函数用于将字符串中的JS代码解析出来并执行！！
当使用eval函数解析JSON字符串时，需 要在函数内部将JSON字符串用()拼接
例如： eval("("+json1+")")
表示eval函数中的字符串不是用于执行，而是要进行字符串解析
即：
eval("("+json1+")") = JSON.parse(json1)；
JOSN.parse() :
纯粹的将JSON字符串解析为数组或对象；
<?php
echo '[ { "name" : "Herry",
"caption" : "还没好好的感受，雪花绽放的气候",
"images" : "images/1.jpg"
},
{
"name" : "Dorry",
"caption" : "我们一起颤抖,会更明白什么是温柔",
"images" : "images/4.jpg"
},
{
"name" : "Money",
"caption" : "还没跟你牵着手,走过荒芜的沙丘",
"images" : "images/5.png"
},
{
"name" : "Herry",
"caption" : "可能从此以后学会珍惜,天长和地久",
"images" : "images/2.jpg"
},
{
"name" : "Herry",
"caption" : "有时候有时候,我会相信一切有尽头,相聚离开都有时候,没有什么会永垂不朽",
"images" : "images/3.jpeg"
}]';
二、用jquery通过ajax获取json数据$.ajax({
url: 'test.php?' + Math.random(), // 后面加个随机数是清除缓存
type: 'get',
dataType: 'json',
success: function (user) {
//字符串拼接
var htmlNodes = '';
for(var i = 0; i < user.length; i ++){
htmlNodes += '<figure><div class="img"><img width="120" height="120" src="' + user[i].images + '"></div><figcaption><strong>' + user[i].name + '</strong><p>' + user[i].caption + '</p></figcaption></figure>';
} $('#container').append(htmlNodes);
}
});
$.ajax({
url: 'test.php?' + Math.random(), // 后面加个随机数是清除缓存
type: 'get',
dataType: 'json',
success: function (user) {
//字符串拼接
var htmlNodes = '';
for(var i = 0; i < user.length; i ++){
htmlNodes += '<figure><div class="img"><img width="120" height="120" src="' + user[i].images + '"></div><figcaption><strong>' + user[i].name + '</strong><p>' + user[i].caption + '</p></figcaption></figure>';
} $('#container').append(htmlNodes);
}
});
后台文件与上面的php文件相同
