jQuery使用Ajax的實際例子

<SCRIPT src="../js/jquery/jquery.js" type=text/javascript></SCRIPT>

<div id="loadingItem" style='display:none; position:absolute;top:11em;right:2em;background-color: red;color: white;'><br><font size=+1>正在加载...</font></div>


<select id="activity_bookfair_grp_id" name="activity_bookfair_grp_id"></select>

<input id="activity_bookfair_grp_name" size="15"> &nbsp; &nbsp;
 <input type="button" value="增加" onclick="add_bookfair_grp_by_ajax();"/>

function add_bookfair_grp_by_ajax(){
	var url = 'activity_bookfair.php?act=add_bookfair_grp';

	
    var msgDiv = $("#loadingItem");
    msgDiv.show();
    
 $.ajax({
    url: url,
    type:'GET',
    complete :function(){msgDiv.hide();},  //請求完回調的函數，無論成功與失敗都會調用，在success後
    dataType: 'json',	//會把回傳的字符串自動轉換為json對象！
    data: {activity_bookfair_grp_name: $('#activity_bookfair_grp_name').val()},
    
    error: function(xhr) {	alert('Ajax request 發生錯誤');},
    
    success: function(response) {
		
		$(response.html_text).appendTo("#activity_bookfair_grp_id")//添加下拉框的option
		
		$("#activity_bookfair_grp_id").attr("value",response.id);
		
		
		$('#activity_bookfair_grp_name').val('');
		alert('添加成功!');
		
    }
  });

}

PHP處理部分

if($_REQUEST['act'] == 'add_bookfair_grp'){
	$activity_bookfair_grp_name = $_GET['activity_bookfair_grp_name'];
	
	
	$html_text = "<option value='$activity_bookfair_grp_id'>$activity_bookfair_grp_name</option>";
	
	$arr = array ('html_text'=>$html_text,'id'=>'001');
	
	echo json_encode($arr);

}
}