ajax相关总结

最新推荐文章于 2022-10-07 12:12:23 发布

置顶 front_end_fan

最新推荐文章于 2022-10-07 12:12:23 发布

阅读量346

点赞数 1

分类专栏： ajax 文章标签： ajax 数据交互

本文链接：https://blog.csdn.net/qq_39198420/article/details/78805099

版权

ajax 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.所有公共的变量和方法统一放在一个js文件，目的是方便修改。比如：
i.公共路径：比如：Ajax请求路径的前缀…
ii.公共变量：比如：token、pageNumber、pageSize…
iii.公共方法：比如：时间格式转换的方法，存/读cookie的方法…
2.每个页面都不要出现同一个接口重复的ajax调用，只要同一个接口重复使用都需要用function来声明，使用的地方直接调用，这样不仅简化了代码，而且方便修改。
3.Ajax是异步调用，如果需要先执行ajax后再去执行某个方法，要把该方法放在ajax的 success回调函数的最后，而不是放在整个ajax方法的后面。（比如刷新页面）
4.搜索的页面考虑几个问题：
是不是多个条件搜索，比如既按照类型又按照名称查询；
按照某类型搜索完毕，再去点分页的页码，要保持之前搜索的状态；
回车键搜索；
查询无记录时，要显示对应的无记录提示页面；
根据需求，有些时候要判断搜索的关键字是否有问题，并给用户提示

5.权限的判断：通过indexOf()返回值来判断是否包含某个身份，不要用==符号来判断。
6.页面的跳转、返回链接都用具体的地址，不要用go.back(-1)、reload()这种。
7.有弹出框的地方，根据需求将弹出框的内容清空，不要保留前一次的输入。
8.大部分的记录展示页面没有记录时都要显示无记录的提示文字和样式。
9.内容显示不下的：
方法一：给内容一个定宽，超出宽度显示省略号，再用tooltip或者popover来设置鼠标悬停时候显示全部内容。（用的最多）
方法二：给内容一个定宽，超出宽度显示省略号，再用title来提示。
方法三：给容器一个自适应的宽度或者高度，再给该容器父容器一个设置定宽或者定高，内容超出父容器时，用滚动条显示。
方法四：人数多的时候导致人名显示不下，根据需求显示人数，鼠标移入显示具体的人名
10.页面上“操作”按钮的处理：
操作按钮的文字是根据返回的状态字段来显示，比如ajax返回状态字段为“未启用”时，操作按钮应该显示为“启用”；
根据需求，大部分情况下，点击操作按钮时候要给弹框提示，防止用户误操作。有的时候，要根据该条数据的状态的不同设置不同的弹框提示文字；（比如点击“维护”按钮，已经预约的提示文字和没有被预约的提示文字需不同）
操作按钮还要考虑是否需要根据状态/时间/权限，来判断隐藏/显示
11.页面之间传参：a页面传给b页面
方法一：a页面在地址后面加上要传的参数，例如：url ? id = xxx，b页面通过分割 url获取参数，例如var id = window.location.href.split(“=”)[1];

方法二：a页面存入cookie，b页面取cookie ；（或者session）
……
——其他方法待补充

12.页面内部传参：
方法一：利用data-params属性绑在某个方便获取的元素上面，然后用 element.attr(“data-params”)来获取；

方法二：利用input[type=”hidden”]标签来保存想要传递的参数，然后获取该标签的 value值；
……
——其他方法待补充

13.关于下拉框的option和单/复选框的处理：
1.每个option/chekbox/redio 都加一个value属性，方便ajax入参的处理；

2.每个option/chekbox/redio 都设置一个默认值，比如下拉框可以默认设置为“全部”，
chekbox/redio默认选中第一个，不要让默认显示为空；

3.表单元素可以用form标签包裹，然后用serialize()方法将表单元素序列化。
注：serialize()如果要表单元素的值包含到序列字符串中，元素必须使用name 属性。（可参考http://www.w3school.com.cn/jquery/ajax_serialize.asp）

14.用户输入验证：
PC端统一用artdialog验证以下几方面：
1.输入为空
2.输入重复/选择重复
3.输入格式不正确

15.关于bootstrap的modal显示隐藏：
大部分情况并不是通过data-toggle=”modal” data-target=”#myModal”来控制modal的显示，也不是通过data-dismiss=”modal”来控制modal的隐藏；
而是通过

    $('#myModal').modal('toggle');
    $('#myModal').modal('show’);
    $('#myModal').modal('hiden');来控制modal隐藏/显示

16.关于点击modal的遮罩层，modal的关闭/隐藏
PC端要求单击遮罩层不要关闭modal，方法：加上属性data-backdrop=”static”;
APP要求单击遮罩层需要关闭modal，方法：去掉属性data-backdrop=”static”;
17. BootStrap modal模态弹窗使用小结:
JS使用方法：

    1.show.bs.modal在显示之前触发 
　　 2.shown.bs.modal在显示之后触发 
　　 3.hide.bs.modal在隐藏之前触发 
　　 4.hidden.bs.modal在隐藏之后触发 （比如：手机上关闭modal的方法很多，但是不管哪种方式关闭modal都会触发这个事件，如果需要关闭时清空modal的表单数据，回调函数就可以写在这里面）

18.app滚动加载下一页：

$(document).scroll(function(){
    if($(document).scrollTop()+window.innerHeight==$(document).height()){
        if(pageNo<page){
            pageNo++;
            getNoteByUserId();
        }else{
            $('.load-over').show();
        }
    }
});

19.安卓/ios 电话的调用

//绑定/调用方法 例子：
    if (isiOS) {
        //调用ios方法
        $('#call').attr('href','tel:'+dispatchMobile);
    }else{
        $('#call').attr('onclick','callmobile(\''+dispatchMobile+'\')');
    }
//声明方法
function callmobile(mobile) {
    var u = navigator.userAgent;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    if (isAndroid) {
        //alert('是否是Android：'+isAndroid);
        mobile = mobile + "";
        contact.call(mobile);
    }
    if (isiOS) {
        //调用ios方法
        var url = "tel:" + mobile;
        window.location.href = "tel:10086";
    }
}