ajax - 接口、表单、模板引擎

Heymar-10 2023-03-28 原文

今天继续ajax的一个学习，首先明确一个观念，接口，什么是接口，当使用ajax请求数据时，被请求的url就叫做数据接口也就是接口，注意每个接口必须有请求方式，这里有一个接口的测试工具，postman自称是全球最快的，反正使用起来没多大毛病，使用这个软件的时候有一个注意点就是在post请求的时候，在body里面输入参数要选择x-www-form-这个选项才行，然后是接口文档，我们如果要调用接口，那肯定是要参照接口文档的，里面的包含这个接口的所有信息，一般一个接口文档大致分为以下五个内容：

①接口名称：能够一眼看出这个接口是个什么类型的接口

②url：这个不用多说，接口的调用地址

③调用方式：会给你说明这个接口要用get还是post

④参数格式：接口需传递的参数，每个参数必须包含参数名称、参数类型以及参数说明

⑤响应格式：接口返回值的描述，一般包含数据名称类型说明

然后继续看到一个普遍应用，表单，我们说的form表单一般是拿来收集数据的，然后再form里面有一些属性比如

action表示向何处发送表单数据，如果未指定就是当前页面

target是在何处打开这个action，就跟a标签的一样

method是发送action的方式可以为get或者post默认是get，get适合用来提交一些简单数据的，post适合提交复杂数据，我们在项目中用到post居多

enctype是规定发送表单数据前如何对数据进行编码，一般默认是前面提到的x-www-form-urlencoded，但是这里要注意下如果说是包含文件上传的表单的话，这里的值要改为multipart/form-data

继续看到表单的同步提交，就是当你一点击提交，页面就会发生跳转到action的地址上去，这样的用户体验极差，而且页面之前的数据和状态都会丢失，怎么来解决这一现象，我们只需要让表单控件负责采集数据，ajax来负责提交即可。

如果要用到ajax跟表单的一个配合，首先要知道一个事件也就是submit提交事件，然后在这里面组织表单默认行为，因为每次一点提交就会刷新页面，然后通过一个函数可快速获取到表单的数据，。serialize（）使用这个有个前提就是必须为表单里面每个元素添加name属性就像面这样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="/login">
        <input type="text" name="uname">
        <input type="password" name="password">
        <input type="submit" value="提交">
    </form>
    <script src="../day01/lib/jquery.js"></script>
    <script>
        $('form').on('submit', e => {
            console.log(11);
            e.preventDefault()
            // 这里闹了个大乌龙，刚开始我是用的$(this)我就说为什么一直获取不到数据思来想去也就是这里的问题应该，后来才知道我这里明明用的是
            // 箭头函数啊，箭头函数的this是谁啊能乱用吗？
            var str = $('form').serialize()
            console.log(str);
        })
    </script>
</body>
</html>

案例：评论列表，页面还是才去bootstrap，vscode可安装bs3实现快速bootstrap编程，这个案例就是通过接口先获取评论列表的数据，渲染到html上，然后通过接口发表评论

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../day01/lib/bootstrap.css">
    <script src="../day01/lib/jquery.js"></script>
</head>
<body style="padding: 15px;">
    
    <div class="panel panel-primary">
          <div class="panel-heading">
                <h3 class="panel-title">发表评论</h3>
          </div>
          <div class="panel-body">
              <form>
                <div>评论人</div>
                <input type="text" class="form-control" name="username">
                <div>内容</div>
                <textarea class="form-control" name="content"></textarea>
                <button type="submit" class="btn btn-primary">发表评论</button>
              </form>
          </div>
    </div>
    

    
    <ul class="list-group">
        
          
    </ul>
    <script>
        // 1.获取评论列表数据
        function getComment() {
            $.ajax({
            type : 'get',
            url : 'http://www.liulongbin.top:3006/api/cmtlist',
            success : res => {
                console.log(res);
                if (res.status !== 200) {
                    return alert('获取评论列表失败')
                } else {
                    $('.list-group').empty()
                    $.each(res.data, (i, item) => {
                        $('.list-group').append(`<li class="list-group-item">
            <span class="badge" style="background-color: #f0ad4e;">评论时间：${item.time}</span>
            <span class="badge" style="background-color: #5bc0de;">评论人：${item.username}</span>
            ${item.content}
        </li>`)
                    })
                }
            }
        })
        }
        getComment()
        // 2.发表评论
            $('form').on('submit', function(e) {
                e.preventDefault()
               var str = $('form').serialize()
            //    console.log(str);
                $.post('http://www.liulongbin.top:3006/api/addcmt', str,res => {
                    if (res.status !== 201) {
                        return alert('发表评论失败')
                    } else {
                        getComment()
                        // 2.1 提交成功后应该将表单的内容清空，这里有个快捷方法，直接将form用她的reset方法，但是要先将jq转为原生对象
                        $('form')[0].reset()
                    }
                })
            })
    </script>
