JQuery封裝的ajax、ajax上傳文件、JSON對象、ajax提交表單

JQuery模式的ajax調用
$(function(){
   $('input[name=username]').change(function(){
    $.ajax({
        type:"post",        //請求方式
        url:"checkName",    //請求URL地址
        data:"name="+this.value,//請求的參數
        success:function(msg){  //成功時的處理函數，msg爲服務端傳回的文本
            alert(msg);
        }
    });
   })
});

多個參數可以用以下方式：
data:{
    name:username,
    sex:usex,
    age:uage
}

ajax上傳文件
jQuery插件AjaxFileUpload實現ajax文件上傳：
     $.ajaxFileUpload({
            url: 'uploadAjax.htm', 
            type: 'post',
            secureuri: false,         //一般設置爲false
            fileElementId: 'file',     // 上傳文件的id、name屬性名
        allowType:'jpg,jpeg,png,JPG,JPEG,PNG',  //限制文件類型
            success: function(msg){  
                alert(msg);
            },
            error: function(msg){ 
                alert(msg);
            }
        });

Json

創建JSON對象
var str = {"name":"張三","age":20}; 
JSON對象由 名稱/值對組成 名稱和值之間用冒號:隔開 
名稱必須用雙引號" 包含起來 
值可以是任意javascript數據類型，字符串，布爾，數字 ，數組甚至是對象 
不同的名稱/值對之間用 逗號 , 隔開

訪問JSON對象的屬性
console.log("姓名："+str.name)
console.log("年齡："+str.age)

創建JSON數組
var heros=
[
    {"name":"蓋倫","hp":616},
    {"name":"提莫","hp":313},
    {"name":"死歌","hp":432},
    {"name":"火女","hp":389}
]

訪問JSON數組
console.log("第4個英雄是："+heros[3].name)

字符串拼接得到一個JSON結構的字符串，並不是一個JSON對象。 需要通過eval轉換得到
var s1 = "{\"name\":\"蓋倫\"";
var s2 = ",\"hp\":616}";
var s3 = s1+s2;
//eval轉換要以（ 開頭，）結尾
var gareen = eval("("+s3+")");
或者使用JQuery的$.parseJSON轉換函數
$.parseJSON(s3);

json 對象因爲是一個javascript對象，所以如果直接打印的話，看不到裏面的內容。
有時候要看看這個對象是不是我們期望的，所以需要通過 JSON.stringify 函數把它轉換爲 字符串
var s = JSON.stringify(s3);//s="{\"name\":\"蓋倫\",\"hp\":616}";

Ueditor富文本編輯器下有個json.jar包
通過JSONObject（Object bean）和JSONArray(Collection collection )方法，可以將對象和集合轉化爲json對象
用ajax接收json對象的時候，需要增加屬性dataType:"json"，如下：
JQuery模式的ajax調用
$(function(){
   $('input[name=username]').change(function(){
    $.ajax({
        type:"post",        //請求方式
        url:"checkName",    //請求URL地址
        data:"name="+this.value,//請求的參數
        success:function(msg){  //成功時的處理函數，msg爲服務端傳回的文本
            alert(msg);
        }，
        dataType:"json"
    });
   })
});
 

 

Ajax提交表單

表單代碼：
<div id="form-div">
    <form id="form1" οnsubmit="return false" action="##" method="post">
        <p>用戶名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>
        <p>密　碼：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>
        <p><input type="button" value="登錄" οnclick="login()">&nbsp;<input type="reset" value="重置"></p>
    </form>
</div>

ajax代碼：
<script>
        function login() {
            $.ajax({
                type: "POST",        //方法類型
                dataType: "json",    //預期服務器返回的數據類型
                url: "/users/login" ,    //url
                data: $('#form1').serialize(),
                success: function (result) {
                    console.log(result);//打印服務端返回的數據(調試用)
                },
                error : function() {
                    alert("異常！");
                }
            });
        }
</script>

注意：
1. οnsubmit="return false"設置不提交
2. 登陸按鈕點擊事件：οnclick="login()"
3. data: $('#form1').serialize()