Ajax 基础()

  • GET 请求
  • POST 请求
  • form 表单
  • 渲染 UI 结构传统方法模板引擎exec 函数自定义模板引擎
  • 传统方法
  • 模板引擎
  • exec 函数
  • 自定义模板引擎
  • JSON
  • form 对象
  • 文件
  • 其他URL 编码与解码封装自己的 Ajax 函数设置超时时限axios 的使用 — 需导入 axios.js发起跨域的 Ajax 请求JSON节流阀
  • URL 编码与解码
  • 封装自己的 Ajax 函数
  • 设置超时时限
  • axios 的使用 — 需导入 axios.js
  • 发起跨域的 Ajax 请求
  • JSON
  • 节流阀

GET 请求

  • 发起不带参数的 GET 请求

  • 发起带参数的 GET 请求

  • 使用 $.ajax 发起 GET 请求

  • 使用 xhr 发送 GET 请求

POST 请求

  • 使用 POST 提交数据

  • 使用 $.ajax 发起 POST 请求
    $(function() {
    // $.ajax({typr:”,url:”,data:”,success:function(res){}})
    // 请求的方式 请求的 url 地址 这次请求要携带的数据 请求成功后的回调函数
    $(‘#btnGET’).on(‘click’,function(){
    $.ajax({
    type:’POST’,
    url:’http://www.liulongbin.top:3006/api/addbook’,
    data:{
    bookname:’史记’,
    author:’司马迁’,
    publisher:’上海图书’
    },
    success:function(res){
    console.log(res);
    }
    })
    })
    })

  • 使用 xhr 发送 POST 请求

form 表单

  • form 表单的属性




  • 表单的提交事件

渲染 UI 结构

传统方法

<body>
    <div id="title"></div>
    <div>姓名:<span id="name"></span></div>
    <div>年龄:<span id="age"></span></div>
    <div>会员:<span id="isVIP"></span></div>
    <div>注册时间:<span id="regTime"></span></div>
    <div>爱好:
        <ul id = "hobby">
            <li>爱好1</li>
            <li>爱好2</li>
        </ul>
    </div>
    <script>
        var data = {
            title: '<h3>用户信息</h3>',
            name: 'zs',
            age: 20,
            isVIP: true,
            regTime: new Date(),
            hobby: ['吃饭', '睡觉', '打豆豆']
        }

        $(function () {
            $('#name').html(data.name)
            $('#title').html(data.title)
            $('#age').html(data.age)
            $('#isVIP').html(data.isVIP)
            $('#regTime').html(data.regTime)
        })

        var rows = []
        $.each(data.hobby, function (i, item) {
            rows.push('<li>' + item + '</li>')
        })
        $('#hobby').html(rows.join(''))

    </script>
</body>

模板引擎

— 要导入 template-web.js

<body>
    <div id="container"></div>

    <!-- 3.定义模板
    模板的 html 结构必须定义到 script 中
    type 改为 text/html 默认 text/javascript -->
    <script type="text/html" id='tpl-user'>
        <h1>{{name}}   ---   {{age}}</h1>

         <!-- 原文输出 {{@ value}} -->
        {{@ test}}

        <div>
            {{if flag == 0}}
            flag 的值为 0
            {{else if flag == 1}}
            flag 的值为 1
            {{/if}}
        </div>

        <!-- 循环遍历 -->
        <ul>
            {{each hobby}}
            <li>索引是:{{$index}},循环项是:{{$value}}</li>
            {{/each}}
        </ul>

         <!-- 过滤器 -->
        <h3>{{regTime | dateFormat}}</h3>

    </script>

    <script>
        // 定义处理时间的过滤器
        template.defaults.imports.dateFormat = function (date) {
            // console.log(date);
            var y = date.getFullYear()
            var m = date.getMonth() + 1
            var d = date.getDate()
            return y + '-' + m + '-' + d

        }

        // 2.定义需要渲染的数据
        var data = {
            name: 'zs', age: 20, test: '<h3>测试原文输出</h3>', flag: 1, hobby: ['吃饭', '睡觉', '敲代码'], regTime: new Date()
        }

        // 4.调用 template 函数
        var htmlStr = template('tpl-user', data)
        console.log(htmlStr);

        // 渲染 5.html 结构
        $('#container').html(htmlStr)

    </script>

</body>

exec 函数

  • 根据正则表达式提取分组 正则表达式里的()是一个分组 replace 替换

  • while 循环进行 replace 操作

自定义模板引擎

    <script>
        // 定义数据
        var data = { name: '张三', age: 20, sex: '男', address: '江西上饶' }
        // 调用模板引擎
        var htmlStr = template('tpl-user', data)
        // 渲染 HTML 结构
        document.getElementById('user-box').innerHTML = htmlStr

        // 自定义模板引擎
        function template(id, data) {
            var str = document.getElementById(id).innerHTML
            var pattern = /{{\s*([a-zA-Z]+)\s*}}/

            var result = null
            while (result = pattern.exec(str)) {
                str = str.replace(result[0], data[result[1]])
            }
            return str
        }
    </script>

JSON

  • JSON 和 JS 互换


  • JSON.parse 的应用

form 对象

  • 使用 Form 对象快速获取表单里的元素

文件

  • 使用 xhr 上传文件

  • 使用 jQuery 上传文件

其他

URL 编码与解码

    <script>
        var str = '江西上饶'
        var str2 = encodeURI(str)
        console.log(str2);
        var str3 = decodeURI('%E6%B1%9F%E8%A5%BF')
        console.log(str3);
    </script>

封装自己的 Ajax 函数

    <script>
        xyee({
            method: 'GET',
            url: 'http://www.liulongbin.top:3006/api/getbooks',
            data: {
                id: 1
            },
            success: function (res) {
                console.log(res);
            }
        })

        xyee({
            method: 'POST',
            url: 'http://www.liulongbin.top:3006/api/addbook',
            data: {
                bookname: '小吖ee',
                author: 'xyee',
                publisher: '江西出版社'
            },
            success: function (res) {
                console.log(res);
            }
        })
    </script>

设置超时时限

    <script>
        var xhr = new XMLHttpRequest();

        // 设置超时时间
        xhr.timeout = 30
        // 设置超时以后的处理函数
        xhr.ontimeout = function(){
            console.log('请求超时');
        }

        xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks')
        xhr.send()
        xhr.onreadystatechange = function(){
            if(xhr.readyState==4 && xhr.status==200){
                console.log(xhr.responseText);
            }
        }
    </script>

axios 的使用 --- 需导入 axios.js

<body>
    <button id="btn1">发起 GET 请求</button>
    <button id="btn2">发起 POST 请求</button>
    <button id="btn3">直接使用 axios 发起 GET 请求 </button>
    <button id="btn4">直接使用 axios 发起 POST 请求 </button>
    <script>
        document.getElementById('btn1').addEventListener('click', function () {
            var url = 'http://www.liulongbin.top:3006/api/get'
            var paramsObj = { name: 'zs', age: 20 }
            axios.get(url, { params: paramsObj }).then(function (res) {
                console.log(res.data);
            })
        })
        document.getElementById('btn2').addEventListener('click',function(){
            var url = 'http://www.liulongbin.top:3006/api/post'
            var dataObj = {address:'北京',location:'顺义区'}
            axios.post(url,dataObj).then(function(res){
                console.log(res.data);
            })
        })
        document.querySelector('#btn3').addEventListener('click',function(){
            var url = 'http://www.liulongbin.top:3006/api/get'
            var paramsObj = {name:'ls',age:20}
            axios({
                method:'GET',
                url:url,
                params:paramsObj
            }).then(function(res){
                console.log(res.data);
            })
        })
        document.querySelector('#btn4').addEventListener('click',function(){
            axios({
                method:'POST',
                url:'http://www.liulongbin.top:3006/api/post',
                data:{
                    name:'xm',
                    age:20,
                    sex:'男'
                }
            }).then(function(res){
                console.log(res.data);
            })
        })
    </script>

发起跨域的 Ajax 请求

    <script>
        $.ajax({
            method:'GET',
            url:'http://www.liulongbin.top:3006/api/jsonp',
            data:{
                name:'zs',
                age:20
            },
            success:function(res){
                console.log(res);
            }
        })
    </script>

JSON

  • success({ name: 'zs', age: 20 }) // 02.js


  • 使用 JQuery 发起 JSON 数据请求

节流阀

    <script>
        $(function () {
            // 获取到图片
            var angel = $('#angel')
            // 定义一个节流阀
            var timer = null
            // 绑定 mousemove 事件
            $(document).on('mousemove', function (e) {
                // 不为空 就不执行图片移动效果
                if (timer) return
                timer = setTimeout(function () {
                    // 设置图片位置
                    angel.css('left', e.pageX + 'px').css('top', e.pageY + 'px')
                    // 效果执行完设为空
                    timer = null
                }, 20)

            })
        })
    </script>
