千家信息网

JavaScript怎么实现前后端交互

发表于:2024-11-29 作者:千家信息网编辑
千家信息网最后更新 2024年11月29日,这篇文章主要介绍"JavaScript怎么实现前后端交互",在日常操作中,相信很多人在JavaScript怎么实现前后端交互问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答
千家信息网最后更新 2024年11月29日JavaScript怎么实现前后端交互

这篇文章主要介绍"JavaScript怎么实现前后端交互",在日常操作中,相信很多人在JavaScript怎么实现前后端交互问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答"JavaScript怎么实现前后端交互"的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

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监听方式

on监听方式

阻止表单默认行为

模板引擎

基础知识

概念

模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档。

优点

减少字符串的拼接

代码结构更清晰

易于维护阅读

art-template模板引擎

使用

导入art-template

定义数据

定义模板

调用template函数

渲染HTML结构

代码结构:

我是容器 我用来装渲染好的结构

效果展示:

标准语法

原文输出:{{@ value}} :适用于带标签的内容 例如

条件输出:if … else if… /if

循环输出:each遍历数组

过滤器:本质是function函数

正则表达式 exec函数:检索字符串中的正则表达式的匹配

到此,关于"JavaScript怎么实现前后端交互"的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注网站,小编会继续努力为大家带来更多实用的文章!

0