jQuery使用Ajax的實際例子

最新推荐文章于 2021-08-05 12:46:10 发布

kenbli

最新推荐文章于 2021-08-05 12:46:10 发布

阅读量133

点赞数

分类专栏： JavaScript 文章标签： Ajax jQuery json PHP HTML ViewUI

JavaScript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏


<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">    
 <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);

}
}