ajax总结上

jquery中的ajax常用三种方法

1.get：请求资源
$.get(‘url’,{data},函数）；

$.get('http://www.liulongbin.top:3006/api/getbooks',{id:1},function (res) {
                    for (let i = 0; i <res.data.length; i++) {
                    var book=res.data[i];
                    console.log(book);         
                  };
                })

2.post提交数据
$.post(‘url’,{data},函数）；

$.post('http://www.liulongbin.top:3006/api/addbook', { bookname: '大话西游1', author: "不知道1", publisher: '不知道1' }, function (res) {
          console.log(res);
        })

3.ajax：既可以请求资源，也可以提交资源
（1）请求资源

$.ajax({
	type:"get",//请求方式
	url:"",//请求路径
	data:{},
	 success: function (res) {
            console.log(item);
        }
})

（2）提交资源

$.ajax({
	type:"post",//请求方式
	url:"",//请求路径
	data:{},
	 success: function (res) {
            console.log(item);
        }
})

表单

表单用来收集用户输入的信息

form标签属性

action

需要提交到的地址

target

在何处打开页面
	_blank 新窗口打开
	_self   默认。在相同的框架中打开。
	_parent  在父框架集中打开。（很少用）
	_top  在整个窗口中打开。（很少用）
	framename  在指定的框架中打开。（很少用）

method

提交方式
	GET
		数据跟在URL后面,只能提交较少、简单的数据,不设置时此为默认值
	POST
		数据放在请求体中，可以提交大量数据
		
注意：两种方法提交的时候，提交格式类似，提交的数据放的位置不同

enctype

发送表单数据之前如何对数据进行编码:
	application/x-www-form-urlencoded	在发送前编码所有字符（默认）
	multipart/form-data	不对字符编码。
在使用包含文件上传控件的表单时，必须使用该值
	text/plain	空格转换为 “+” 加号，但不对特殊字符编码。（很少用）
	
注意：
在涉及到文件上传的操作时，必须将 enctype 的值设置为 multipart/form-data
如果表单的提交不涉及到文件上传操作，则直接将 enctype 的值设置为 application/x-www-form-urlencoded 即可！

表单内标签

表单域内的标签需要name属性，这样才能有效的上传用户提交的数据。

注意：用户提交的数据是以键值对的方式提交的，而这个name就是key。
// 阻止表单的提交和页面的跳转

 e.preventDefault()

提交按钮

不需要写js代码, 点击之后自动就能提交

表单的提交

跳转页面
	不需要写js代码, 点击提交按钮之后自动就能提交
		这是表单的默认行为
		缺点：① 页面会发生跳转
			② 页面之前的状态和数据会丢失
			
解决方案：表单只负责采集数据，Ajax 负责将数据提交到服务器。
		
如何不跳转页面
	1.监听表单提交事件:表单的submit事件
	2.不让表单提交:e.preventDefault()
	3.在表单提交之前:收集数据	$(表单).serialize()
	4.最后使用ajax提交数据给服务器
	eg：$('#form1').submit(function(e) {
	 		alert('监听到了表单的提交事件')
	 		e.preventDefault()// 阻止表单的提交和页面的跳转
        	$(form表单).serialize()//一次性获取到表单中的所有的数据
		})
注意：在使用 serialize() 函数快速获取表单数据时，必须为每个表单元素添加 name 属性！

清空表单内容

$('#form')[0].reset()

6、模板引擎

作用

渲染UI结构

	方法一：拼接字符串
		+
		模板字符串
	缺点：如果UI结构比较复杂，则拼接字符串的时候需要格外注意引号之前的嵌套。且一旦需求发生变化，修改起来也非常麻烦。
		
	方法二：模板引擎
		隐藏了拼接字符串的过程
		将数据和模板结构结合起来, 通过特定的语法结构, 它内部会自动的生成好我们想要的HTML字符串
			数据导入模板
			模板生成字符串
		优点：① 减少了字符串的拼接操作
     			② 使代码结构更清晰
     			③ 使代码更易于阅读与维护

art-template的使用步骤

1.导入art-template	
		art-template 是一个简约、超快的模板引擎。中文官网首页为 http://aui.github.io/art-template/zh-cn/index.html
		注意：这个东西是个js文件，需要导入目标页面中来使用
		
2.准备好数据
	这个数据有可能是通过ajax从服务器获取到的
	
3.定义模板
	定义script标签
		type:text/html
		id:
		
4.调用template函数
	template(模板的id, 数据)
	
5.渲染UI

art-template的语法

>>胡子表达式 {{}}
	art-template 提供了 {{ }} 这种语法格式，在 {{ }} 内可以进行变量输出，或循环数组等操作
	
>>条件输出
	{{value}} 变量输出
	{{obj.key}}	对象输出
	{{obj['key']}}	对象输出
	{{a ? b : c}}	三元表达式输出
	{{a || b}}	运算输出
	{{a + b}}	运算输出

>>循环输出
	{{each arr}}
 		{{$index}} {{$value}}
	{{/each}}

>>原文输出
	{{@ value }}
	说明：如果要输出的 value 值中，包含了 HTML 标签结构，则需要使用原文输出语法，才能保证 HTML 标签被正常渲染。

>>条件输出
	{{if v1}} 按需输出的内容 {{else if v2}} 按需输出的内容 {{/if}}
	
>>过滤器
	过滤器的本质，就是一个 function 处理函数。
		参数传入过滤器
		过滤器处理后，返回值
	用法：{{value | filterName}}//将value参数传入|后面的函数进行处理，并返回一个处理后的值
	
	一定要记得给template.defaults.imports增加一个属性
		template.defaults.imports.dateFormat = function (date) {reture ‘处理结果’}
		这里的dateFormat是自定义的函数名，data是形参