后台管理项目简单总结
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" data-provide="datepicker" data-date-format="yyyy/mm/dd" > --><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--注意依赖于jqueryjs代码： // 加载图片上传的插件 $('#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;发送请求，获取数据东西比较多，由于时间关系，就先总结到这里，在工作中不断进步，在学习中不断成长，加油！！