ajax学习第二天
ajax学习第二天
1.form表单
-
作用：采集数据到服务器
-
属性
| 属性 | 值 | 描述 |
|---|---|---|
| action | URL地址 | 规定当提交表单时，向何处发送表单数据 |
| method | get或post | 规定以何种方式把表单数据提交到action URL |
| enctype | application/x-www-form-urlencoded | 规定在发送表单数据前如何将其编码 |
| target | _blank, _self, _parent, _top | 规定在何处打开action URL |
1.1target属性说明
- _blank:在新窗口打开
- _self:默认，在相同的框架中打开
- _parent,在父框架中打开（很少用）
- _top:在整个窗口打开：（很少用）
- framename:在指定的框架中打开
_blank 示例
<!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" target="_blank"> <input type="text" name="user"> <input type="password" name="psw"> <input type="submit"> </form> </body> </html>
- 效果图
1.2 method属性说明
- get适合提交少量的，简单的数据(默认)(提供uRL地址形式提交，不安全)
- post适合用于提交大量的，复杂的或包含文件上传的数据
get示例
<!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" target="_blank" method="GET"> <input type="text" name="user"> <input type="password" name="psw"> <input type="submit"> </form> </body> </html>
- 效果图
post 示例
<!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" target="_blank" method="post"> <input type="text" name="user"> <input type="password" name="psw"> <input type="submit"> </form> </body> </html>
- 效果图
1.3 enctype 属性说明
| 值 | 描述 |
|---|---|
| application/x-www-form-urlencoded | 在发送前编码所有字符（默认） |
| multipart/form-data | 不对字符编码，在使用包含文件上传控件的表单时，必须使用该值 |
| text/plain | 空格转换为“+”加号，但不对特殊字符编码(很少用) |
1.4 action属性说明
-
如果不指定action的属性值，则默认值为当前页面的URL地址
-
示例
<!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=""> <input type="text" name="user"> <input type="password" name="psw"> <input type="submit"> </form> </body> </html>
- 效果图
- 指定action的示例
<!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="user"> <input type="password" name="psw"> <input type="submit"> </form> </body> </html>
- 效果图
1.5 表单的同步提交
-
定义：点击submit按钮，实现表单提交，使页面跳转到action URL的行为
-
缺点
- 页面会发生跳转
- 页面之前的状态和数据会丢失
-
解决方案
- 表单用于数据采集，ajax实现数据提交
2. ajax提交表单数据
2.1 监听表单提交
- 在jQuery中的监听表单提交事件
$("#form1").submit(function(e){}) //第二种方式 $("#form2").on("submit",function(e){})
示例
<!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="./lib/jquery.js"></script> </head> <body> <form action="/login" target="_blank" method="post" class="form1"> <input type="text" name="user"> <input type="password" name="psw"> <input type="submit"> </form> <script> $(function() { $(".form1").on("submit", function(e) { console.log(e); }) }) </script> </body> </html>
- 效果图
2.2 阻止表单默认提交行为
e.preventDefault();
示例
<!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="./lib/jquery.js"></script> </head> <body> <form action="/login" target="_blank" method="post" class="form1"> <input type="text" name="user"> <input type="password" name="psw"> <input type="submit"> </form> <script> $(function() { $(".form1").on("submit", function(e) { alert("表单提交事件"); console.log(e); // 阻止表单默认行为 e.preventDefault(); }) }) </script> </body> </html>
- 效果图
2.3 通过serialize（）函数获取表单所有数据
-
前提：必须为每一个form中的表单元素添加name属性
-
收集交给表单，发送交给ajax
<!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="./lib/jquery.js"></script> </head> <body> <form action="/login" target="_blank" method="post" class="form1"> <input type="text" name="user"> <input type="password" name="psw"> <input type="submit"> </form> <script> $(function() { $(".form1").on("submit", function(e) { // alert("表单提交事件"); // console.log(e); // 阻止表单默认行为 e.preventDefault(); // 提交交给ajax var data = $(this).serialize(); // 返回值为字符串 console.log(data); }) }) </script> </body> </html>
- 效果图
3. 一个案例
3.1 bs3框架的一些知识点
单独的表单控件会被自动赋予一些全局样式。所有设置了
.form-control类的<input>、<textarea>和<select>元素都将被默认设置宽度属性为width: 100%;。
- 面板布局
bs3-panel
- 列表布局
bs3-list
一个发表评论案例
<!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="./lib/bootstrap.css"> <style> body { padding: 15px; } .list-group-item .badge:nth-child(1) { background-color: orange !important; } .list-group-item .badge:nth-child(2) { background-color: skyblue !important; } </style> <script src="./lib/jquery.js"></script> </head> <body> <!-- vscode 快捷键 bs3-panel --> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">发表评论</h3> </div> <form class="panel-body" id="addCmt"> <p>评论人</p> <input type="text" class="form-control person" name="username"> <p>评论内容</p> <!-- bs3-textarea --> <textarea id="input" class="form-control" rows="3" required="required" name="content"></textarea> <button type="submit" class="btn btn-primary" style="margin-top: 5px;">发表</button> </form> </div> <!-- bs3-list --> <ul class="list-group"> <li class="list-group-item"> <span class="badge">评论时间:</span> <span class="badge">评论人:</span> item </li> </ul> <script> var cmtlists = []; getCmt(cmtlists); // 从服务器获取评论列表 function getCmt(cmtlists) { $.ajax({ method: "GET", url: "http://www.liulongbin.top:3006/api/cmtlist", success: function(res) { if (res.status === 200) { cmtlists = res.data; flesh(cmtlists); } else { alert("获取评论列表失败"); } } }) } // 渲染页面 function flesh(cmtlists) { $("ul.list-group").html(""); for (var i = 0; i < cmtlists.length; i++) { var li = $('<li class="list-group-item"><span class="badge">评论时间:' + cmtlists[i].time + '</span><span class="badge">评论人:' + cmtlists[i].username + '</span> ' + cmtlists[i].content + '</li>'); $("ul.list-group").append(li); } } // 写数据到服务器 // $(".btn").on("click", function() { // if ($("#input").val() !== '' && $(".person").val() !== '') { // $.ajax({ // method: "POST", // url: "http://www.liulongbin.top:3006/api/addcmt", // data: { // username: $(".person").val(), // content: $("#input").val() // }, // success: function(res) { // if (res.status === 201) { // alert("发布评论成功"); // getCmt(cmtlists); // } else { // alert("发布评论失败"); // } // } // }) // } // }) // 监听表单事件 $(function() { $("#addCmt").on("submit", function(e) { // 阻止默认行为 e.preventDefault(); // 发起post请求 // 获取表单信息 var adata = $(this).serialize(); // $.ajax({ // method: "post", // url: "http://www.liulongbin.top:3006/api/addcmt", // adata, // success: function(res) { // if (res.status === 201) { // getCmt(cmtlists); // // 清空表单信息 // $("#addCmt")[0].reset(); // } else { // alert("发表评论失败"); // } // } // }) $.post("http://www.liulongbin.top:3006/api/addcmt", adata, function(res) { if (res.status === 201) { getCmt(cmtlists); // 清空表单信息 $("#addCmt")[0].reset(); } else { alert("发表评论失败"); } }) }) }) </script> </body> </html>
- 效果图
4. 模板引擎
- 定义：根据程序员指定的模板结构和数据，自动生成一个完整的HTML页面
- 图解
-
解决上文字符串反复拼接的问题
-
优点
- 减少了字符串的拼接操作
- 代码结构清晰
- 利用阅读和维护
5.art-template模板引擎
5.1 有无引擎的对比
- 无引擎
<!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="./lib/jquery.js"></script> </head> <body> <!-- 1.首先创建HTML结构 --> <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"> </ul> </div> <script> // 例如数据为 var data = { title: '<h3>用户信息</h3>', name: 'zs', age: 20, isVIP: true, regTime: new Date(), hobby: ['吃饭', '睡觉', '打豆豆'] } $("#title").html(data.title); $("#name").html(data.name); $("#age").html(data.age); $("#isVip").html(data.isVIP); $("#regTime").html(data.regTime); var temp = []; $.each(data.hobby, function(i, ele) { temp.push("<li>" + ele + "</li>"); }) $("#hobby").append(temp.join(' ')); </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> <script src="./lib/jquery.js"></script> <!-- 引入art-template-web 渲染js --> <script src="./lib/template-web.js"></script> <!-- 2.引入后，页面就会增加一个新的函数 template('模板的id',需要渲染的数据对象)--> </head> <body> <div class="con"></div> <!-- 3.定义模板 必须定义到script标签中，模板为html结构 加type="text/html"--> <script type="text/html" id="tep-user"> <!-- 如果占位符的内容包括html结构标签，需要在前面加上@实现结构的渲染 --> <div id="title"> {{@title}} </div> <div>姓名:<span id="name">{{name}}</span></div> <div>年龄:<span id="age">{{age}}</span></div> <div>是否会员:<span id="isVip">{{isVIP}}</span></div> <div>注册时间:<span id="regTime">{{regTime}}</span></div> <div> <ul id="hobby"> {{each hobby}} <li>{{$value}}</li> {{/each}} </ul> </div> </script> <!-- 4.定义数据 --> <script> var data = { title: '<h3 id="1">用户信息</h3>', name: 'zs', age: 20, isVIP: true, regTime: new Date(), hobby: ['吃饭', '睡觉', '打豆豆'] } // 调用函数 var htmlstr = template("tep-user", data); $(".con").html(htmlstr); </script> </body> </html>
- 效果图（一样的效果图），这里数据少，体现不出渲染引擎的优点
5.2 渲染引擎的使用
- 导入art-template
- 定义数据
- 定义模板
- 调用template函数
- 渲染HTML结构
5.3 art-template的标准语法
-
{{}}语法：在{{}}中可以进行变量输出，循环数组等操作
-
示例
{{value}} //变量输出 {{obj.key}} //对象属性的输出 {{obj['key']}} //对象属性的输出 {{a ? b : c}} //三元运算符的输出 {{a || b}} //逻辑表达式输出 {{a + b}} //加减乘除输出
5.3.1 原文输出
- 如果要输出的value值中包含HTML结构，则需要原文输出，才能使HTML结构被渲染
{{@value}}
5.3.2 条件输出
- 实现分支语句的输出
{{if value}} 满足条件输出的内容{{/if}} //多分支输出 {{if value1}} 输出满足value1成立的内容{{else if v2}} 输出v2满足内容{{/if}}
5.3.3 循环输出
- 通过each语法循环数组， i n d e x 代 表 索 引 号 ， index代表索引号， index代表索引号，value代表值
{{each arr}} {{$index}} {{$value}} {{/}}
5.3.4 过滤器
- 图解
- 定义过滤器
template.defaults.imports.filterName=function(value){/*return处理的结果*/}
- 使用过滤器
{{value|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> <script src="./lib/jquery.js"></script> <!-- 引入art-template-web 渲染js --> <script src="./lib/template-web.js"></script> <!-- 2.引入后，页面就会增加一个新的函数 template('模板的id',需要渲染的数据对象)--> </head> <body> <div class="date"></div> <!-- 定义模板结构 --> <script type="text/html" id="temp"> <h3>{{date | filterName}}</h3> </script> <script> // 定义一个过滤器 template.defaults.imports.filterName = function(date) { var year = date.getFullYear(); var month = date.getMonth() + 1; var day = date.getDate(); return year + "-" + month + "-" + day; } // 定义数据 var data = { date: new Date() } // 调用template函数 var htmlStr = template("temp", data); $(".date").html(htmlStr); </script> </body> </html>
- 效果图
获取新闻案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <link rel="stylesheet" href="./assets/news.css" /> <script src="./lib/jquery.js"></script> <script src="./lib/template-web.js"></script> </head> <body> <div id="news-list"> </div> <!-- 定义一个模板 --> <script type="text/html" id="model"> <!-- 遍历data数组 --> {{each data}} <div class="news-item"> <img class="thumb" src="http://www.liulongbin.top:3006{{$value.img}}" alt="" /> <div class="right-box"> <h1 class="title">{{$value.title}}</h1> <div class="tags"> {{each $value.tags }} <span>{{$value}}</span>{{/each}} </div> <div class="footer"> <div> <span>{{$value.source}}</span> <span>{{$value.time|timeFilter}}</span> </div> <span>评论数:{{$value.cmtcount}}</span> </div> </div> </div> {{/each}} </script> <script> // 定义一个tags的过滤器 // 日期格式化过滤器 template.defaults.imports.timeFilter = function(time) { // 根据默认格式创建一个日期对象，在格式化 var time1 = new Date(time); var year = time1.getFullYear(); var month = time1.getMonth() + 1; var date = time1.getDate(); var h = parseInt(time1.getHours()); h = h < 10 ? '0' + h : h; var m = parseInt(time1.getMinutes()); m = m < 10 ? '0' + m : m; var s = parseInt(time1.getSeconds()); s = s < 10 ? '0' + s : s; return year + '-' + month + '-' + date + ' ' + h + ':' + m + ':' + s; } // 获取服务器的数据 getDate(); var data = []; function getDate() { $.get("http://www.liulongbin.top:3006/api/news", function(res) { if (res.status === 200) { // alert("获取新闻列表成功"); // 对res的date数组中对象中的tags转换成字符串数组 for (var i = 0; i < res.data.length; i++) { res.data[i].tags = res.data[i].tags.split(','); } var htmlstr = template("model", res); console.log(htmlstr); // 返回值内容放入列表 $("#news-list").html(htmlstr); } else { alert("获取新闻列表失败"); } }) } </script> </body> </html>
- 效果图
6.正则表达式(模板引擎原理刨析)
6.1 基本语法
- exec()函数用于检索字符中的正则表达式的匹配
RegExpObject.exec(string)
- 如果字符串中有表达式的值，则返回该匹配值，否则返回null
示例
<!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 = 'hello'; // 检索 var pattern = /o/; var pattern2 = /m/; console.log(pattern.exec(str)); console.log(pattern2.exec(str)); </script> </body> </html>
- 效果图
6.2 分组
-
正则表达式中（）包起来的内容表示一个分组，可以通过分组来提取自己想要的内容
-
返回值一个数组，包含正则匹配到的字符串，也包含分组里面的字符串
示例
<!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 = "<div>我是{{name}}</div>"; // 正则获取分组 // [a-zA-Z]表示获取a-z和A-Z的字符+（出现多次） // ()包起来的内容表示分组 var pattern = /{{([a-zA-Z]+)}}/; console.log(pattern.exec(str)); </script> </body> </html>
- 效果图
6.3 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 str = "<div>我是{{name}}</div>"; // 正则获取分组 // [a-zA-Z]表示获取a-z和A-Z的字符+（出现多次） // ()包起来的内容表示分组 var pattern = /{{([a-zA-Z]+)}}/; console.log(pattern.exec(str)); var result = pattern.exec(str); str = str.replace(result[0], result[1]); console.log(str); </script> </body> </html>
- 效果图
6.3.1 多次replace
-
进行正则表达式的匹配是从左到右的，一次获取第一个匹配到的，多次正则直到返回值为null，就把所有的匹配的给替换了
-
示例
<!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 = "<div>我是{{name}}年龄{{ age }}</div>"; // 正则获取分组 // [a-zA-Z]表示获取a-z和A-Z的字符+（出现多次） // ()包起来的内容表示分组 // \s*内容\s* 允许匹配内容两侧有多个空白字符 var pattern = /{{\s*([a-zA-Z]+)\s*}}/; var result; // 多次replace直到返回null while ((result = pattern.exec(str)) !== null) { console.log(result); str = str.replace(result[0], result[1]); } console.log(str); </script> </body> </html>
- 效果图
6.4 通过正则实现模板引擎的效果
<!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: 18 } // 模板字符串 var str = '<div>姓名:{{ name }}年龄:{{ age }}</div>'; // 正则 var pattern = /{{\s*([a-zA-Z]+)\s*}}/; // 开始替换 var result; while (result = pattern.exec(str)) { str = str.replace(result[0], data[result[1]]); } console.log(str); </script> </body> </html>
- 效果图
6.5 自定义一个模板引擎
<!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 id="box"> </div> <!-- 定义模板结构 --> <script type="text/html" id="my-tep"> <div>姓名:{{name }}</div> <div>年龄:{{ age }}</div> <div>性别:{{sex }}</div> <div>住址:{{ address}}</div> </script> <script> // 1.定义模板引擎 function template(id, data) { var tep = document.getElementById(id); // 原先的内容 var str = tep.innerHTML; // 正则 var pattern = /{{\s*([a-zA-Z]+)\s*}}/; var result; while (result = pattern.exec(str)) { str = str.replace(result[0], data[result[1]]); } return str; } // 定义数据 var data = { name: '张三', age: 18, sex: '男', address: '北京' } // 调用模板引擎 var htmlstr = template("my-tep", data); var box = document.getElementById("box"); box.innerHTML = htmlstr; </script> </body> </html>
- 效果图
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！