首页 网络技术
  1. 正文

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 &hellip;  else if&hellip;  /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 &mdash;&mdash;${y}-${m}-${d}  ${h}:${mi}:${s}&mdash;&mdash;;

    }

</script>

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

本文标题:JavaScript怎么实现前后端交互
本文链接:https://www.qqooo.cn/post/6760.html
版权说明:网站文章均来源于手工整理和网友投稿,若有不妥之处请来信 xsds@vip.qq.com 处理,谢谢!