Ajax基本工作原理
基本概念：
Asynchronous Javascript And XML
一種用於創建快速動態網頁的技術
與服務器進行少量數據交換，是網頁實現異步更新
ajax異步加載的優勢
1.從服務器請求少量的信息，而不是整個頁面
2.使因特網應用程序更小、更快，更友好
Ajax簡單使用
$.get()請求實現異步加載
$.post()請求實現異步加載
ajaxtest.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax簡單使用</title>
<script type="text/javascript" src="//cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<button id="btn">發送一個Ajax請求</button>
<div id="box"></div>
</body>
<script type="text/javascript">
$("#btn").click(function()
{
/* $.get('demo.php', {'username': 'icy'}, function (data) {//get請求傳參
alert(data);//彈出數據
$("#box").html(data);//在頁面div中顯示數據
});*/
$.post('demo.php',{'username':'icy','age':'18'},function(data){//post請求傳參
alert(data);//彈出數據
$("#box").html(data);//在頁面div中顯示數據
});
//ajax 方式傳遞參數
$.ajax({
'url':'demo.php',
'data':{'username':'icy','age':18},
'success':function(data){
$('#box').html(data);
},
'dataType':'html',
/* 'type':'get',*/ //get方式傳遞參數
'type':'post', //post方式傳遞參數
})
});
</script>
</html>
</head>
<body>
</body>
</html>對應的php文件，demo.php
<?php
/**
* Created by PhpStorm.
* User: xue
* Date: 2016/4/14
* Time: 11:37
*/
echo "我是icy，一個快樂的程序員";
/*echo "<pre>";
var_dump($_GET);//打印出get接受到的json數據爲數組格式
echo "</pre>";*/
echo "<pre>";
var_dump($_POST);//打印出post接受到的json數據爲數組格式
echo "</pre>";輸出結果：
1，直接訪問html出現的界面
2，點擊發送一個Ajax請求按鈕
3.點擊確定後界面
