后台管理项目简单小总结------彭记（021）

后台管理项目简单总结
jQuery 框架中 $.ajax() 常用的参数：
type 类型:

String,默认值: GET.
url 类型:

String,默认值:当前页地址,发送请求的地址
success：

类型:Function,请求成功后的回调函数
参数:由服务器返回,并根据 dataType 参数进行处理后的数据,描述状态的字符串
options：

类型:Object,可选,AJAX 请求设置,所有选项都是可选的
async：

类型:Boolean,默认值:true,默认设置下所有请求均为异步请求
注意,同步请求将锁住浏览器,用户其他操作必须等待请求完成才可执行
beforeSend(XHR)：
类型:Function,发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头,XMLHttpRequest 对象是
唯一的参数,这是一个 AJAX 事件,如果返回 false 可以取消本次 AJAX 请求
cache：

类型:Boolean,默认值:true, dataType 为 script 和 jsonp 时默认为 false,设置为 false 将不缓存此页面
contentType 类型:String,默认值:"application/x-www-form-urlencoded",发送信息至服务器时内容编码类型.默认值适合大多
数情况.如果你明确的传递了一个 content-type 给$.ajax()那么它必行会发送给服务器(即使没有数据要发送)
data：
类型:String,发送到服务器的数据,将自动转换为请求字符串格式. GET 请求中将附加在 URL 后.查看 processData 选项说明以禁止此自动转换. 必须为 Key/Value 格式,如果为数组,jQuery 将自动为不同值对应同一个名称.

如:{foo:["bar1", "bar2"]}转换为’&foo=bar1&foo=bar2’ dataFilter 类型:Function,给 AJAX 返回的原始数据的进行预处理的函数.提供 data 和 type 两个参数,data 是 AJAX 返回的原
始数据,type 是调用 jQuery.ajax 时提供的 dataType 参数,函数返回的值将由 jQuery 进一步处理
dataType：
类型:String,预期服务器返回的数据类型. 如果不指定,jQuery将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME 类型就被识别为 XML. 在 1.4 中,JSON 就会生成一个 JavaScript 对象,而 script 则会执行这个脚本.随后服务器端返回的数据会根据
这个值解析后,传递给回调函数.可用值: "xml":返回 XML 文档,可用 jQuery 处理. "html":返回纯文本 HTML 信息;包含的 script 标签会在插入 dom 时执行. "script":返回纯文本 JavaScrip 代码.不会自动缓存结果.除非设置了"cache" 参数. 注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为 GET 请求.(因为将使用 DOM 的 script 标签来
加载) "json": 返回 JSON 数据. "jsonp": JSONP 格式.使用 JSONP 形式调用函数时,如 "myurl?callback=?"jQuery 将自动替换 ? 为正确的函数名,以执行回调函数. "text": 返回纯文本字符串
error 类型:

Function,默认值:自动判断(xml 或 html), 请求失败时调用此函数

日期插件的使用
引入日期插件datepicker
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>datepicker</title>
<link rel="stylesheet" href="../../views/public/assets/bootstrap/css/bootstrap.css">
<script src="../../views/public/assets/jquery/jquery.min.js"></script>
<script src="../../views/public/assets/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../../views/public/assets/bootstrap-datepicker/css/bootstrap-datepicker.min.css">
<script src="../../views/public/assets/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
   //中文版
<script src="../../views/public/assets/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
</head>
<body>

<input type="text" id="txt" >
</body>
</html>
<script>
$('#txt').datepicker({
    format:'yyyy/mm/dd',
    startDate: '-6d',
    endDate:'+3d',
    language:'zh-CN'//中文版
});
</script>

上传头像
<input type="file" id="unpfile">
js无法直接操作文件，但是flash是可以操作文件的，所以借助于flash实现文件上传的功能
注意点：需开启浏览器flash运行允许---浏览器设置-高级-内容设置-Flash-允许运行flash打开即可

