ajax新手筆記

使用PHP、MySQL、ajax做連動下拉選單

【list.php】

--------------------------------------------------

<form name="form1" method="post" action="./mgr_main.php" target="topFrame">

<select name=dataClass id=dataClass size=1>

<option>選擇分類</option>

<?php

$i = 0;

$sqlResult = mysqli_query($link, "select className from class_table");

while($classResult = mysqli_fetch_array($sqlResult))

{

$className_var[$i] = $classResult['className'];

echo "<option value=".$className_var[$i].">".$className_var[$i]."</option>";

$i++;

}

$listNumber = $i;

?>

</select>

<input type="submit" name="btnEditClsMain" value="Edit class main page">

<BR><BR>

Edit Item Main Page<BR>

<select name=classItems id=classItems size=1>

<option>選擇子項目</option> //要被連動的選單，預設一個值就好

</select>

</form>

<script>//放在form後面

$(document).on('change', '#dataClass', function(){

var classNameVar = $('#dataClass :selected').val();

$.ajax({

url:"handle.php", //將資料傳給目的php檔處理

type: "POST", //method:"POST",

dataType: "text", //資料格式，jason目前沒試，之後再調整

data:{

ajaxSelAction:1,//要傳給handle.php的變數

ajaxClassName:$('#dataClass :selected').val()//要傳給handle.php的變數

},

error:function(jqXHR)

{

alert('失敗'+jqXHR.status);////從handle.php傳回失敗訊息

},

success:function(res)

{  

$('#classItems').html(res);//從handle.php傳回來的資料會在這被處理

}

   })//end ajax

});

</script>

--------------------------------------------------

【handle.php】

--------------------------------------------------

header('Content-Type: application/json; charset=UTF-8'); //設定資料類型為 json，編碼 utf-8

$sql = "SELECT itemName FROM item_table WHERE className = '$selClasName'";

$result = mysqli_query($link, $sql);// or die("取出資料失敗！".mysqli_error($link));

$resultCnt = mysqli_num_rows($result);

$res = "";//把準備回傳的變數res準備好

for($i = 0;$i<$resultCnt;$i++)

{

$data = mysqli_fetch_array($result);

$res .= "<option value={$data['itemName']}".EDIT_CLASS_MAINPAGE_def.">{$data['itemName']}</option>";//將對應的型號項目遞迴列出，itemName是資料庫裡的欄位名稱，這裡的value要填什麼值都可以

};

echo $res;//將型號項目丟回給ajax，實際執行的結果看起來是把整個handle.php的結果傳回去給list.php

--------------------------------------------------

Reference

$.ajax({

    type: "post",

    url: url,

    dataType:'html',

    success: function(data) { },

    complete: function(XMLHttpRequest, textStatus) { },

    error: function(){}

});

success ： 當請求成功時呼叫的函式。這個函式會得到一個引數：從伺服器返回的資料。當請求成功時呼叫函式。

complete ：當請求完成時呼叫的函式。這個函式會得到兩個引數：XMLHttpRequest物件和一個描述請求成功的型別的字串。當請求完成時呼叫函式，即status==404、403、302…。

引數名	型別	描述
url	String	(預設: 當前頁地址) 傳送請求的地址。
type	String	(預設: “GET”) 請求方式 (“POST” 或 “GET”)， 預設為 “GET”。注意：其它 HTTP 請求方法，如 PUT 和 DELETE 也可以使用，但僅部分瀏覽器支援。
timeout	Number	設定請求超時時間（毫秒）。此設定將覆蓋全域性設定。
async	Boolean	(預設: true) 預設設定下，所有請求均為非同步請求。如果需要傳送同步請求，請將此選項設定為 false。注意，同步請求將鎖住瀏覽器，使用者其它操作必須等待請求完成才可以執行。
beforeSend	Function	傳送請求前可修改 XMLHttpRequest 物件的函式，如新增自定義 HTTP 頭。XMLHttpRequest 物件是唯一的引數。 function (XMLHttpRequest) { this; // the options for this ajax request }
cache	Boolean	(預設: true) jQuery 1.2 新功能，設定為 false 將不會從瀏覽器快取中載入請求資訊。
complete	Function	請求完成後回撥函式 (請求成功或失敗時均呼叫)。引數： XMLHttpRequest 物件，成功資訊字串。 function (XMLHttpRequest, textStatus) { this; // the options for this ajax request }
contentType	String	(預設: “application/x-www-form-urlencoded”) 傳送資訊至伺服器時內容編碼型別。預設值適合大多數應用場合。
data	Object, String	傳送到伺服器的資料。將自動轉換為請求字串格式。GET 請求中將附加在 URL 後。檢視 processData 選項說明以禁止此自動轉換。必須為 Key/Value 格式。如果為陣列，jQuery 將自動為不同值對應同一個名稱。如 {foo:[“bar1”, “bar2”]} 轉換為 ‘&foo=bar1&foo=bar2’。
dataType	String	預期伺服器返回的資料型別。如果不指定，jQuery 將自動根據 HTTP 包 MIME 資訊返回 responseXML 或 responseText，並作為回撥函式引數傳遞，可用值: “xml”: 返回 XML 文件，可用 jQuery 處理。 “html”: 返回純文字 HTML 資訊；包含 script 元素。 “script”: 返回純文字 JavaScript 程式碼。不會自動快取結果。 “json”: 返回 JSON 資料 。 “jsonp”: JSONP 格式。使用 JSONP 形式呼叫函式時，如 “myurl?callback=?” jQuery 將自動替換 ? 為正確的函式名，以執行回撥函式。
error	Function	(預設: 自動判斷 (xml 或 html)) 請求失敗時將呼叫此方法。這個方法有三個引數：XMLHttpRequest 物件，錯誤資訊，（可能）捕獲的錯誤物件。 function (XMLHttpRequest, textStatus, errorThrown) { // 通常情況下textStatus和errorThown只有其中一個有值 this; // the options for this ajax request }
global	Boolean	(預設: true) 是否觸發全域性 AJAX 事件。設定為 false 將不會觸發全域性 AJAX 事件，如 ajaxStart 或 ajaxStop 。可用於控制不同的Ajax事件
ifModified	Boolean	(預設: false) 僅在伺服器資料改變時獲取新資料。使用 HTTP 包 Last-Modified 頭資訊判斷。
processData	Boolean	(預設: true) 預設情況下，傳送的資料將被轉換為物件(技術上講並非字串) 以配合預設內容型別 “application/x-www-form-urlencoded”。如果要傳送 DOM 樹資訊或其它不希望轉換的資訊，請設定為 false。
success	Function	請求成功後回撥函式。這個方法有兩個引數：伺服器返回資料，返回狀態 function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... this; // the options for this ajax request }