前端和后端交互的方式

 

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請求被攔截。

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