最近做的一个商户相关的网站 对 ajax 的调用与后台对接的知识点做个整理
1, 获取地址栏的参数
javascript 代码
- function getRequest() { // 获取当前页面 url 中 "?" 符后的参数
- var url = location.search;
- var theRequest = new Object();
- if (url.indexOf("?") != -1) {
- var str = url.substr(1);
- strs = str.split("&");
- for(var i = 0; i <strs.length; i ++) {
- theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
- theRequest[strs[i].split("=")[0]]=decodeURIComponent(strs[i].split("=")[1]);
- }
- }
- return theRequest;
- }
- // 使用
- var Request = new Object();
- Request = getRequest();
var 参数值 =Request['参数名'];
值得注意的是: 这个函数中的 unescape 这个解析对数字没有问题, 但是如果地址栏中的参数值有中文可能会产生乱码, 这个时候把 unescape 换成 decodeURIComponent 就可以正常使用了, 数字中文的参数都可以获取到
2, 通过 ajax 对接后台接口获取一些数据的处理
html 代码
<ul class="goodsSorts"></ul>
javascript 代码
function getIndustry(){ //url 不限
- $.ajax({
- type:"GET",
- url:'v2.0/rebate/store/recommend_industry',
- data:{'根据需要增加对应的参数'},
- dataType:"json",
- beforeSend:function(){ // ajax 数据加载前 可以添加对应的动画
- $('.bottomLoading').show();
- },
- success:function (res) {
- var lists=res.data.industryList,
- d_html='';
- console.log(lists);
- $.each(lists,function(i,result){
- d_html += "<li><a href='search_shop.html?industry="+result.id+"'><img src="+result.icon+"><p>"+result.name+"</p></a></li>"
- })
- $('.goodsSorts').html(d_html);
- },
- complete: function() { // ajax 数据完成后 可以停止开始前的动画
- }
- });
- }
3, 下拉刷新的实现页面加载数据时候, 一般都会做下拉刷新, 这次简单的实现了下效果
通过判断滚动条的位置, 把加载数据的 ajax 封装成一个函数, 然后滚动到页面底部时候就加载, 当然这时候的后台接口就要接受两个参数, 一个每次加载的条数, 一个上一次最后一条数据的 id, 具体实现代码如下:
javascript 代码
- // 懒加载 用到的函数
- // 文档高度 文档高度 = 可视窗口高度 + 滚动条高度 时, 滚动条正好到底.
- function getDocumentTop() {
- var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
- if (document.body) {
- bodyScrollTop = document.body.scrollTop;
- }
- if (document.documentElement) {
- documentScrollTop = document.documentElement.scrollTop;
- }
- scrollTop = (bodyScrollTop - documentScrollTop> 0) ? bodyScrollTop : documentScrollTop; return scrollTop;
- }
- // 可视窗口高度
- function getWindowHeight() {
- var windowHeight = 0;
- if (document.compatMode == "CSS1Compat") {
- windowHeight = document.documentElement.clientHeight;
- } else {
- windowHeight = document.body.clientHeight;
- }
- return windowHeight;
- }
- // 滚动条滚动高度
- function getScrollHeight() {
- var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
- if (document.body) {
- bodyScrollHeight = document.body.scrollHeight;
- }
- if (document.documentElement) {
- documentScrollHeight = document.documentElement.scrollHeight;
- }
- scrollHeight = (bodyScrollHeight - documentScrollHeight> 0) ? bodyScrollHeight : documentScrollHeight; return scrollHeight;
- }
- function goodExcellentShop(lastId){ // 封装的 ajax 函数
- if(flag)
- return false;
- flag = true;
- $.ajax({ // 获取优秀商户
- type:"GET",
- url:'v2.0/rebate/store/excellent_list',
- data:{limit:5,lastId:lastId},
- // data:{limit:3},
- dataType:"json",
- beforeSend:function(){ // 底部加载时候出现的动画, 提示正在加载
- $('.bottomLoading').show();
- },
- success:function (res) {
- flag = false;
- var lists=res.data.storeList,d_html='';
- if(lists!=''){
- $('.bottomLoading').hide();
- $.each(lists,function(i,result){
- d_html += "<li data-id='"+ result.storeId +"'><a href='my_shop_main.html?storeId="+result.storeId+"'><img src="+result.storeImage+"><div class='businessDetail'><p class='businessTitle'>"+result.storename+"<span>("+ result.branchname+")</span></p><p class='businessAdd'>"+result.location+"</p><p class='detailAdd'>"+result.address+"</p></div></a></li>"
- })
- $('.businessesList').append(d_html);
- }else{ // 当数据为空时, 提示已经没有
- $('.bottomLoading span').text('已经到底线了......');
- return false;
- }
- }
- })
- }
- $(window).on('scroll',function(){ // 在页面绑定滚动监听事件
- if(getScrollHeight() == getWindowHeight() + getDocumentTop()){ // 滚动到底部时
- var lastId=$('.businessesList li:last-child').data('id')
- goodExcellentShop(lastId);
- }
- })
flag 是什么: 在这个函数中, flag 相当于一个锁, 即当前的 ajax 请求没有完成时, 不会发送下一次 ajax 请求, 解决了用户一直下拉, 出现相同数据的问题
4, 移动端的底部选择框 比如三级地址 可以参考的链接 https://zhuanlan.zhihu.com/p/22006728
目前总结就到这, 后面有些工作笔记会持续更新!
来源: http://www.qdfuns.com/article/41409/4bcd5822c11bfe00e3756b041a585720.html