您现在的位置是：网站首页> 前端技术> jQuery jQuery

jQuery - AJAX get 和 post 方法使用示例

Smile 2020-09-23 HTML jQuery 阅读：1210

简介Ajax通过在后台与服务器进行少量数据交换，可以使网页实现异步更新，能够在用户没有察觉的情况下更新部分网页，给用户更好的使用体验，下面简单介绍下 jQuery AJAX get 和 post 方法使用示例

1、HTML 页面和 jQuery Ajax get() 方法代码

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<input type="text" placeholder="输入ID获取图书信息"><span id="getBook">点击获取</span>
<ul>
	<li>ID：<span id="id"></span></li>
	<li>名称：<span id="name"></span></li>
	<li>分类：<span id="type"></span></li>
	<li>编号：<span id="number"></span></li>
</ul>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
	$('#getBook').click(function(){
		var id = $(this).prev('input').val();
		//GET方式
		$.get("book.php",{id:id},function(data,status){
			console.log(data);
		    $('#id').html(data.data.id);
		    $('#name').html(data.data.name);
		    $('#type').html(data.data.type);
		    $('#number').html(data.data.number);
		},'json');
</script>
</body>
</html>

注：回调方法后面要记得指定服务器响应的数据类型，不指定返回将会是字符串类型，有如下类型值

"xml": 返回 XML 类型数据。
"html": 返回纯文本 HTML 信息。
"script": 返回纯文本 JavaScript 代码。
"json": 返回 JSON 格式数据。
"jsonp": JSONP 格式。
"text": 返回纯文本字符串。

2、服务端 PHP 代码

<?php

	if(isset($_SERVER["HTTP_X_REQUESTED_WITH"]) && strtolower($_SERVER["HTTP_X_REQUESTED_WITH"])=="xmlhttprequest"){
		$userArr = [
			1=>['id'=>1,'name'=>'平凡的世界','type'=>'文学','number'=>'277888'],
			2=>['id'=>2,'name'=>'傲慢与偏见','type'=>'爱情','number'=>'743675'],
			3=>['id'=>3,'name'=>'三体','type'=>'科幻','number'=>'347458'],
		];

		$idArr = [1,2,3];

		$id = $_REQUEST['id'];
		// echo $id;exit;
		if (in_array($id, $idArr)) {
			$book = $userArr[$id];
			echo json_encode(['code'=>0,'msg'=>'success','data'=>$book]);
		}else{
			echo json_encode(['code'=>0,'msg'=>'暂无数据']);
		}
	}

?>

3、post() 方法代码

//POST方式
$.post("book.php",{id:id},function(data,status){
    console.log(data);
    $('#id').html(data.data.id);
    $('#name').html(data.data.name);
    $('#type').html(data.data.type);
    $('#number').html(data.data.number);
},'json');

4、get()、post() 方法也可以综合写成如下代码

$.ajax({
  	type: 'post',
  	url: 'book.php',
  	dataType: 'json',
  	data: {id:id},
  	success: function(data){
  		$('#id').html(data.data.id);
	    $('#name').html(data.data.name);
	    $('#type').html(data.data.type);
	    $('#number').html(data.data.number);
  	}
});