首页 > 代码库 > 在jquery中使用AJAX

在jquery中使用AJAX

在jquery中使用封装好的AJAX会对开发效率起到极大的便利,因此掌握jquery中的一系列AJAX封装函数是做好页面数据交互的必备技能;

 

1、在之前,我们首先需要详细了解AJAX异步请求接受的五中响应消息,根据不同的响应类型进行不同的操作

  (1)text/plain    // 明文

       服务器端:

              header(‘Content-Type: text/plain‘);

              echo ‘succ‘;

       客户端:

              if(xhr.responseText===‘succ‘){ ... }

 

  (2)text/html   //html 片段

       服务器端:

              header(‘Content-Type: text/html‘);

              echo "<tr><td>$data</td></tr>";

       客户端:

              tbody.innerHTML = xhr.responseText

 

 (3)application/javascript   //javascript代码片段

       服务器端:

              header(‘Content-Type: application/javascript‘);

              echo "alert($data); f1(); f2($data)";

       客户端:

              eval( xhr.responseText )

 

  (4)application/xml  //xml数据结构字符串

       服务器端:

              header(‘Content-Type: application/xml‘);

              echo "<bookList><book>$b</book></bookList>";

       客户端:

              var document = xhr.responseXML

 

 (5)application/json  //json 结构数据字符串

       服务器端:

              header(‘Content-Type: application/json‘);

              //echo "[ {"bname":"","price":35.5},{} ]";

              $list = ...;

              echo json_encode($list);

       客户端:

              var obj = JSON.parse( xhr.responseText )

 

2 、 jquery 中总共封装了六个有关AJAX异步请求的函数 :

  (1)、对象方法  ---load()   

             $(‘选择器‘).load(URL, [请求数据], [成功后的回调函数])

             $(‘ul‘).load(‘search_suggest.php‘);

             向指定的URL发起异步请求;若有请求数据,就是POST请求,否则就是GET请求;获取服务器端返回HTML片段响应,设置为当前选定元素的innerHTML。

  

  (2)、全局函数 ---$.get()

    $.get(URL, [请求数据], 响应成功后的回调函数)

    向指定的URL发起异步的GET请求,把请求数据追加在URL的后面;服务器给出了成功的响应会自动调用第三个参数——doResponse。

      提示:$.get会根据服务器端返回的响应消息内容类型自动决定如何处理,如applicatoin/json,会自动调用JSON.parse(xhr.responseText)进行解析!

  

  (3)、全局函数---$.post()

    $.post(URL, 请求数据, 响应成功后的回调函数)

    基本上同$.get() 不同的是 请求类型为POST 而且会自动设置请求头的 content-type 为 application/x-www-form-urlencode;

  

  (4)、$.getScript()    向指定的URL发起异步的GET请求,把请求数据放置在url后面;服务器给出了成功的响应会自动执行eval( xhr.responseText )

             要求服务器必须返回application/javascript!即使不是,也会强制调用eval(xhr.responseText)进行执行!而$.get()可以实现同样的功能,却可以根据服务器端的响应头来决定是否调用eval()

  (5)、 $.getJSON()   指定的URL发起异步的GET请求,把请求数据放置在url后面;服务器给出了成功的响应会自动执行JSON.parse( xhr.responseText )

             要求服务器必须返回application/json!即使不是,也会强制调用JSON.parse(xhr.responseText)进行执行!而$.get()可以实现同样的功能,却可以根据服务器端的响应头来决定是否调用JSON.parse()

 

  上述五个函数的通病:只能处理成功的响应消息!如果服务器端返回了错误的响应消息(如404)上述五个函数不会有任何的提示——没有相关的回调函数!

  (6)、$.ajax()    jquery中所有的异步请求都推荐使用 $.ajax()函数来完成   

    $.ajax()函数接收一个众多参数组成的对象,可以指定

      成功的调用:  beforeSend()  =>  success()  => complete()

      失败的调用:  beforeSend()  =>  error()  => complete()

     $.ajax( {

                type: ‘GET‘,   //POST/PUT/DELETE...

                url: ‘x.php‘,

                data: ‘k=v&k=v‘,  //{k:v, k:v}

                beforeSend: fn,      //在请求发送前的回调

                success: fn,            //响应成功后的回调

                error: fn,               //响应失败后的回调

              complete: fn          //响应完成后(不论成败)的回调

         } )

 

对应于原生AJAX:

  var xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function(){

      if(xhr.readyState===4){

          if(xhr.status===200){

              success();

          }else {

              error();

          }

          complete()

      }

  }

  xhr.open()

  beforeSend();

  xhr.send()

