1. Home
  2. /
  3. Web technology
  4. /
  5. JQUERY
  6. /
  7. [ JQUERY ] –...

[ JQUERY ] – AJAX DEMO

評等結果
點擊便能為這篇文章進行評等!
[評等總次數: 1,平均評等: 5]

AJAX 基本格式

$.ajax({
type : 'POST', // 參數傳送方式
url : 'test.php', // 執行頁面
data : { key:value,key:value}, // 傳送資料
dataType : 'json',// 返回格式(xml/html/script/json/jsonp/text)
success : function(data) { // 執行成功後執行此函式
//假設回傳的json 格式為{"status":"fail","error_msg","找不到相關資料"}
if(data.status=='fail'){alert(data.error_msg);}//若狀態為失敗 就輸出錯誤訊息
else{dosomething...}//
}
}).fail(function() {alert('錯誤');});//執行失敗時執行此函式

實際範例:
點我開始範例
ajax_demo_form.html
表單輸入姓名,選擇姓別後透過ajax的方式去呼叫 show.php
show.php中會接到 姓名與姓別(當姓別為男時回傳 先生 /女 回傳 小姐)
在 ajax_demo_form.html 以alert的方式秀出 xxx 先生 你好!

ajax_demo_form.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>ajax 基礎範例</title>
</head>
<body>
姓名:<input id="name" name="name" type="text">
姓別:<select id="sex" name="sex">
<option value='m'>男</option>
<option value='f'>女</option>
</select>
<button type="button" id="send" class="btn btn-primary btn-lg" >送出</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#send').click(function(){
if($('#name').val()==''){alert('姓名不可為空');}else{show();}
});
});
function show(){
$.ajax({
type : 'POST', // 修改串接方式
url : 'show.php', // 修改串接頁面
data : {name:$('#name').val(),sex:$('#sex').val()}, // 修改傳送資料
dataType : 'json',
success : function(data1) { //回傳值帶入
alert(data1.name+' '+data1.sex+' 你好!' );
}
}).fail(function (jqXHR, textStatus, msg) {alert(msg);});
}
</script>
</body>
</html>

show.php

<?php
$name=$_POST['name'];
$sex=$_POST['sex'];
$arr=array();
$arr['name']=$name;//以 陣列 鍵/值 的方式儲存
$arr['sex']=($sex=='m'?'先生':'小姐');//將姓別轉換成相對應的 稱謂
echo json_encode($arr);
?>

評等結果
點擊便能為這篇文章進行評等!
[評等總次數: 1,平均評等: 5]

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *