看了菜鳥ajax的系列教程：對ajax有了初步的瞭解，但是我主要是想利用ajax與php做前後臺交互的，所以便想着一步步實現這個想法，因爲對ajax不是特別熟悉，所以寫的都是菜鳥般的代碼，見諒。。
看了菜鳥的ajax系列教程，都沒有講到JQuery的$.ajax()方法怎麼使用，希望有機會可以加上，讓更多讀者可以瞭解。
但是W3School有這一節教程：http://www.w3school.com.cn/jquery/ajax_ajax.asp
JS庫和CSS庫建議直接使用國內的cdn，省去很多功夫，http://www.bootcdn.cn/
那先來一個簡單的交互吧，但是要注意的是在使用ajax與php後臺交互的時候，一定要打開服務器，否則很多時候會出現錯誤，我說打開服務器的意思是，直接在瀏覽器輸入：localhost是可以有效訪問的意思。
好了，下面看看JQuery的ajax()與php交互的簡單例子吧：
index.html代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--利用cdn添加js和css庫 -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body style="text-align: center; padding: 100px;">
姓名： <input type="text" name="username" id="yourName" />
<button id="send">提交</button>
<br><br><br><br>
<div id="result">結果：</div>
</body>
<script type="text/javascript">
$(function () {
$("#send").click(function () {
var name = $("#yourName").val();
var data = "name="+name; //如果後臺是$_POST方法獲取數據，那麼一定要索引（例如：索引name）
$.ajax({
type: "POST",
url: "server.php", //同目錄下的php文件
data:"name="+name, // 等號前後不要加空格
success: function(msg){ //請求成功後的回調函數
$("#result").append("你的名字是"+msg);
}
});
})
})
</script>
</html>
<?php
$username = $_POST['name'];//獲取索引值
echo $username;
?>
