基于jquery的Ajax数据交互

1、客户端与服务器

服务器：存放和对外提供资源的电脑（eg：饭馆）

客户端：获取和消费资源的电脑（个人电脑），通过浏览器访问服务器上的资源（eg：客人）

2、URL地址

（1）URL：统一资源定位符，标识互联网每个资源的唯一存放位置

（2）组成：通信协议+服务器名称+具体的存放位置

• http://(通信协议)www.baidu.com(服务器名称)/index.html(具体存放位置)

（3）通信过程：请求（客户端请求）——处理（服务器）——响应（服务器响应客户端）

3、网页中常见的资源

文字、image、audio、video等，网页中的数据也是资源

网页的完整组成：html+css+js+数据（灵魂）

4、网页中请求数据

• 网页请求服务器上的数据，需要使用XMLHttpRequest(简称xhr，是浏览器提供的js对象)对象

• js原生用法：var xhr = new XMLHttpRequest()

5、资源的请求方式：get和post

• get 通常用于获取服务器资源

• post 通常用于向服务器提交数据（发送资源）

6、Ajax

（1）Ajax主要实现网页和服务器之间的数据交互

（2）jquery中的Ajax

应用场景：

1、检测用户输入

2、输入关键字，动态加载提示列表

3、数据分页显示

4、数据的增删改查

（3）jquery中发起Ajax请求最常用的三个方法：

• $.get() 请求数据

• $.post() 提交数据

• $.ajax() 既可请求数据也可提交数据

（4）$.get()语法

$.get(url, [data], [callback])

url	string	必选	要请求的url地址
data	object	非必选	请求数据时需要传递的参数
callback	function	非必选	数据请求成功时的回调函数

（5）$.post()语法

$.post(url, [data], [callback])

url	string	必选	数据提交的url地址
data	object	非必选	要提交的数据
callback	function	非必选	数据提交成功时的回调函数

（6）$.ajax()语法

$.ajax({
 type: '',  // 请求的方式，GET或者POST
 url: '',  // 请求的url网址
 data: {},  // 请求的参数
 success: function(res) { }  // 请求成功的回调函数
})

（7）接口：被请求的URL地址，就叫做数据接口，每个接口必须有请求方式

（8）接口文档：接口名称、接口URL、调用方式、参数格式、响应格式、返回示例（可选）

7、form表单

（1）表单：进行数据采集，并且将用户输入的数据提交到服务端进行处理，使用form标签包裹，submit按钮会将数据提交到action设置的地址，并且进行页面跳转

• 表单 = 表单域 + 表单标签 + 表单按钮

（2）form标签的属性

table.jpeg

（3）表单同步提交

• 同步提交：通过点击提交按钮，通过action属性进行提交

  • 同步提交后跳转到action指的页面，用户体验差

  • 同步提交后，页面之前的状态和数据会丢失

• 解决方案：不让表单提交，表单只负责采集数据，Ajax负责提交数据

（4）监听表单提交事件

// 方式一
$('#btn').submit(function(e) { alert('监听到了表单的提交事件') })

// 方式二
$('#btn').on('submit', function(e) { alert('监听到了表单的提交事件') })

（5）阻止表单默认提交行为

• 调用事件对象的event.preventDefault()函数

8、快速操作表单数据

（1）serialize()函数：快速获取表单数据，一次性获取所有的表单元素，这时表单元素都必须设置name，得到的结果是字符串

（2）reset()函数：DOM元素才有的函数，置空form表单

9、模板引擎：指定模板结构和数据生成页面

数据+模板结构——>模板引擎——>HTML页面

• 好处：

  • 减少了字符串的拼接

  • 使代码结构更清晰

  • 使代码更易于阅读和维护

• art- template模板引擎（初学者易学，语法数据占位符为{{}}）

  （1）导入模板引擎（导入后就会在window全局挂在一个template函数：template(模板的id, 要填充的数据)

  （2）定义数据

  （3）定义模板

  模板的html结构必须要定义到script中，script标签有type值（默认为text/javascript，意思是其中内容都将作为js执行），模板引擎的type值为：text/html

   <script type="text/html">
   
   </script>
  

  （4）调用template()函数，返回值为渲染好的页面结构

  （5）渲染html结构

  （6）art-template的格式为{{数据}}，如果想要原文输出，使用{{@ 数据}}

  （7）实现条件输出:

  {{if 条件}}
   内容
  {{else if 条件}}
   内容
  {{/if}}
  

  （8）实现循环输出

  {{each hobby}}
   <p>索引是{{$index}}，循环项是{{$value}}</p>
  {{/each}}
  

  （9）过滤器（本质：处理函数）：需处理的值——过滤器函数——返回新值

  // value的值给到filterName
  {{value | filterName}}
  
  //过滤器基本语法
  template.defaults.imports.filterName = function(value) {/*处理的结果*/}</pre>
  

10、exec()函数

检索字符串中的正则是否匹配，有匹配的值，返回该匹配值，没有匹配的值，返回null

var str = 'hello'
var pattern = /o/
var pattern1 = /x/

console.log(pattern.exec(str))  // ["o", index: 4, input: "hello", groups: undefined]
console.log(pattern1.exec(str))  // null

11、正则表达式中 ( ) 包起来的内容表示一个分组，可以通过分组来提取自己想要的内容

 var str = '<div>我是{{name}}</div>'
 // 这里提取的是{{name}}
 var pattern = /{{([a-zA-Z]+)}}/
 var patternResult = pattern.exec(str)
 console.log(patternResult)  
// ["{{name}}", "name", index: 7, input: "<div>我是{{name}}</div>", groups: undefined]

// 可以通过字符串的replace()将{{name}}换成name
str = str.replace(patternResult[0], patternResult[1])
console.log(str)  // <div>我是name</div>

12、自己实现简易模板引擎

<div id="user-box"></div>

<!-- 页面模板 -->
<script type="text/html" id="tpl-user">
    <div>姓名：{{name}}</div>
    <div>年龄：{{age}}</div>
    <div>性别：{{gender}}</div>
    <div>住址：{{address}}</div>
</script>


<script>
    var data = {name: 'zs', age: 24, gender: '男', address: '西安'}

    function template(id, data) {
        var str = document.getElementById('tpl-user').innerHTML
        // \s表示空格，*表示多个空格
        var pattern = /{{\s*([a-zA-Z]+)\s*}}/

        var patternResult = null
        // 每匹配一个{{}}，执行完后再匹配下一个{{}}
        while (patternResult = pattern.exec(str)) {
            str = str.replace(patternResult[0], data[patternResult[1]])
        }
        return str
    }

    var str = template('tpl-user', data)
    document.querySelector('#user-box').innerHTML = str
</script>