Jquery-Ajax之$.get()

使用$.get()方法来创建GET请求 
jQuery的$.get()方法提供了你简单的方式来处理HTTP GET方法,通常用来获取web页面或者图片。对应的是POST方法。使用$.get()方法非常简单,如下: 

$.get( url );url是服务器端的一个地址,可以是服务器端脚本或者是一个静态页面,如下: 

$.get( "http://gbin1.com/index.html" ); 或者一个动态的document 

$.get( "http://gbin1.com/index.jsp" ); 当然,同时也支持参数,如下: 

$.get( "http://gbin1.com/index.jsp?category=jquery" ); 一个简单的方法来处理是使用参数对象来发送http参数,如下: 

var gbdata={category:"jquery", subcategory:"ajax"}; 
$.get( "http://gbin1.com/index.jsp", data );  当然以下形式也没有问题: 

var gbdata="category=jquery&subcategory=ajax"; 
  $.get( "http://gbin1.com/index.jsp", data );  服务器端取得数据 
这里我们使用的$.get()方法都是发送请求到服务器,但是有的时候,我们需要得到服务器返回的内容,例如,一些数据。这里我们如何处理呢?答案就是书写一个回调(Callback)方法,一个AJAX请求的返回数据会作为这个回调方法的参数,如下: 

function myCallback( returnedData ) { 
   // 这里我们可以处理returnedData,例如,封装数据生成HTML展现给用户 
} 
一旦你创建了你的回调函数,你就可以将它传递给$.get()方法,如下: 

var gbdata={category:"jquery", subcategory:"ajax"}; 
$.get( "http://gbin1.com/index.jsp", gbdata, myCallback );指定返回的数据类型 
服务器端的数据返回类型可以是不同的格式,包括,XML,JSON和javascript,或者HTML。缺省情况下,jQuery会尽力自己判断返回的数据格式,并且正确解析,当然最好的大家自己指定数据格式。 

参数可以为以下: 

•XML 
•JSON 
•script 
•HTML 
例如,如果你知道你的服务器端返回JSON格式,你可以调用$.get(),如下: 

$.get( "http://gbin1.com/index.jsp", gbdata, myCallback, "json" );这里是一个完整的例子,展示了如何使用$.get()方法来调用一个AJAX请求并且返回响应内容。首先创建一个文本文件如下: 

{ 
   "site": "GBin1.com", 
   "date": "2011/06/06", 
   "tag": "jQuery", 
   "pages": 800 
}
以上文件模拟了一个JSON响应的结果。下面我们保存另外一个html文件,如下: 

<!doctype html> 
<html lang="en"> 
<head> 
<title>Site Info Demo for jQuery $.get()</title> 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
<style> 
#container{ 
padding: 100px; 
font-size: 12px; 
font-family: arial; 
} 
#result{ 
padding: 10px 0; 
} 
#result li{ 
padding: 10px 0; 
} 
</style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script> 
$( function() { 
    $('#showinfo').click( function() { 
      var data = { site: "GBin1.com", date: "20120318" }; 
      $.get( "siteinfo.txt", data, success, "json" ); 
    } ); 

    function success( siteData ) { 
      var result = "<li>Site Name:" + siteData.site + "</li>"; 
            result += "<li>Creation Date:" + siteData.date + "</li>"; 
            result += "<li>Site tag: "  + siteData.tag + "</li>"; 
            result += "<li>Site pages: "  + siteData.pages + "</li>"; 
      $("#result").html(result); 
    } 
} ); 
</script> 
</head> 
<body> 
<div id="container"> 
<button id="showinfo">show info</button> 
<ul id="result"></ul> 
</body> 
</div> 
</html>在线演示 

代码说明: 
1.首先我们这里包含了一个show info的按钮,点击这个按钮触发click事件 
2.代码最上面我们加载jQuery的最新类库,然后当页面加载完毕后,即DOM is ready后等待运行,这里我们没有使用 "$(document).ready(function(){" , 而是直接使用 "$( function() {",这两种方式在jQuery是等同的。当然,使用前一种代码更容易阅读,后面一种方式比较简洁。 
3.我们使用click方法来绑定一个点击方法到show info按钮。如果你点击这个按钮,将会触发一个AJAX请求到siteinfo.txt,并且我们向这个url传递了俩个参数,当然,对于这个例子来说 传递url参数没有意义,如果你指向一个后台url,它需要处理你的参数,再返回结果。然后,这里有个success()的回调函数,它在AJAX请求完 毕后运行,最后我们指定使用的数据格式是JSON 
4.success()方法将调用由jQuery处返回的JSON对象,并且组装最后的显示内容。 
5.我们将显示内容显示到$("#result")中,这是一个div层 
6.如果你使用firefox,并且安装了firebug,你可以使用网络功能来查看后台的ajax调用 

$.ajax({url:'action',type:'post',dataType:'html',data:"object.字段="+$('#页面元素ID').val()})

  

posted @ 2013-09-13 17:12  暖流  阅读(349)  评论(0编辑  收藏  举报