上面仅仅列举了$.ajax()方法的几个常用的参数,还有更多的参数请查看手册

 

案例演示 jquery中的$.ajax方法使用

实现效果如下图:

技术分享

 

(1)、实现 li 的 onm ouserover 事件 请求该类别下的所有车辆信息

(2)、实现 列表下的div 的 click 事件 请求车辆详细信息

 

 

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>...</title>
  <style>
	*{
		padding:0;
		margin:0;
	}
	.container{
		width:900px;
	}
	.container ul{
		overflow:hidden;
		list-style:none;
		width:100%
	}
	.container ul li{
		text-align:center;
		border-bottom: 1px solid #eee;
		float:left;
		line-height:30px;
		width:185px;
		padding:0 20px;
	}
	.container ul li:hover{
		border-bottom:1px solid red;
	}
	#carList {
		width:100%
		overflow:hidden;
		height:325px;
	}
	#carList div {
		float:left;
		padding-top:25px;
		width:300px;
	}
	#carList>div:hover{
		cursor:pointer;
	}
	#carList div b {
		padding-left:20px;
	}
	#carList div p{
		line-height:35px;
		padding-left:20px;
	}
	#carList div p span {
		color:red;
	}
	#carShow{
		margin-top:85px;
		overflow:hidden;
	}
	#carShow img{
		float:left;
	}
	#carShow>div{		
		float:left;
		padding-left:175px;
	}
	#carShow p{
		font-size:1.5em;
		line-height:35px;
	}
	#carShow p span{
		color:red;
	}
	#carShow.hide{
		display:none;
	}
  </style>
 </head>
 <body>
  <h1>车辆查询系统</h1>
  <hr>
  <div class="container">
		<ul id="uList">
			<li data-value="http://www.mamicode.com/LT8">8万以下</li>
			<li data-value="http://www.mamicode.com/LT15">8-15万</li>
			<li data-value="http://www.mamicode.com/LT30">15-30万</li>
			<li data-value="http://www.mamicode.com/SUV">SUV</li>
		</ul>
		<div id="carList">
		</div>
		<div id="carShow" class="hide">
			
		</div>	
  </div>
  <script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.11.3.js"></script>
  <script type="text/javascript">
		$("#uList").on("mouseover","li",function(e){
				var $v = $(this).attr("data-value");
				//console.log($v);
				$.ajax({
					url:"car_list.php",
					data:{"type":$v},
					success:function(obj){
						html="";
						for(var i =0; i<obj.length;i++){
							var c = obj[i];
							html+=`<div data-select=‘${c.cid}‘>
											<b>${c.cname}</b>
											<p>有
												<span>${c.count}</span>
												正在购买
											</p>
											<img src=http://www.mamicode.com/‘${c.pic}‘>"#carList").html(html);
					}
				});
		})
		$("#carList").on("click","div",function(){       
			var $v = $(this).attr("data-select");
			console.log($v);
			$.ajax({
				url:"car_select.php",
				data:{"cid":$v},
				success:function(obj){
					$("#carShow").removeClass("hide").html(
					`<img src=http://www.mamicode.com/‘${obj.pic}‘ >>

  

(3)、响应页面以php为例  -------数据传输格式为JSON

 

<?php   //init 文件
$conn = mysqli_connect(‘127.0.0.1‘,‘root‘,‘‘,‘huimaiche‘,3306);
$sql = ‘SET NAMES UTF8‘;
mysqli_query($conn,$sql);

   

<?php    // li onm ouserover 事件的响应   
header(‘Content-Type:application/json;charset=UTF-8‘);
@$tid  = $_REQUEST[‘type‘] or die(‘{"msg":"type required"}‘);
require(‘car_init.php‘);
$sql = "SELECT * FROM car WHERE type=‘$tid‘";
$result = mysqli_query($conn,$sql);
$list = mysqli_fetch_all($result,MYSQLI_ASSOC);
echo json_encode($list);

  

<?php  // div click事件 的响应
header(‘Content-Type:application/json;charset=UTF-8‘);
@$cid  = $_REQUEST[‘cid‘] or die(‘{"msg":"cid required"}‘);
require(‘car_init.php‘);
$sql = "SELECT * FROM car WHERE cid=‘$cid‘";
$result = mysqli_query($conn,$sql);
$row = mysqli_fetch_assoc($result);
//var_dump($row);
echo json_encode($row);

  

 

在jquery中使用AJAX