Ajax02

最新推荐文章于 2024-09-15 19:20:58 发布

Ordbiao

最新推荐文章于 2024-09-15 19:20:58 发布

阅读量118

点赞数

分类专栏： Ajax 文章标签： ajax

本文链接：https://blog.csdn.net/tooHar/article/details/117261675

版权

Ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

笔记目录

小概
1. form表单提交数据
2. 渲染UI页面
3. 模板引擎中的标准语法
总结

小概

本章学习内容：form表单配合ajax提交数据，（form评论案例），三种渲染UI界面的方式，模板引擎的学习。今天的内容大部分围绕ajax请求回来数据的处理上，还有模板引擎和过滤函数的使用。

1. form表单提交数据

利用表单域以及ajax进行网络请求,提交数据
ajax：优点局部加载数据，不会刷新页面
form：可以快速获得所有数据（.serialize()方法）

<body>
    <form action="" method="GET">
        <!-- action: 表单数据提交的地址/接口 -->
        <!-- 如果有地址,则会实现跳转;如果没有地址,则会刷新当前的整个页面 -->
        <!-- method: 指定请求的方式get/post -->
        <!-- get请求: 那么所有的参数会拼接到url的末端?key1=value1&key2=value2 -->
        <!--          只有不重要的,获得简单的数据才可以建议显示 -->
        <!-- post请求: 同样可以实现页面跳转,但是不会显示参数,相对比较安全 -->
        <!-- name属性: 决定了参数的key值,按照接口文档 -->
        书名: <input type="text" id="bookname" name="bookname"><br>
        作者: <input type="text" id="author" name="author"><br>
        出版社: <input type="text" id="publisher" name="publisher"><br>
        <button type="submit">提交</button>
    </form>
</body>
</html>
<script src="./lib/jquery.js"></script>
<script>
    $(function(){
        $('form').on('submit',function (e) {
            e.preventDefault();
            // 阻止标签的默认效果

            // 1. 如何获得表单数据
            // let bookname = $('#bookname').val().trim();
            // let author = $('#author').val().trim();
            // let publisher = $('#publisher').val().trim();

            // 2. 快速获得表单域所有数据
            // serialize: 一次性获得表单中所有的数据,生成字符串
            // key=value&key=vaule
            let data = $(this).serialize();

            $.ajax(
                {
                    type:'post',
                    url:'http://www.liulongbin.top:3006/api/addbook',
                    data: data,
                    success: function (backData) {
                        console.log(backData);
                    }
                }
            )
        })
    })
</script>

注意: 当点击提交按钮的时候,页面会跳转或者刷新(阻止/阻断)
监听表单域的提交动作,只要发现表单域要提交了,立刻打断
.serialize()方法获取所有form表单的数据：‘key=value&key=vaule’,满足ajax的data:字符串的格式。

~~form评论案例~~

2. 渲染UI页面

2.1 传统的赋值方式渲染结构

数据比较少时可以使用，但是不适合需要大范围渲染时使用

<body>
    <h1 id="title"></h1>
    <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>
            <li>爱好3</li>
        </ul>
    </div>
