这篇文章主要介绍“JavaScript怎么实现前后端交互”，在日常操作中，相信很多人在JavaScript怎么实现前后端交互问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”JavaScript怎么实现前后端交互”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
form表单
基础知识
概念
<form> 标签用于为用户输入创建 HTML 表单，表单用于向服务器传输数据。
组成
表单标签
表单域：文本框、密码框、多行文本框、复选框、单选框、下拉选择框、文件上传框等
表单按钮 button
常用属性
action ：提交表单时，向何处发送表单
默认值就是当前网页的URL地址
提交后 表单会跳转到action属性设置的URL地址
target：规定在何处打开action URL
默认 _self 在相同和框架中打开action URL （在当前网页打开）
method：规定何种方式把表单提交到 action URL
post：提交数据更加隐蔽，适合大量、复杂的或者文件上传；
get：默认，可在在网址里面可以看到用户提交的信息不安全，适合少量的、简单的数据；
enctype：规定发送表单数据之前如何对数据进行编码
表单同步提交
概念
触发提交按钮 让页面发生跳转到 action URL的行为。表单具有默认的提交行为，默认是同步的。form标签内部的 action 和 method 属性就是用来编写同步的提交行为，同步表单提交，浏览器会直接将服务器响应的内容渲染到页面上。
缺点
页面发生跳转
页面之前的状态和数据会丢失
推荐：表单只负责采集数据，Ajax负责将数据提交到服务器
表单事件监听
submit监听方式
<form action="./index.html" method="post">
<input type="submit" value="">
</form>
<script>
$（"form"）。submit（function （e） {
console.log（'submit监听表单事件'）;
}）
</script>
on监听方式
<form action="./index.html" method="post">
<input type="submit" value="">
</form>
<script>
$（"form"）。on（'submit', function （e） {
console.log（'on 监听表单事件'）;
}）
</script>
阻止表单默认行为
<form action="./index.html" method="post">
<input type="submit" value="">
</form>
<script>
$（"form"）。on（'submit', function （e） {
e.preventDefault（）;//阻止表单默认提交行为
}）
serialize 快速获取表单提交的数据
语法：$ （ selector ）。 serialize（）
返回值：form表单中所有带有name属性的表单元素的值，使用&符号衔接；
没有name属性的表单元素是无法获取的！
<form id="form1">
<input type="text" name="username" />
<input type="password" name="password" />
<button type="submit"> 提交</button>
</form>
<script>
$（'#form1'）。serialize（）;
//调用的结果：
// username = 用户名的值 & password = 密码的值
</script>
模板引擎
基础知识
概念
模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。
优点
减少字符串的拼接
代码结构更清晰
易于维护阅读
art-template模板引擎
使用
导入art-template
定义数据
定义模板
调用template函数
渲染HTML结构
代码结构：
<body>
<!-- 1. 导入art-template -->
<script src="./template-web.js"></script>
<script src="./jQuery.min.js"></script>
<div id="container">我是容器 我用来装渲染好的结构</div>
<!-- 3.定义模板 -->
<script type="text/html" id="tpl">
<h2>{{name}}----{{age}}</h2>
</script>
<script>
//2.定义数据
var data = { name: 'zs', age: 20 };
//4.调用template函数
var htmlstr = template（'tpl', data）;
//5.渲染HTML结构
$（"#container"）。html（htmlstr）;
</script>
</body>
效果展示：
标准语法
原文输出：{{@ value}} ：适用于带标签的内容 例如 <span></span>
条件输出：if … else if… /if
<script type="text/html">
{{if value}}输出内容{{/if}}
{{if value1}}输出内容1
{{else if value2}}输出内容2
{{/if}}
</script>
循环输出：each遍历数组
<script type="text/html">
{{each arr}}
{{$index}} {{$value}}
{{/each}}
</script>
过滤器：本质是function函数
<script type="text/html">
<div>注册时间：{{regTime | dataFormat}}</div>
</script>
<script>
template.defaults.imports.dataFormat = function （dates） {
var date = new Date（dates）;
var y = date.getFullYear（）;
var m = date.getMonth（） + 1;
var d = date.getDate（）;
var h = date.getHours（）;
var mi = date.getMinutes（）;
var s = date.getSeconds（）;
m = m > 9 ? m : "0" + m;
d = d > 9 ? d : "0" + d;
h = h > 9 ? h : "0" + h;
mi = mi > 9 ? mi : "0" + mi;
s = s > 9 ? s : "0" + s;
return ——${y}-${m}-${d} ${h}:${mi}:${s}——;
}
</script>
正则表达式 exec函数：检索字符串中的正则表达式的匹配
到此，关于“JavaScript怎么实现前后端交互”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
