上一节,我们说了一些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',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,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();
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。