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

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

Smile 2020-09-23 HTML jQuery 阅读:181

简介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>

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

  1. "xml": 返回 XML 类型数据。
  2. "html": 返回纯文本 HTML 信息。
  3. "script": 返回纯文本 JavaScript 代码。
  4. "json": 返回 JSON 格式数据 。
  5. "jsonp": JSONP 格式。
  6. "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);
  	}
});
  • type:可选,规定请求发送类型,默认是GET类型。
  • url:必需,规定把请求发送到哪个 URL。
  • dataType:可选,规定预期的服务器响应的数据类型。
  • data:可选,规定请求发送到服务器的数据。
  • success(data, textStatus, jqXHR):可选,请求成功时执行的回调函数。

很赞哦! (0)

文章评论

站点信息