Ajax知识点

• 概念：在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式，Ajax能让我们轻松的实现网页与服务器之间的数据交互。局部刷新（无刷新）

标题1 jQuery中的Ajax

1. jQuery中Ajax请求的方式主要有一下三种

• 1.1 $.get()语法格式:$.get(url,[data],[callback])
  url参数类型：string
  data参数类型：object
  callback参数类型：function
  $.get(URL地址，[携带的参数],[请求成功后的回调函数])
  $.get()函数发起不带参数的请求，直接提供请求的URL地址和请求成功后的回调函数

$.get('http"//www.baidu.com',function(res) {
   
console.log(res);//这里的res是服务器返回的数据
})

$.get()函数发起带参数的请求

$.get('http"//www.baidu.com', {
   id : 1},function(res) {
   
console.log(res);//这里的res是服务器返回的数据
})

• 1.2 $.post()用法和get方式一样
• 1.3 $.ajax()基本语法格式：

$.ajax({
   
    method:""   // 请求的方式，是提交数据还是获取数据
    url:  ""    //请求的url地址
    data: {
     }    //这次请求携带的参数
    success : function(res) {
    }   //请求成功之后的回调函数
    async: true,//默认是true，所有的请求均为异步请求，如果是同步请求，值为false
    dataType:  //预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包MIME信息来智能判断。可以是text、json、jsonp、html、xml、script
    jsonp:        //在一个jsonp请求中重写回调函数的名字，可以是callback
    jsonpCallback:   //为jsonp请求指定的回调函数名
    error:         //失败之后的回调函数
    complete:      //无论成功还是失败都会触发的回调函数
    timeout:          //请求超时时间（毫秒）
})

• 1.4 resetui()函数重置滚动条的位置

2. form标签的属性

• 2.1 表单的各个属性
  action:向何处发送表单数据

target：在何处打开action的url地址 _blank 在新窗口打开 _self 默认，在相同的框架中打开

method:以何种方式把表单数据提交到action url中 get方式数据暴露，默认情况

enctype: application-x-www-form-urlencoded 默认 multipart/form-data 在使用包含文件上传控件的表单时，必须使用该值 text/plain 空格转换为‘+’加号，但不对特殊字符进行编码

• 2.2 表单同步提交的缺点：整个页面会发生跳转，用户体验差；同步提交后，页面之前的状态和数据会丢失
• 2.3 解决方案：表单只负责采集数据，Ajax负责将数据提交到服务器

3. 通过Ajax提交表单数据

• 3.1 监听表单（不是提交按钮）的提交事件jqsubmit jqonsubmit

$("form").submit(function(){
   });
$("form").on("submit",function() {
   })

• 3.2 阻止表单的默认行为 e.preventDefault() jquery中阻止默认行为：return false js中阻止事件捕获和事件冒泡行为 e.stopPropagation()
• 3.3 serialize()函数 快速获取表单数据，每个表单元素必须设置name属性

<form>
<input type="text" class="form-control" name="uname" placeholder="请输入书名">
<input type="password" class="form-control" name="pwd" placeholder="请输入书名">
</form>
$("form").serialize();//输出结果是uname='用户在text填入的内容'&pwd="用户在password框填入的内容"。这种方式叫做查询字符串的方式

如果是使用Ajax方式请求，表单元素的值尽量设置和接口文档中的参数名字一样

• 3.4reset()函数 快速清空表单的值，这个函数方法属于原生js，所以获取的jQuery元素要转换成js $('form')[0].reset()

标题2 art-template模板引擎

1. art-template的安装：通过script标签进行引用，进而使用
2. 使用步骤：

• 2.1 导入art-template

<script src="templat-web.js"></script>

注：只要导入了模板引擎，在window全局下就存在一个template函数

• 2.2 定义数据：数据一般是对象

<script>
var data={
   name:"张三"}
<script>

• 2.3 定义模板
  模板的id是唯一的

<script type="text/html" id="dyId">
<h1>{
   {
   定义数据对象的属性名 name}}  {
   {
   第二个数据}}</h1>
</script>

• 2.4 调用template函数
  template(“调用的模板的id名”，定义的数据)

var htmlStr=template("dyId",data);//返回值就是我们替换之后的模板了

• 2.5 渲染HTML结构
  进行dom操作：

<div class="cont">页面结构</div>   页面上的容器
渲染数据：$('.cont').html(htmlStr);//页面显示结果是“页面结构  张三”

书写顺序：导入—页面容器—定义模板—定义数据—调用模板—渲染结构
在atr-template模板引擎中，所有的语法都要有闭合标签
3. 标准语法-输出：双花括号 { {}}，可以输出变量、对象属性、三元表达式、逻辑判断、加减乘除
4. 原文输出：value值中包含HTML标签，需要使用原文输出来解析HTML标签 { {@ value}}
5. 标准语法-条件输出

6. 标准语法-循环输出