</body>
<script src="./lib/jquery.js"></script>
<script>
    $(function () {
        // 1. 准备一组数据
        let data = [
            {
                title: '这是亚索的个人信息',
                name: '托儿所',
                age: 28,
                isVIP: true,
                regTime: new Date(),
                hobby: ['哈撒给', '吹风', 'E往直前']
            },
            {
                title: '这是影流之主的个人信息',
                name: '劫',
                age: 30,
                isVIP: true,
                regTime: new Date(),
                hobby: ['手里剑', '影分身', '禁奥义：影杀']
            },
            {
                title: '这是暮光之眼的个人信息',
                name: '慎',
                age: 35,
                isVIP: true,
                regTime: new Date(),
                hobby: ['嘲讽', '刮痧', '密奥义：慈悲度魂落']
            }
        ]
        // 2.利用传统赋值方式来渲染页面
        // $('#title').text(data[0].title);
        // $('#name').text(data[0].name);
        // $('#age').text(data[0].age);
        // $('#isVIP').text(data[0].isVIP);
        // $('#regTime').text(data[0].regTime);
        // $('li').each(function (index,ele) {
        //     ele.innerText =data[0].hobby[index];
        // })

2.2 利用模板字符串

        let htmlStr = '';
        $.each(data, function (index,value) {
            htmlStr += `
            <h1 id="title">${value.title}</h1>
            <div>姓名：<span id="name">${value.name}</span></div>
            <div>年龄：<span id="age">${value.age}</span></div>
            <div>会员：<span id="isVIP">${value.isVIP}</span></div>
            <div>注册时间：<span id="regTime">${value.regTime}</span></div>
            <div>
              爱好：
              <ul id="hobby">
                <li>${value.hobby[0]}</li>
                <li>${value.hobby[1]}</li>
                <li>${value.hobby[2]}</li>
              </ul>
            </div>
            `
        })

        $('body').html(htmlStr);

2.3 使用模板引擎

使用模板引擎4个步骤：

导入模板文件
准备需要导入的数据（可以是请求返回的数据，也可以是自定义的数据）
准备模板结构（页面结构和添加导入的数据）
用template（模板id,数据）方法生成标签字符串，再用jq的html方法添加到目标对象中。

3. 模板引擎中的标准语法

1.标准输出,内容是什么就输出什么
不会解析标签

<script type="text/html" id="tpl-info">
	<div>{{@title}}</div>		//<h1>这是张三的个人信息</h1>
    <div>姓名: {{name}}</div>      
    <div>年龄: {{age}}</div>
    <div>性别: {{gender}}</div>
</script>
<script>
	        let data = {
            title: '<h1>这是张三的个人信息</h1>',
            name: '张三',
            age: 38,
            gender: '可爱的男孩子',
        }
        //  结合数据与模板,生成标签字符串
        let htmlStr = template('tpl-info', data);
        // 用可以解析标签的方法添加到指定位置就可以实现渲染
</script>

2.原义输出,让标签生效: @
{{@title}}，加个@在需要解析标签的前面，就可以解析html标签

3.模板引擎中的i判断语法
语法： {{if 判断语句}}
执行语句
{{else if 判断语句}}
执行语句
{{else if 判断语句}}
执行条件
{{/if}}

4.循环语法
{{each 数组名}}
{{$ index}}.下标
{{$value}} 值
{{/each}}
jq中循环遍历数组的方法each

5.过滤函数
问题: 提供的原始数据格式不满足条件，对原始数据进行再次处理: 过滤函数
如何调用过滤函数: {{原始数据 | 过滤函数}}
比如对处理时间格式

<script type="text/html" id="tpl-info">
    <div>注册时间: {{time | getTime}}</div>
</script>
<script>
    $(function(){
        //  准备数据
        let data = {
        time: new Date()
        }
        // 声明一个过滤函数,保存模板引擎指定的位置
        // template.defaults.imports.过滤函数名 = function(){}
        template.defaults.imports.getTime = function (time) {
            // 处理时间对象,获得需要的格式
            let year = time.getFullYear();
            let month = time.getMonth() + 1;
            let day = time.getDate();
            let hour = time.getHours();
            let min = time.getMinutes();
            let sec = time.getSeconds();

            // 返回处理好的数据
            return `${year}-${month}-${day} ${hour}:${min}:${sec}`;
        }
        // . 结合数据与模板,生成标签字符串
        let htmlStr = template('tpl-info', data);
        $('.container').html(htmlStr);

模板引擎外如何声明过滤函数
template.defaults.imports.函数名 = fn()；
~~案例：新闻列表~~

总结

事件对象阻止标签的默认效果,比如a标签的默认跳转，form表单submit提交事件的页面刷新或者跳转（form标签的action属性有地址就会跳转，没就会刷新页面）。e.prevenDefault().记得之前说过return false也可以实现。
$.ajax({})默认请求方式是get ，属性type(/method)：post可以改变请求方式，
如果遇到返回值是字符串的，但是想用数组的方法循环遍历，可以.split（‘切割符’），split切割后回返回一个数组。
form有一个方法，.serialize()一次性获得表单中所有的数据,生成字符串。（value值被转义了）。