</body>
</html>

继续看到一个概念叫做模板引擎，看过我之前的案例都知道，我们之前渲染ul的时候都是采取的字符串拼接的方式，对res里面的数据进行遍历，进行字符串拼接，而反复的进行字符串拼接产生的影响就不多多说了吧，大量耗费内存资源，所以这个时候就产生了一种模板引擎就是程序员根据指定模板结构和数据，自动生成一个完整的html界面。

那么当下比较优秀的模板引擎之一 art-template使用它有几个步骤分为安装、导入、定义数据、定义模板、调用template、渲染html，这里面还有一些注意事项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div></div>
    <script src="../day01/lib/jquery.js"></script>
    <!-- 1.首先第一步肯定是要导入下载的template模板版引擎js -->
    <script src="./template-web.js"></script>
    <script type="text/html" id="model">
        <!-- // 3.然后第三步定义模板注意也是script来书写，然后还有一个注意点因为平时写的script基本上是text/JavaScript意思就是script里面解析的
        // 的是js代码，但是这里我们既然是html模板所以就不能忆原来那种方式来默认
-->        
 <!-- 这样一添加，连注释都变了 -->
 <!-- 3.1这里还有一个注意点，在template模板里面变量的占位符是两个花括号 -->
 <!-- 3.2这里里面的变量写什么就写数据里面的属性名即可 -->
        <span>{{name}}</span>
    </script>
    <script>
        // 2.导入后其实在js当中就存在了一个template的函数，你一输的话它是有关键字出来的
        // 第二步需要定义数据
        var data = {name : '张三'}
        // 4.定义完后继续在这里调用template函数
        // 4.1这个函数有两个参数，也是为什么前面要定义两个东西的原因，第一个参数是模板的id(这个id添加在刚在定义模板的script中,而且并不用写#)，第二个参数是需要渲染的对象
        // 4.2调用完后会有一个返回值注意用一个变量去存储
        var strHtml = template('model', data)
        // 5.都结束后就是最后的渲染到HTML中
        console.log(strHtml);
        $('div').html(strHtml)
        </script>
        

</body>
</html>

关于模板引擎的使用记住上面我说的步骤就行了，在这个定义模板里面我们用到了一个占位符｛｛｝｝这个里面的写法是有讲究的，我们叫做标准语法

①正常输出可以在里面写{{value/obj.key/arr[0]/a ? a : b}} 这些简单复杂数据都是可以写在里面的

②原义输出就是如果value是一个html结构那么你要让他在渲染的时候显示出来就需要在前面添加一个@ {{@value}}

③条件输出 {{if 条件}} 执行语句 {{/if}} 当然你可以在中间穿插{{else if 条件}}

④循环输出 {{each 循环的变量}} 在这里面有两个值可以使用 {{$value}}当前乡的值 {{$当前项的索引}} {{/each}}

⑤过滤器就是当你对{{value}}的值不满意的时候你可以{{value | filterName}} 然后再js代码里面template.defaults.imports.filterName = function(value) {}对这个值进行修改，注意return出这个处理结果，这个filtername是可以自定义的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div></div>
    <script src="../day01/lib/jquery.js"></script>
    <!-- 1.首先第一步肯定是要导入下载的template模板版引擎js -->
    <script src="./template-web.js"></script>
    <script type="text/html" id="model">
        <!-- // 3.然后第三步定义模板注意也是script来书写，然后还有一个注意点因为平时写的script基本上是text/JavaScript意思就是script里面解析的
        // 的是js代码，但是这里我们既然是html模板所以就不能忆原来那种方式来默认
