jQuery $.get()方法使用案例

妖狐艹你老母 2022-06-07 09:17 198阅读 0赞

**jQuery $.get()方法使用案例**

注：需要引入jquery文件，本案例使用的是 jquery-2.0.0.js

**1、get.jsp**

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <script type="text/javascript" src="js/jquery-2.0.0.js"></script>
    <script type="text/javascript">
    	$(function() {
    		/* 	当密码框失去焦点时，触发get异步请求 */
    		$("#pwd").blur(
    				function() {
    					$.get("login.do", "name=" + $("#name").val() + "&pwd="
    							+ $(this).val(), function(data) {
    						alert(data.uid + "," + data.realname);
    						//当第四个参数设置为json时，不需要手动解析，而是由jquery框架帮助我们实现了解析
    					}, "json");
    				}); 
    	});
    </script>
    </head>
    <body>
    	<form>
    		用户名： <input type="text" name="name" id="name"><br /> 密码： <input
    			type="password" name="pwd" id="pwd"><br />
    	</form>
    </body>
    </html>

**2、Userservlet.java**

@WebServlet("/login.do")
    public class UserServlet extends HttpServlet {
    
    	protected void doGet(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		// 响应中文乱码处理
    		response.setContentType("text/html; charset=UTF-8");
    		// 接收用户输入
    		String name = request.getParameter("name");
    		String pwd = request.getParameter("pwd");
    		System.out.println(name + "," + pwd);
    		// 响应信息（模拟json字符串格式返回）
    		PrintWriter out = response.getWriter();
    		out.write("{\"uid\":1,\"realname\":\"张三\"}");
    		out.flush();
    		out.close();
    	}}

详细的方法说明参考w3scool

# jQuery ajax - get() 方法 #

## 实例 ##

使用 AJAX 的 GET 请求来改变 div 元素的文本：

$("button").click(function(){
      $.get("demo_ajax_load.txt", function(result){
        $("div").html(result);
      });
    });

## 定义和用法 ##

get() 方法通过远程 HTTP GET 请求载入信息。

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

### 语法 ###

$(selector).get(url,data,success(response,status,xhr),dataType)

<table> 
 <tbody> 
  <tr> 
   <th style="width:30%">参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><em>url</em></td> 
   <td>必需。规定将请求发送的哪个 URL。</td> 
  </tr> 
  <tr> 
   <td><em>data</em></td> 
   <td>可选。规定连同请求发送到服务器的数据。</td> 
  </tr> 
  <tr> 
   <td><em>success(response,status,xhr)</em></td> 
   <td> <p>可选。规定当请求成功时运行的函数。</p> <p>额外的参数：</p> 
    <ul> 
     <li>response - 包含来自请求的结果数据</li> 
     <li>status - 包含请求的状态</li> 
     <li>xhr - 包含 XMLHttpRequest 对象</li> 
    </ul> </td> 
  </tr> 
  <tr> 
   <td><em>dataType</em></td> 
   <td> <p>可选。规定预计的服务器响应的数据类型。</p> <p>默认地，jQuery 将智能判断。</p> <p>可能的类型：</p> 
    <ul> 
     <li>"xml"</li> 
     <li>"html"</li> 
     <li>"text"</li> 
     <li>"script"</li> 
     <li>"json"</li> 
     <li>"jsonp"</li> 
    </ul> </td> 
  </tr> 
 </tbody> 
</table>

### 详细说明 ###

该函数是简写的 Ajax 函数，等价于：

$.ajax({
      url: url,
      data: data,
      success: success,
      dataType: dataType
    });

根据响应的不同的 MIME 类型，传递给 success 回调函数的返回数据也有所不同，这些数据可以是 XML root 元素、文本字符串、JavaScript 文件或者 JSON 对象。也可向 success 回调函数传递响应的文本状态。

对于 jQuery 1.4，也可以向 success 回调函数传递 XMLHttpRequest 对象。

### 示例 ###

请求 test.php 网页，忽略返回值：

$.get("test.php");

## 更多示例 ##

### 例子 1 ###

请求 test.php 网页，传送2个参数，忽略返回值：

$.get("test.php", { name: "John", time: "2pm" } );