前端和後端交互的方式

• 2019 年 10 月 4 日
• 筆記

1.前端開發與後台交互的方式

（1）form提交 同步請求

（2）Ajax提交 非同步請求 發送json對象

一 、Ajax：非同步的javascript和XML

主要優點：

1.非同步請求，不妨礙用戶瀏覽頁面或者其他操作。

2.局部刷新，無需重新刷新整個頁面。

缺點：

1.back和History,對瀏覽器機制的破壞。

2.安全問題。易受到黑客攻擊。

AJAX原理圖：

$.ajax({                  cache: true,                  type: "POST",                  url:『表單提交的url地址』,                  data:$('#myformid').serialize(),// 序列化form表單數據,後台解析需要反序列化                  async: false,//false表示同步，true表示非同步                  error: function(request) {                      alert("請求失敗");                  },                  success: function(data) {                     console.log(data);//data為伺服器處理後返回的數據                     alert("請求成功");                  }              });      

二、Form表單提交到後台交互

<form id="myform" name="myform" method="post" onsubmit="return sumbitTest();"        action="RegisterAction.action">      <table>          <tr>              <td>姓名:</td>              <td> <input type="text" name="name" /> </td>          </tr>          <tr>              <td>性別:</td>              <td>                  <input type="radio" name="sex" value="1"> 男                  <input type="radio" name="sex" value="0"> 女              </td>          </tr>          <tr>              <td>年齡:</td>              <td>                  <select name="age">                      <option value="20">20</option>                      <option value="21">21</option>                      <option value="22">22</option>                  </select>              </td>          </tr>          <tr>              <td colspan="2">                  <input type="submit" value="Submit普通提交">                  <input type="button" id="ajaxBtn" value="AJAX提交" />                  <input type="button" id="jqueryBtn" value="jQuery提交" />                  <input type="button" id="jsBtn" value="JS提交" />                  <input type="submit" value="onSubmit提交" />              </td>          </tr>      </table>  </form>

form表單提交為同步請求，submit按鈕會刷新整個頁面

注意在使用ajax提交form表單時，提交按鈕應為type=「button」，然後為其綁定點擊事件，而不應該為type=「submit」，因為submit按鈕會刷新整個頁面，從而導致ajax請求被攔截。

備註：如有不完整或者錯誤的地方請多多指教