-->        
 <!-- 这样一添加，连注释都变了 -->
 <!-- 3.1这里还有一个注意点，在template模板里面变量的占位符是两个花括号 -->
 <!-- 3.2这里里面的变量写什么就写数据里面的属性名即可 -->
        <span>{{name}}</span>
        <div>{{regTime | dateFormat}}</div>
    </script>
    <script>
        template.defaults.imports.dateFormat = function(date) {
            var y = date.getFullYear()
            var m = date.getMonth() + 1
            var d = date.getDate()
            return y + '-' + m + '-' + d  
        }
        // 2.导入后其实在js当中就存在了一个template的函数，你一输的话它是有关键字出来的
        // 第二步需要定义数据
        var data = {name : '张三',regTime : new Date()}
        // 4.定义完后继续在这里调用template函数
        // 4.1这个函数有两个参数，也是为什么前面要定义两个东西的原因，第一个参数是模板的id(这个id添加在刚在定义模板的script中,而且并不用写#)，第二个参数是需要渲染的对象
        // 4.2调用完后会有一个返回值注意用一个变量去存储
        var strHtml = template('model', data)
        // 5.都结束后就是最后的渲染到HTML中
        console.log(strHtml);
        $('div').html(strHtml)
        </script>
        

</body>
</html>

我们继续看到正则与字符串的操作，其实解释来看一下模板引擎的一个原理，首先明确一个正则的函数。exec（）可以检索字符串中满足正则表达式的，有就返回，没有就返回null。

然后是分组我们将正则里面用括号包起来的内容叫做一个分组，可以通过分组来提取想要的内容。

然后看到replace，其实这些包括正则前面都说过的也可以看前面的一个博文，replace就是字符串的替换方法，可以将参数里面前面一个替换为后面一个。先说到这里看一个代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let str = '我是{{name}}'
        let reg = /{{([a-zA-Z]+)}}/
        let regResult = reg.exec(str)
        console.log(regResult);
    </script>
</body>
</html>

多次replace

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let str = '我叫{{name}}今年{{age}}岁了'
        let reg = /{{\s*([a-zA-Z]+)\s*}}/
        str1 = reg.exec(str)
        str = str.replace(str1[0],str1[1])
        console.log(str);
        str1 = reg.exec(str)
        str = str.replace(str1[0],str1[1])
        console.log(str);
        str1 = reg.exec(str)
        console.log(str1);
    </script>
</body>
</html>

有没有感觉上面的代码有点冗余，没错这里是可以通过循环来实现的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var str = '我叫{{name}}今年{{age}}岁了'
        var reg = /{{\s*([a-zA-Z]+)\s*}}/
        var result = reg.exec(str)
        while (result) {
            str = str.replace(result[0], result[1])
            result = reg.exec(str)
        }
        console.log(str);
    </script>
</body>
</html>

然后replace替换为真值，很简单很小的一个改动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var data = {name : '张三', age : 19}
        var str = '我叫{{name}}今年{{age}}岁了'
        var reg = /{{\s*([a-zA-Z]+)\s*}}/
        var result = reg.exec(str)
        while (result) {
            str = str.replace(result[0], data[result[1]])
            result = reg.exec(str)
        }
        console.log(str);
    </script>
</body>
</html>

ok这一系列结束过后我们自己就可以来定义一个简易版的模板引擎，把刚才说的正则字符串与模板引擎的规则结合起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./template.js"></script>
</head>
<body>
    <div class="box"></div>
    <!-- 1.定义模板结构 -->
    <script type="text/html" id="model">
        <div>姓名：{{name}}</div>
        <div>年龄：{{  age  }}</div>
        <div>性别：{{  gender}}</div>
        <div>住址：{{address  }}</div>
    </script>
    <!-- 2.预调用模板引擎 -->
    <script>
        // 3.模板引擎函数
        // 2.1定义数据
        var data = {
            name : '张三',
            age : 14,
            gender : '男',
            address : '重庆市江北区'
        }
        // 2.2调用
        var strModel = template('model', data)
        console.log(strModel);
        // 2.3渲染
        document.querySelector('.box').innerHTML = strModel
    </script>
</body>
</html>

ajax 接口 span color rgba JavaScript

