ajax的基本語法

$.ajax({
    type: "post",  //資料提交方式（post/get）
    url: "demo.php",  //提交到的url
    data: {"key1":"value1","key2":"value2"},//提交的資料
    dataType: "json",//返回的資料型別格式
    success: function(msg){
      //code...返回成功的回撥函式
    },
    error:function(msg){
      //code...返回失敗的回撥函式
    }
});

html端：

<!--要提交的表單-->
 

<form method="post" action="demo.php" id="formid" >
    <input type="text" name="username" id="username"/>
    <button id="submit" type="submit">submit</button>
</form>
<!--區域性更新的區域-->
<div id="display"></div>

php服務端程式碼demo.php：

<?php
$username = $_POST
 
['username'];
$data = "{username:'$username'}";//組合成json格式資料
echo json_encode($data);//返回json格式資料
?>

html端的script程式碼：

<script>
    $(document).ready(function(){
        $("#submit").click(function(e){
            e.preventDefault();//阻止預設的表單提交
            username = $("#username").val();//獲取表單的輸入值
 

            $.ajax({
                type:"POST",
                url:"demo.php",
                data:{"username":username},//提交到demo.php的資料
                dataType:"json",//回撥函式接收資料的格式
                success:function(msg){
                    $("#display").empty();//清空
                    data = eval("("+msg+")");//將返回的json解析成json物件
                    $("#display").html("hello: "+data.username);
                    console.log(msg);
                    console.log(data);
                },
                error:function(msg){
                    console.log("request fail:"+msg);
                }
            });
        });
    });
</script>

結果：

控制檯console顯示的結果：

只有轉成json物件格式才能才能用.value的形式獲取

改進，讓php直接返回json物件就無需轉換
json_encode()函式能夠把陣列直接轉成json物件
所以，php後端程式碼改寫為：

<?php
echo json_encode($_POST);//返回json物件格式資料
?>

html端ajax程式碼修改為：

$.ajax({
    type:"POST",
    url:"demo.php",
    data:{"username":username},//提交到demo.php的資料
    dataType:"json",//回撥函式接收資料的格式
    success:function(msg){
        $("#display").empty();//清空
        $("#display").html("hello: "+msg.username);
        console.log(msg);
    },
    error:function(msg){
        console.log("request fail:"+msg);
    }
});

這樣php後端一句程式碼搞定，不用自己去構造返回資料的json格式，而且script也不用把json字串格式轉成json物件
再看一下控制檯的輸出資訊：

雖然不用再去構造返回資料的json格式，但是ajax請求時傳送的表單資料也還要自己去構造。想一想，如果表單資料有一萬個輸入值，那麼自己去構造的話。。。。
解決方法很簡單：只需改變$.ajax()內的data:值就行了

data:$('#formid').serialize(),//你的表單id
//或者
data:$('#formid').serializeArray()

用控制檯看看這兩者的區別(為了更直觀，我又加了一個input元素)：

可以看到.serialize()將表單要提交的內容序列化成一個類似URL的字串格式，而.serializeArray()則將表單內容序列化為一個json物件的結構

注意：php用include或require引入前端頁面時，兩者是在同一個執行程式碼裡，即都是屬於主執行緒的。這時若用該前端頁面去ajax請求該php後端指令碼程式碼，會導致請求失敗。

參考資料：