[JavaScript知识库]【无标题】

1. Form表单

就是用于采集用户输入的信息，

组成部分: 表单标签, 表单域, 表单按钮

通过submit 提交表单

标签属性:

action: 向何处发送表单数据

target:--------_blank新窗口打开;_self默认

method:以何种方式提交,类似type

enctype :发送表单数据之前对数据进行编码

get 方式适合用来提交少量的，简单的数据

post 方式适合用来提交大量的，复杂的，或包含文件上传的数据

2.通过Ajax提交表单数据

①监听表单提交事件

 <script>
    $(function () {
      // 第一种方式
      // $('#f1').submit(function () {
      //   alert('监听到了表单的提交事件')
      // })

      // 第二种方式
      $('#f1').on('submit', function () {  
        alert('监听到了表单的提交事件2')
      })
    })
  </script>

②阻止表单默认行为

event.preventDefault()

③ 获取表单数据

serialize()

3.模板引擎

①好处

• 减少了字符串的拼接操作

• 使代码结构更清晰

• 使代码更易于阅读与维护

② art-template模板引擎 使用步骤

-1  导入 art-template

  - 在window全局，就多了一个函数，叫做 template('模板id'，需要渲染的数据对象)

  <script src="./lib/template-web.js"></script>
  

- 2 定义数据

  var data = { name: 'zs', age: 20}
  

- 3  定义模板

  <script type="text/html" id="tpl-user">

      <h1>{{name}}    ------    {{age}}</h1>

  </script>
  

- 4  调用 `template` 函数

  - 函数的返回值就是拼接好的模板字符串

  var htmlStr = template('tpl-user', data)
 

- 4  渲染`HTML`结构

  $('#container').html(htmlStr)