引入插件uploadify--注意依赖于jquery
js代码：
// 加载图片上传的插件
         $('#upfile').uploadify({
           'swf':'/views/public/assets/uploadify/uploadify.swf',
           'uploader':'/api/uploader/avatar', //提交的接口
           'width':120,
           'height':120,
           'buttonText':'',
            'fileObjName':'tc_avatar',//上传到服务器的文件名，也就是当前的input标签的name属性值
           onUploadSuccess:function (file,data,response){
             // var obj = JSON.parse(data);
             // // obj.result.path
             // // 图片上传成功之后，服务器会返回一个图片在服务器的地址
             // $('.preview img').attr('src',obj.result.path);
             $('.preview img').attr('src',JSON.parse(data).result.path);
           }
         });

渲染到头像区域<img src="{{tc_avatar?tc_avatar:'/views/public/images/default.png'}}">（没有传就给默认图片）

图片上传之后裁切功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" href="jcrop/css/Jcrop.css">
<script src="jcrop/js/jquery.min.js"></script>
<script src="jcrop/js/Jcrop.js"></script>
</head>
<body>
<img src="pool.jpg" alt="" id="target">
</body>
</html>
<script>
// $('#target').Jcrop({
//    aspectRatio:2,
////    bgColor: 'hotpink',
//    setSelect: [ 105, 200, 400, 300 ],
////    bgOpacity:0.3,
////    maxSize: [200,300],
////    minSize:[100,80] ,
//////    canSelect:false,
////    canDrag:false,
////    canResize:false
// });

$('#target').Jcrop({
aspectRatio: 2,
setSelect: [ 175, 100, 400, 300 ]
},function(){
var jcrop_api = this;
thumbnail = this.initComponent('Thumbnailer', { width: 130, height: 130 });
});
</script>

三级联动插件
引入region（依赖jquery）
渲染html
   <div class="col-md-5" id="region">
                    <select name="tc_province" id="p" data-id="{{tc_province}}" class="form-control input-sm">
                        <option value="">请选择省</option>
                    </select>
                    <select name="tc_city" id="c" data-id="{{tc_city}}" class="form-control input-sm">
                        <option value="">请选择市</option>
                    </select>
                    <select name="tc_district" id="d" data-id="{{tc_district}}" class="form-control input-sm">
                        <option value="">请选择区</option>
                    </select>
                </div>
js
$('#region').region({
           url:'/views/public/assets/jquery-region/region.json' // 配置数据信息
         });

对获取页面id就行封装渲染页面
例如： <a href="/course/basic?cs_id={{cs_id}}" class="done">页面在跳转时，加上id
封装：define(function (){

var obj = {
    queryString:function (){
      // 这是编辑的功能当跳转到当前页面的时候，页面上得显示当前讲师的信息
      var search = location.search; //"?tc_id=3&name=250&age=20&sex='男'"
      // console.log(search);
      search = search.slice(1);// 有两个参数第一个参数表示截取开始的位置，第二个参数表示结束的位置，如果不写默认是截取到最后
      var searchArr = search.split('&'); //是将字符串切割成数组
      // console.log(searchArr);

      var o ={};
      for(var i=0;i<searchArr.length;i++){
        // 得到数组中第一项，每一个都是一个字符串 tc_id=3 name=250 然后以=再次进行切割
        var temp = searchArr[i].split('=');
        o[temp[0]] = temp[1];
      }
      return o;
    },

}

    return obj; //返回当前模块里面的对象   假设模块里面的对象中有很多的方法

})
渲染页面：
调用封装获取id -var cs_id = utils.queryString().cs_id;
发送请求，获取数据

东西比较多，由于时间关系，就先总结到这里，在工作中不断进步，在学习中不断成长，加油！！

posted @ 2017-09-07 08:25 依旧安好阅读(139) 评论(0) 编辑收藏举报

刷新页面返回顶部

依旧安好

后台管理项目简单小总结------彭记（021）

公告