前端--阶段笔记（四）前后端交互

第一章 ajax + http

URL

url 统一资源定位符 uniformResourceLocatior

由三部分组成：通信协议 服务器名 服务器上具体存储位置

http://<host>:<port>/<path>?<searchpart>

三个步骤：请求处理响应

浏览器提供的通信过程分析工具：

F12 开发者模式 Network，选中Doc标签，在下面的具体页面点击一下，就能看到这个网页的详情。respones里面就是返回过来的内容

XHR

网页如何请求数据：
请求在服务器上的在的资源，需要用到XMLHttpRequest对象。简称xhr。属于浏览器提供的js成员

最简单用法：var xhrObj = new XMLHttpRequest()

请求资源方式：
最常见两种：get和post

AJAX

Ajax 异步js和XML .通俗理解：只要使用了XMLHttpRequest对象和服务器进行数据交互了，就是ajax。

ajax可以实现网页与服务器之间的数据传输

jQuery中的ajax

浏览器提供的xhr比较复杂，使用jQuery封装的xhr

主要适用三个方法：
$.get()
$.post()
$.ajax()

1 .get()

​ $.get(url,[data],[callback])
​ url 指要请求的地址
​ data 指请求资源时携带的参数
​ callback 指请求成功时的回调函数

//res 服务器为返回的数据
     $(function () {
   
            $('#btn1').on('click', function () {
   
                $.get('http://www.liulongbin.top:3006/api/getbooks',function(res){
   
                    console.log(res)
                })
            })
        })


//以下代码为带参数的get请求
    $(function () {
   
            $('#btn1').on('click',function () {
   
                $.get('http://www.liulongbin.top:3006/api/getbooks',{
   id:1},function(res){
   
                    console.log(res)
                })
            })
        })

2 .post()

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

// 123       
$(function(){
   
            $('#btnPost').on('click',function(){
   
                $.post('http://www.liulongbin.top:3006/api/addbook',{
   bookname:'shuihuzhuan1',author:'shinaian',publisher: "北京图书出版社"}
                ,function(res){
   
                    console.log(res)
                })
            })
        })

3 .ajax()

​ $.ajax({
​ type:’’,//请求方式
​ url:’’,//请求的url地址
​ data:{},//这次请求要带的数据
​ success:function(res){}//请求成功后的回调函数})

 $('#btnAjax').on('click',function(){
   
                $.ajax({
   
                    type:'GET',
                    url:'http://www.liulongbin.top:3006/api/getbooks',
                    data:{
   },
                    success:function(res){
   
                        console.log(res)
                    }
                })
            })

接口文档组成
1 接口名称
2 接口URL
3 调用方式：post get
4 参数格式
5 响应格式
6 返回示例：通过对象的形式，列举服务器返回数据的结构

2-2 图书馆列表案例

尚不存在的元素，如果需要设置js操作，需要通过代理的方式绑定操作。

      $('tbody').on('click', '.deletBook', function () {
   
                // $.post('http://www.liulongbin.top:3006/api/')
                var id = $(this).attr('data-id')
                console.log(id)
                $.get('http://www.baidu.com:3006/api/delbook', {
    id: id }, function (res) {
   
                    if (res.status !== 200) return alert('delete error')
                    getBookList()
                })
            })

去除字符串的头尾空格: trim()

2-4 form表单

表单由三个基本部分组成：
表单标签
表单域
表单按钮

form标签的属性,来规定如何把采集到的数据发送到服务器。

action：值为 url地址，规定当提交表单时，向何处发送表单数据
method：值为 get 或 post ，规定以何种方式提交到action指定地址
enctype：值为

属性	值	描述
action	URL地址	规定当提交表单时，向何处发送表单数据
method	get或post	规定以何种方式把表单数据提交到 action URL
enctype	application/x-www-form-urlencodedmultipart/form-datatext/plain	规定在发送表单数据之前如何对其进行编码
target	_blank _self _parent _top framename	规定在何处打开 action URL

get形式提交数据，会显示在地址栏里面，以post形式提交数据不会显示在地址栏。

包含文件上传用post

在涉及到文件上传的操作时，必须将 enctype 编码方式的值设置为 multipart/form-data

表单同步提交：点击之后全部提交，跳转到另外的url，并且表单内容全部清空。
解决办法：表单负责采集，ajax负责提交

    <form action="">
        <input type="text" />
        <input type="password" />
        <button type="submit">tijiao</button>
    </form>

jQuery中监听表单方法

    $(function(){
   
            //方式1 
            // $('form').submit(function(){
   
            //     alert('ohlala')
            // })

            //方式2 
            $('form').on('submit',function(){
   
                alert('ohlala')

            })
        })

阻止表单默认提交行为

    $(function(){
   
            //方式1 
             $('form').submit(function(e){
   
           e.prventDefault()
                 })

            //方式2 
            $('form').on('submit',function(e){
   
                    e.prventDefault()

            })
        })

一行代码获取表单所有数据，jquery提供了serialize函数格式为：

$('#form1').serilize()
//得到的结果是：
//username=用户名&password=密码值

注意：在使用时，必须为每个表单元素添加name属性

一个提交案例：

$('#formAddCmt').submit(function (e) {
   
    e.preventDefault()
    var data = $(this).serialize()
    $.post('http://www.baidu.com:3006/api/addcmt', data, function (res) {
   
      if (res.status !== 201) {
   
        return alert('发表评论失败！')
      }
      getCommentList()
      $('#formAddCmt')[0].reset()//清空表单数据
    })
  })

art-template模板引擎

根据指定的模板结构和数据，自动生成一个html页面 。

不用手动再拼接字符串了。

art-template模板引擎，在已经提供模板和数据的条件下，自动操作dom，把数据填充在模板里

使用方法：
1 引入模板引擎 导入template-web.js ，全局中会多出一个叫做template(‘模板ID’，需要渲染的数据对象)的函数
2 定义要渲染的数据
3 定义模板 （使用script标签， type类型为 text/html）
4 调用template函数，指定要填充的数据和模板
5 在html页面中渲染数据

art-template 标准语法

art-template 提供了 { { }} 这种语法格式，在 { { }} 内可以进行变量输出，或循环数组等操作，这种 { { }} 语法在 art-template 中被称为标准语法。

{ {value}}
{ {obj.key}}
{ {obj[‘key’]}}
{ {a ? b : c}}
{ {a || b}}
{ {a + b}}

原文输出：{ {@ value}}
包含html语法则需要用原文输出

条件输出：

// /if表示if语句结束
{
   {
   if value}}按需要输出的内容{
   {
   /if}}

{
   {
   if value}}按需要输出的内容1
{
   {
   else if value2}}按需要输出的内容2
{
   {
   /if}}

循环输出：
通过each循环数组，当前循环的索引使用$index进行访问，值用$value访问。

{
   {
   each arr1}}
{
   {
   $index}}  {
   {
   $value}}
{
   {
   /each}}

过滤器：
{ {value | filterName}}

过滤器定义的基本语法：

 template.defaults.imports.filterName = function (date) {
   
     /*return 处理后的结果 */
    }

举例：

 template.defaults.imports.dateFormat = function (date) {
   
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      var d = date.getDate()

      return y + '-' + m + '-' + d
    }

<body>

  <div id="container"><