Ajax请求的一些笔记

Ajax请求服务器失败时

用第二个地址访问失败,可以用第一个
第一个是正式上线后的 第二个是测试用的

以下图片控制台的这些要知道是代表什么意思

第一个是需要手动在浏览器删掉的
第二个是临时保存于当前窗口的

Ajax请求注意事项

1/请求成功前必须先按照文档传data参数,而且要将
			url:  //服务端的请求地址
            type:  //http请求方式 get，post，put，delete，options
			headers: //请求头
            data: {
                //键值对
            },
   以上4个参数写完才可以请求成功
   
2/ 一些Ajax的另外一些公共的  比如 error请求失败要调用的函数或者请求成功或失败之后均调用的函数等 可以单独写在一个文件中引入就可以了

3/还有一些缓存 localStorage 有些数据要存到缓存里面 全局都要用的那些

4/一般headers 需要单独封装 直接看别人的代码很难看懂. 最好看视频 自己跟着封装一遍

5/userKey 相当于门票 登陆了页面才能访问网站 

后台数据转译

//1.使用一个script标签存放模板  
<script id="statusInfo" type="text/html">  
    //转译遵循 laytpl 语法
</script>
//2.在渲染的模板里绑定
toolbar: '#statusInfo'

三元运算

5 > 3 ? alert("5大于3") : alert("5小于3"); //判断?前面的内容是否为true.是的话就执行:后面的语句,false的话就执行:后面的

模板引擎 \laytpl 语法

//常用的第一个
{{ d.field }}  
//中间是拿到字段名 输出一个普通字段，不转义html,意思是给他写个h2等带样式的特殊标签是没有效果的  可以在里面写转译逻辑 如:
<div>{{d.comment ==null ?'无':d.comment}}</div>
//常用的第二个 中间放JS语句。一般用于逻辑处理。用分隔符加 # 号开头。
//注意：如果是想输出一个函数，正确的写法是：{{ fn() }}，而不是：{{# fn() }}
{{# JavaScript表达式 }}

想把js语句写在HTML标签里就要用以上laytpl 语法格式来写

后台返回图片地址如何渲染在页面上

直接写字段名是显示图片地址的文字形式的 需要拿到这个地址的图片形式应该怎么做呢?

在原来的HTML里面 插入图片的写法是
	<img src="地址值" >
但是渲染的表格是写在js里面的, 不能直接用这样的语法格式
所以需要用到转义,用到laytpl模板引擎 和表格的自定义列模板templet 
	{{ d.field }} //用{{}}把中间的d.field (当前行数据字段名)包起来 就可以正常用html的写法了
所以
    cols:[[{
         title: '图片',
        templet: '< div > < img src = "{{d.itemPic}}" < /div>', //正确写法
    }]]

Ajax请求例子

   $.ajax({
                url: http + "/agent/showApplyAgents", 
                type: 'POST', 
                data: {
                    agentType: '',
                    nickname: '',
                    pageStart: pageStart,
                    pageTotal: pageTotal,
                    phone: '',
                    salesmanNickName: ''
                },
                // dataType: 'json',
                // contentType: 'appliction/json',//告诉服务端客户端提交的请求参数的数据结构
                //当请求状态码为200时回调此函数，将服务端返回的数据传给此函数
                success: function(res) {
                    //data是服务端返回的数据
                    let obj = res.result.data || []; //判断||前面的值是否为true(false(undefined\-1\)),为true时选取||前面的数据,否则选择后面的
                    if (res.status == 'success') {
                        dataTotal = res.result.pageCount; //看后台
                    }
                    creatTable(obj)
                }
            })

点击搜索就能刷新

//HTML搜索按钮
<div class="layui-input-inline searchBtnBox">
                <button id="selectButton" class="layui-btn layui-btn-sm">搜索</button>
            </div>

//js
$(document).ready(function() {
            getData(); //接口
            $("#selectButton").click(function() {
                pageStart = 1;
                getData();
            });
        });
//在getdata 接口传参时 获取 条件搜索的val 值就行