Ajax学习笔记2——基于Bootstrap渲染页面的UI结构

1.图书管理案例（实现图书的增加、删除、显示）

2.form标签的属性

（1）如果form表单未指定action属性，那么action 的默认值为当前页面的 URL 地址。
（2）target 属性用来规定在何处打开 action URL。默认为_self，在新窗口中打开用 _blank
（3）enctype 属性用来规定在发送表单数据之前如何对数据进行编码。
它的可选值有三个，默认情况下，enctype 的值为 application/x-www-form-urlencoded，表示在发送前编码所有的字符。
在涉及到文件上传的操作时，必须将 enctype 的值设置为 multipart/form-data

3.表单的同步提交

什么是表单的同步提交？通过点击 submit 按钮，触发表单提交的操作，从而使页面跳转到 action URL 的行为，叫做表单的同步提交。
解决表单的同步提交：表单只负责采集数据，Ajax 负责将数据提交到服务器。

4.监听表单提交事件

$('#form1').submit(function(e) {
   alert('监听到了表单的提交事件')
})

$('#form1').on('submit', function(e) {
   alert('监听到了表单的提交事件')
})

5.阻止表单默认提交行为

$('#form1').submit(function(e) {
   // 阻止表单的提交和页面的跳转
   e.preventDefault()
})

$('#form1').on('submit', function(e) {
   // 阻止表单的提交和页面的跳转
   e.preventDefault()
})

6.快速获取表单中的数据——serialize()函数

serialize()函数：可以一次性获取到表单中的所有数据

<form id="form1">
    <input type="text" name="username" />
    <input type="password" name="password" />
    <button type="submit">提交button>
form>

$('#form1').serialize()
// 调用的结果：
// username=用户名的值&password=密码的值

注意：在使用 serialize() 函数快速获取表单数据时，必须为每个表单元素添加 name 属性！