------------------------
  • GET 请求
  • POST 请求
  • form 表单
  • 渲染 UI 结构传统方法模板引擎exec 函数自定义模板引擎
  • 传统方法
  • 模板引擎
  • exec 函数
  • 自定义模板引擎
  • JSON
  • form 对象
  • 文件
  • 其他URL 编码与解码封装自己的 Ajax 函数设置超时时限axios 的使用 --- 需导入 axios.js发起跨域的 Ajax 请求JSON节流阀
  • URL 编码与解码
  • 封装自己的 Ajax 函数
  • 设置超时时限
  • axios 的使用 --- 需导入 axios.js
  • 发起跨域的 Ajax 请求
  • JSON
  • 节流阀

GET 请求

  • 发起不带参数的 GET 请求

  • 发起带参数的 GET 请求

  • 使用 $.ajax 发起 GET 请求

  • 使用 xhr 发送 GET 请求

POST 请求

  • 使用 POST 提交数据

  • 使用 $.ajax 发起 POST 请求
    $(function() {
    // $.ajax({typr:'',url:'',data:'',success:function(res){}})
    // 请求的方式 请求的 url 地址 这次请求要携带的数据 请求成功后的回调函数
    $('#btnGET').on('click',function(){
    $.ajax({
    type:'POST',
    url:'http://www.liulongbin.top:3006/api/addbook',
    data:{
    bookname:'史记',
    author:'司马迁',
    publisher:'上海图书'
    },
    success:function(res){
    console.log(res);
    }
    })
    })
    })

  • 使用 xhr 发送 POST 请求

form 表单

  • form 表单的属性




  • 表单的提交事件

渲染 UI 结构

传统方法

<body>
    <div id="title"></div>
    <div>姓名:<span id="name"></span></div>
    <div>年龄:<span id="age"></span></div>
    <div>会员:<span id="isVIP"></span></div>
    <div>注册时间:<span id="regTime"></span></div>
    <div>爱好:
        <ul id = "hobby">
            <li>爱好1</li>
            <li>爱好2</li>
        </ul>
    </div>
    <script>
        var data = {
            title: '<h3>用户信息</h3>',
            name: 'zs',
            age: 20,
            isVIP: true,
            regTime: new Date(),
            hobby: ['吃饭', '睡觉', '打豆豆']
        }

        $(function () {
            $('#name').html(data.name)
            $('#title').html(data.title)
            $('#age').html(data.age)
            $('#isVIP').html(data.isVIP)
            $('#regTime').html(data.regTime)
        })

        var rows = []
        $.each(data.hobby, function (i, item) {
            rows.push('<li>' + item + '</li>')
        })
        $('#hobby').html(rows.join(''))

    </script>
</body>

模板引擎

--- 要导入 template-web.js

<body>
    <div id="container"></div>

    <!-- 3.定义模板
    模板的 html 结构必须定义到 script 中
    type 改为 text/html 默认 text/javascript -->
    <script type="text/html" id='tpl-user'>
        <h1>{{name}}   ---   {{age}}</h1>

         <!-- 原文输出 {{@ value}} -->
        {{@ test}}

        <div>
            {{if flag == 0}}
            flag 的值为 0
            {{else if flag == 1}}
            flag 的值为 1
            {{/if}}
        </div>

        <!-- 循环遍历 -->
        <ul>
            {{each hobby}}
            <li>索引是:{{$index}},循环项是:{{$value}}</li>
            {{/each}}
        </ul>

         <!-- 过滤器 -->
        <h3>{{regTime | dateFormat}}</h3>

    </script>

    <script>
        // 定义处理时间的过滤器
        template.defaults.imports.dateFormat = function (date) {
            // console.log(date);
            var y = date.getFullYear()
            var m = date.getMonth() + 1
            var d = date.getDate()
            return y + '-' + m + '-' + d

        }

        // 2.定义需要渲染的数据
        var data = {
            name: 'zs', age: 20, test: '<h3>测试原文输出</h3>', flag: 1, hobby: ['吃饭', '睡觉', '敲代码'], regTime: new Date()
        }

        // 4.调用 template 函数
        var htmlStr = template('tpl-user', data)
        console.log(htmlStr);

        // 渲染 5.html 结构
        $('#container').html(htmlStr)

    </script>

</body>

exec 函数

  • 根据正则表达式提取分组 正则表达式里的()是一个分组 replace 替换

  • while 循环进行 replace 操作

