舉個例子：你想在用戶點擊時，把 apple 這個字符串，通過前端傳給后端。
十載的高港網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。全網(wǎng)整合營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整高港建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)建站從事“高港網(wǎng)站設(shè)計”,“高港網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。
前端，用 jQuery 舉例：
$('button').click(function () {
$.ajax({
url: '/xxx',
method: 'post',
dataType: 'json',
data: {fruit: 'apple'}
}).done(function (res) {
// 成功后的回調(diào)
}).fail(function (err) {
// 失敗后的回調(diào)
});
});
后端 PHP 處理：
$fruit = $_POST['fruit']; // 獲取從 ajax 傳過來的 fruit 的值，這里是 apple。
如果你想在前端重新顯示這個字符串 apple，那么你要用 PHP 把數(shù)據(jù)返回給頁面，然后在上面 “// 成功后的回調(diào)” 里面，補充邏輯代碼。
例如 PHP 把 apple 返回給前端：
return json_encode(array('fruit' = 'apple'));
前端回調(diào)處理：
// 成功后的回調(diào)
alert(res.fruit); // 彈框顯示 “apple”
實際上，$_POST 能夠獲取所有從前端用 post 方式提交過來的數(shù)據(jù)，不管你是頁面刷新方式，還是 ajax（jQuery 才叫 ajax，實際上它是 XMLHttpRequest，異步非阻塞的請求方式）
返回數(shù)據(jù)代碼如下：
如果在php里有echo的值的話，可以用AJAX來接收：
有多個輸出的話，是不可能指定輸出的
需要把想要輸出的內(nèi)容放到一個數(shù)組中，然后json_encode一下，在到j(luò)s里循環(huán)，找到自己想要的值
比如：
//需要輸出的內(nèi)容
echo 'aaa'; echo 'bbb';echo ''ccc;
//合成數(shù)組
$data = array(‘name1’='aaa',‘name2’= 'bbb',‘name2’= 'ccc');
//json_encode
$data =?json_encode($data);
//輸出
echo $data;
js:
$.post('aa.php',‘’,function(mes){
var data = eval('(' + msg + ')');
var name1 = data['name1'];
var name2 = data['name2'];
var name3 = data['name3'];
})
上面引入jquery
script
$(document).ready(function(){
$("#login").click(function(){
var?username?=?$("#username").val();
var?password?=?$("#password").val();
$.ajax({
type:?"POST",
url:?"denglu.php",
data:?"username="+username+"act=loginpassword="+password,
success:?function(msg){
if(msg==1){
???$("#message").show().html('登錄成功').fadeOut(1000);
???window.location?=?"index.php";
}else{
$("#message").show().html(msg).fadeOut(1000);
}
}
});??
});
});
/script
用戶名:input?type="text"?id="username"?name="username"?
密碼：input?type="password"?id="password"?name="password"?
input?type="button"??value="登錄"?id="login"?/
div?id="message"/div
你如果想讓后臺以json格式返回數(shù)據(jù)，那么php就一定要用標準的json格式來輸出數(shù)據(jù)，不要混雜其他無關(guān)數(shù)據(jù)。比如你的“返回的數(shù)據(jù)：”這幾個字就屬于多余數(shù)據(jù)，ajax在接收到返回數(shù)據(jù)后就會轉(zhuǎn)換失敗。所以你的 echo "返回的數(shù)據(jù)："; 應(yīng)該刪掉（如果還有其他類似的輸出語句也要刪掉），確保輸出的數(shù)據(jù)只有 ["jeff-A-01.png","jeff-d-01.png"] 這樣的內(nèi)容。
其實就是發(fā)送一個網(wǎng)絡(luò)請求，服務(wù)端輸出的內(nèi)容就是響應(yīng)的內(nèi)容，如jQuery
$.ajax(
{
url:?'',?????//?請求URL
data:?'',????//?請求時攜帶的參數(shù)
type:?'',????//?請求方式,?GET/POST
dataType:?'',//?響應(yīng)數(shù)據(jù)格式,?text/json
success:?r?=?{
//?請求成功時回調(diào)函數(shù)，參數(shù)?r?為服務(wù)端響應(yīng)的內(nèi)容
console.log(r);??//?就是你說的后臺數(shù)據(jù)
},
error:?()?=?{
console.error('fail');?//?請求失敗
}
}
)
//?服務(wù)端響應(yīng)內(nèi)容
$data?=?[];???//?從數(shù)據(jù)庫中獲取的數(shù)據(jù)
echo?json_encode($data);???//?響應(yīng)客戶端,?數(shù)據(jù)格式為?JSON
本篇將繼續(xù)通過該實例講解與數(shù)據(jù)庫的交互方式。實例中用到的是MySQL，也可以根據(jù)自己的需要替換為其他數(shù)據(jù)庫，其連接方式可以參考PHP相關(guān)手冊。
在下面源程序包中dbconnector.php
提供了與MySQL的連接函數(shù)。
復(fù)制代碼
代碼如下:
?php
//定義數(shù)據(jù)連接變量
define
("MYSQLHOST",
"localhost");
define
("MYSQLUSER",
"root");
define
("MYSQLPASS",
"root");
define
("MYSQLDB",
"test");
function
opendatabase(){
//連接數(shù)據(jù)庫所在服務(wù)器
$db
=
mysql_connect
(MYSQLHOST,MYSQLUSER,MYSQLPASS);
try
{
if
(!$db){
//若無法連接則提示錯誤
$exceptionstring
=
"Error
connection
to
database:
br
/";
$exceptionstring
.=
mysql_errno().":
".mysql_error();
throw
new
exception
($exceptionstring);
}
else{
//連接數(shù)據(jù)庫（test）
mysql_select_db
(MYSQLDB,$db);
}
return
$db;
}catch
(exception
$e){
echo
$e-getmessage();
die();
}
}
?
當(dāng)鼠標放到某個日期上時會調(diào)用functions.js中的checkfortasks函數(shù)。同時checkfortasks會加載taskchecker.php程序，它會到MySQL中查詢該日期下所有的備忘錄信息，并將結(jié)果返回到頁面中。
復(fù)制代碼
代碼如下:
?php
//調(diào)用數(shù)據(jù)庫連接程序
require_once
("dbconnector.php");
//連接數(shù)據(jù)庫
$db
=
opendatabase();
//在MySQL查詢備忘錄
$querystr
=
"SELECT
description
FROM
task
WHERE
thedate='"
.
addslashes
($_GET['thedate'])
.
"'";
//執(zhí)行SQL
if
($datequery
=
mysql_query
($querystr)){
//判斷查詢是否有值
if
(mysql_num_rows
($datequery)
0){
?
div
style="width:
150px;
background:
#FFBC37;
border-style:
solid;
border-color:
#000000;
border-width:
1px;"
div
style="padding:
10px;"
?php
//顯示備忘錄信息
while
($datedata
=
mysql_fetch_array
($datequery)){
if
(!get_magic_quotes_gpc()){
echo
stripslashes
($datedata['description']);
}
else{
echo
$datedata['description'];
}
}
?
/div
/div
?php
}
}
else{
//數(shù)據(jù)庫查詢錯誤
echo
mysql_error();
}
//關(guān)閉數(shù)據(jù)庫
mysql_close
($db);
?
對于Ajax的使用和上一篇的原理是一樣的：1.
通過事件調(diào)用Ajax函數(shù)；2.
通過函數(shù)請求其他PHP程序，PHP程序中可以對數(shù)據(jù)庫之類的數(shù)據(jù)源進行讀、寫、改操作；3.
將處理結(jié)果加載到事件激發(fā)頁面。在下圖中鼠標放到26號時，Ajax會在MySQL中查詢到“Football
Match”事件并加載到當(dāng)前頁面。
源代碼下載
重慶分公司
重慶分公司
