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()})