自定义模板引擎

    <script>
        // 定义数据
        var data = { name: '张三', age: 20, sex: '男', address: '江西上饶' }
        // 调用模板引擎
        var htmlStr = template('tpl-user', data)
        // 渲染 HTML 结构
        document.getElementById('user-box').innerHTML = htmlStr

        // 自定义模板引擎
        function template(id, data) {
            var str = document.getElementById(id).innerHTML
            var pattern = /{{\s*([a-zA-Z]+)\s*}}/

            var result = null
            while (result = pattern.exec(str)) {
                str = str.replace(result[0], data[result[1]])
            }
            return str
        }
    </script>

JSON

  • JSON 和 JS 互换


  • JSON.parse 的应用

form 对象

  • 使用 Form 对象快速获取表单里的元素

文件

  • 使用 xhr 上传文件

  • 使用 jQuery 上传文件

其他

URL 编码与解码

    <script>
        var str = '江西上饶'
        var str2 = encodeURI(str)
        console.log(str2);
        var str3 = decodeURI('%E6%B1%9F%E8%A5%BF')
        console.log(str3);
    </script>

封装自己的 Ajax 函数

    <script>
        xyee({
            method: 'GET',
            url: 'http://www.liulongbin.top:3006/api/getbooks',
            data: {
                id: 1
            },
            success: function (res) {
                console.log(res);
            }
        })

        xyee({
            method: 'POST',
            url: 'http://www.liulongbin.top:3006/api/addbook',
            data: {
                bookname: '小吖ee',
                author: 'xyee',
                publisher: '江西出版社'
            },
            success: function (res) {
                console.log(res);
            }
        })
    </script>

设置超时时限

    <script>
        var xhr = new XMLHttpRequest();

        // 设置超时时间
        xhr.timeout = 30
        // 设置超时以后的处理函数
        xhr.ontimeout = function(){
            console.log('请求超时');
        }

        xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks')
        xhr.send()
        xhr.onreadystatechange = function(){
            if(xhr.readyState==4 && xhr.status==200){
                console.log(xhr.responseText);
            }
        }
    </script>

axios 的使用 --- 需导入 axios.js

<body>
    <button id="btn1">发起 GET 请求</button>
    <button id="btn2">发起 POST 请求</button>
    <button id="btn3">直接使用 axios 发起 GET 请求 </button>
    <button id="btn4">直接使用 axios 发起 POST 请求 </button>
    <script>
        document.getElementById('btn1').addEventListener('click', function () {
            var url = 'http://www.liulongbin.top:3006/api/get'
            var paramsObj = { name: 'zs', age: 20 }
            axios.get(url, { params: paramsObj }).then(function (res) {
                console.log(res.data);
            })
        })
        document.getElementById('btn2').addEventListener('click',function(){
            var url = 'http://www.liulongbin.top:3006/api/post'
            var dataObj = {address:'北京',location:'顺义区'}
            axios.post(url,dataObj).then(function(res){
                console.log(res.data);
            })
        })
        document.querySelector('#btn3').addEventListener('click',function(){
            var url = 'http://www.liulongbin.top:3006/api/get'
            var paramsObj = {name:'ls',age:20}
            axios({
                method:'GET',
                url:url,
                params:paramsObj
            }).then(function(res){
                console.log(res.data);
            })
        })
        document.querySelector('#btn4').addEventListener('click',function(){
            axios({
                method:'POST',
                url:'http://www.liulongbin.top:3006/api/post',
                data:{
                    name:'xm',
                    age:20,
                    sex:'男'
                }
            }).then(function(res){
                console.log(res.data);
            })
        })
    </script>

发起跨域的 Ajax 请求

    <script>
        $.ajax({
            method:'GET',
            url:'http://www.liulongbin.top:3006/api/jsonp',
            data:{
                name:'zs',
                age:20
            },
            success:function(res){
                console.log(res);
            }
        })
    </script>

JSON

  • success({ name: 'zs', age: 20 }) // 02.js


  • 使用 JQuery 发起 JSON 数据请求

节流阀

    <script>
        $(function () {
            // 获取到图片
            var angel = $('#angel')
            // 定义一个节流阀
            var timer = null
            // 绑定 mousemove 事件
            $(document).on('mousemove', function (e) {
                // 不为空 就不执行图片移动效果
                if (timer) return
                timer = setTimeout(function () {
                    // 设置图片位置
                    angel.css('left', e.pageX + 'px').css('top', e.pageY + 'px')
                    // 效果执行完设为空
                    timer = null
                }, 20)

            })
        })
    </script>