什么是表单

主要负责数据采集功能，HTML中的form标签，主要用于采集用户输入的信息，并通过form标签的提交操作，把采集到的信息提交到服务器端进行处理

form表单的属性

    <!-- 
action  URL地址(后端提供的，这个url地址专门负责接收表单提交过来的数据)   规定提交表单时，向何处发送表单数据
        未指定action属性值的情况下，action的默认值未当前页面的url地址
method   get或post   规定以何种方式把表单数据提交到 action url
（get 通过url地址栏传递数据，传递的数量小  不安全
   post  通过http协议传递 ，传输的数据量大，安全）
enctype    规定在发送表单数据之前如何对其进行编码
    application/x-www-form-urlencoded  在发送前编码所有的字符（默认）
    multipart/form-data  不对字符编码，文件上传，使用该值
    text/plain  空格转换未  + 加号，但不对特殊字符编码(很少用)
     -->
    <form action="/login" method="get">
      <input type="text" name="email" id="" />
      <br />
      <input type="password" name="password" />
      <br />
      <input type="checkbox" name="remember" checked />
      <br />
      <button type="submit">提交</button>
    </form>

    <!--
表单由3部分构成
- 表单标签
- 表单域  （文本框，密码框，多行文本框，复选框，单选框，下拉选择框，文件上传）
- 表单按钮

form标签的属性
form标签用来采集数据，form标签的属性 就是用来规定 如何把采集到的数据发送到服务器
      -->

表单的同步提交

点击submit按钮，触发表单提交的操作，从而使页面跳转到action url的行为，叫做表单的同步提交

缺点

form表单同步提交后，整个页面发生跳转，跳转到action url指向的地址，用户体验差
form表单同步提交后，页面之前的状态和数据会丢失

解决

表单只负责采集数据，Ajax负责将数据提交到服务器

Ajax提交表单数据

监听表单提交事件

<body>
    <form action="/login" id="f1">
      <input type="text" name="username" />
      <br />
      <input type="password" name="password" />
      <br />
      <button type="submit">提交</button>
    </form>
  </body>
  <script>
    $(function () {
      $('#f1').submit(function () {
        alert('监听到表单的提交事件')
      })
    })
  </script>

表单的默认行为

监听到表单提交事件之后，调用事件对象的event.preventDefault()阻止表单的提交和页面的跳转

$(function () {
      $('#f1').submit(function (e) {
        alert('监听到表单的提交事件')
        // 阻止表单的提交和页面的跳转
        e.preventDefault()
      })
    })

快速获取表单中的数据

jQuery提供了serialize()函数,可以一次性的获取到表单中的所有数据（必须为每个表单元素添加name属性）

$(selector).serialize()

 <body>
    <form action="/login" id="f1">
      <input type="text" name="username" />
      <br />
      <input type="password" name="password" />
      <br />
      <button type="submit">提交</button>
    </form>
  </body>
  <script>
    $(function () {
      $('#f1').submit(function (e) {
        // alert('监听到表单的提交事件')
        // 阻止表单的提交和页面的跳转
        e.preventDefault()

        var data = $(this).serialize()
        console.log(data) //username=1111&password=2222
      })
    })
  </script>

同源策略

什么是同源策略

如果两个页面的协议 (http) ，域名(www.xxx.com) 和端口（80） 都相同，则两个页面具有相同的源

www.test.com/index.html

 http://www.test.com/outer.html      同源
 https://www.test.com/about.html     不同源    协议不同
 http://blog.test.com/index.html     不同源    域名不同
  http://www.test.com:80/outer.html   同源

同源策略是浏览器提供的一个安全策略

浏览器规定:A网站的JavaScript  不允许和非同源的 网站c之间 进行资源交互

跨域

什么是跨域

同源是两个url的协议，域名，端口一致，反之就是跨域

出现跨域的原因:浏览器的同源策略不允许非同源的url之间进行数据交换

网页   http://www.test.com/index.html

接口:  https://www.api.com/index.html

报错出现：Access-Control-Allow-Origin 就是跨域

解决跨域

两种方案解决跨域: JSONP 和CORS

JSONP

出现的早，兼容性好，程序员为了解决跨域问题，被迫想出来的一种临时解决方案，缺点:只支持get请求，不支持post请求

浏览器的同源策略限制，网页中无法通过Ajax请求非同源的接口数据，但是script标签不受同源策略的限制，可以通过src属性，请求非同源的js脚本

jsonp的实现原理：就是通过script标签的src属性，请求跨域的数据接口，通过函数调用的形式，接收跨域接口响应回来的数据

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    function abc(data) {
      console.log('jsonp请求')
      console.log(data)
    }
  </script>

  <!-- 返回的是函数调用 -->
  <script src="http://www.liulongbin.top:3006/api/jsonp?callback=abc"></script>


  <!-- jsonp和ajax之间没有任何关系 -->
</html>

form表单基本使用&JSONP跨域