您的位置：首页 > Web前端 > Node.js

Ajax之深入了解

2016-08-31 21:26 260 查看 
上一节，我们说了一些Ajax的基础知识，包括常用的get方法，现在，我们接着来讲讲post方法，以及利用get方法或post方法实现分页显示的功能。
我们使用的是nodejs，去nodejs官网下载安装后，在webstrom编写代码，将所有代码放在public文件夹里，然后在terminal控制台开启服务（npm start），之后在网页上输入localhost:3000/文件名.html。
以下我们来说说get和post两种方法的区别。详见代码


<script>
//get方法
//创建Ajax对象
var xhr = new XMLHttpRequest();
//创建链接
xhr.open('get','/getcity?city='+city.value);
//发送请求
xhr.send();
//接收返回值
xhr.onreadystatechange = function(e){
if(xhr.readyState == 4){//完成
if(xhr.status == 200){//成功
alert(xhr.response)
}
}
e.preventDefault();
};
//get方法
//创建Ajax对象
var xhr = new XMLHttpRequest();
//创建链接
xhr.open('post','/postcity');
//添加请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//发送请求
xhr.send('city='+city.value);
//接收返回值
xhr.onreadystatechange = function(e){
if(xhr.readyState == 4 && xhr.status == 200){
alert(xhr.response);
}
e.preventDefault();
};
</script>


作为前端程序员，后台的数据我们很少涉足，但是有些接口还是需要了解一些，毕竟，前端和后台的分解不是那么明显，下面我们简单的写两个接口比较、了解一下。

//get
router.get('/getcity',function(req, res, next){
var city = [{value:'beijing', name:'北京'},{value:'shanghai', name:'上海'}];
res.send(city);
res.end();
});

//post
router.post('/postcity',function(req, res, next){
var city = req.body.city;
console.log(city);
res.send('您选择的城市是'+city);
res.end();
});


以上就是对Ajax的小小总结，接下来我们来写一个分页显示的实例

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
a{
text-decoration: none;
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #ccc;
text-align: center;
margin: 5px;
color: red;
}
ul{
list-style: none;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
<script src="../routes/data1.js"></script>
<script>

var size = 10;
document.body.addEventListener('click',function(e){
var e = e || event;
if(e.target.tagName == 'A'){

getData(parseInt(e.target.innerText));
}
e.preventDefault();
});
getData(1);
function getData(index){
var xhr = new XMLHttpRequest();
xhr.open('get','/song?index='+index+'&size='+size);
xhr.responseType = 'json';
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
doResult(xhr.response);
}

};
xhr.send();
}
function doResult(data){
var json = data;
var html = '';
for(var i = 1; i <= json.count; i++){
html += '<a href="javascript:;">'+ i +'</a>'
}
var box = document.getElementById('box');
box.innerHTML = html;
var ul = document.createElement('ul');
box.appendChild(ul);
json.data.forEach(function(item){
var li = document.createElement('li');
li.innerHTML = '<img src="'+ item.cimgurl +'"/>';
ul.appendChild(li);
})

}
</script>
</html>


后台接口

router.get('/song', function(req, res, next){
var index = req.query.index;
var size = req.query.size;
var count = travel.length/size;
console.log(index +''+ size);
var dataPage = travel.slice((index -1)*size, index * size);
res.contentType('application/json');
res.send({allrecord:travel.length,count:count,data:dataPage,index:index});
res.end();
});


图片资源是一个单独的文件夹，由于内容太多，这里我就不再上传，有兴趣的同学可以自己试试哦
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  ajax nodejs
相关文章推荐
新的分享
章节导航