有关ajax - 接口、表单、模板引擎的更多相关文章

ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2
我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib
ruby - 通过 erb 模板输出 ruby 数组 - 2
我正在使用puppet为ruby程序提供一组常量。我需要提供一组主机名，我的程序将对其进行迭代。在我之前使用的bash脚本中，我只是将它作为一个puppet变量hosts=>"host1,host2"我将其提供给bash脚本作为HOSTS=显然这对ruby不太适用——我需要它的格式hosts=["host1","host2"]自从phosts和putsmy_array.inspect提供输出["host1","host2"]我希望使用其中之一。不幸的是，我终其一生都无法弄清楚如何让它发挥作用。我尝试了以下各项:我发现某处他们指出我需要在函数调用前放置“function_”……这
ruby - 在没有 sass 引擎的情况下使用 sass 颜色函数 - 2
我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem，所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re
ruby - 如何在 Rails 4 中使用表单对象之前的验证回调？ - 2
我有一个服务模型/表及其注册表。在表单中，我几乎拥有服务的所有字段，但我想在验证服务对象之前自动设置其中一些值。示例:--服务Controller#创建Action:defcreate@service=Service.new@service_form=ServiceFormObject.new(@service)@service_form.validate(params[:service_form_object])and@service_form.saverespond_with(@service_form,location:admin_services_path)end在验证@ser
jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2
rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送
ruby-on-rails - Rails 中的推荐引擎 - 2
我想为我的Rails网络应用程序提供推荐功能。特别是，我想向新注册的用户推荐他可能想要关注的其他用户。Rails中是否有用于此目的的引擎/gem？如果没有，我应该从哪里开始构建它？谢谢。最佳答案有Coletivogemhttps://github.com/diogenes/coletivo我试了一下。在MySQL上运行。Neo4jhttp://neo4j.org真的很容易实现一个“跟随谁”。事实上，大多数展示其能力的样本都涉及“跟随谁”。快速提示-只有在JRuby上运行时，Neo4j.rb才会很酷。如果不是-使用Neograph
世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2
无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD
叮咚买菜基于 Apache Doris 统一 OLAP 引擎的应用实践 - 2
导读：随着叮咚买菜业务的发展，不同的业务场景对数据分析提出了不同的需求，他们希望引入一款实时OLAP数据库，构建一个灵活的多维实时查询和分析的平台，统一数据的接入和查询方案，解决各业务线对数据高效实时查询和精细化运营的需求。经过调研选型，最终引入ApacheDoris作为最终的OLAP分析引擎，Doris作为核心的OLAP引擎支持复杂地分析操作、提供多维的数据视图，在叮咚买菜数十个业务场景中广泛应用。作者｜叮咚买菜资深数据工程师韩青叮咚买菜创立于2017年5月，是一家专注美好食物的创业公司。叮咚买菜专注吃的事业，为满足更多人“想吃什么”而努力，通过美好食材的供应、美好滋味的开发以及美食品牌的孵
UE4 源码阅读：从引擎启动到Receive Begin Play - 2
一、引擎主循环UE版本：4.27一、引擎主循环的位置：Launch.cpp:GuardedMain函数二、、GuardedMain函数执行逻辑：1、EnginePreInit：加载大多数模块int32ErrorLevel=EnginePreInit(CmdLine);PreInit模块加载顺序：模块加载过程：（1）注册模块中定义的UObject，同时为每个类构造一个类默认对象（CDO，记录类的默认状态，作为模板用于子类实例创建）（2）调用模块的StartUpModule方法2、FEngineLoop::Init()1、检查Engine的配置文件找出使用了哪一个GameEngine类（UGame
ruby-on-rails - Mandrill API 模板 - 2
我正在使用Mandrill的RubyAPIGem并使用以下简单的测试模板:testastic按照Heroku指南中的示例，我有以下Ruby代码:require'mandrill'm=Mandrill::API.newrendered=m.templates.render'test-template',[{:header=>'someheadertext',:main_section=>'Themaincontentblock',:footer=>'asdf'}]mail(:to=>"JaysonLane",:subject=>"TestEmail")do|format|format.h

ajax - 接口、表单、模板引擎

有关ajax - 接口、表单、模板引擎的更多相关文章

随机推荐