030_jQuery Ajax的get方法

最新推荐文章于 2024-03-17 09:54:54 发布

自由与束缚JavaJavaScript

最新推荐文章于 2024-03-17 09:54:54 发布

阅读量315

点赞数

分类专栏： jQuery学习文章标签： ajax jquery javascript

本文链接：https://blog.csdn.net/aihiao/article/details/112396182

版权

jQuery学习专栏收录该内容

37 篇文章 0 订阅

订阅专栏

1. $.get()方法通过HTTP GET请求从服务器上请求数据。

2. $.get()方法请求成功时可调用回调函数。

3. 语法:

$.get(url,data,function(response,textStatus,jqXHR),dataType)

4. 参数

5. jqXHR对象

5.1. 所有jQuery的AJAX方法返回的是XMLHTTPRequest对象的超类。$.get()方法返回的也是XMLHTTPRequest对象的超类, 实现了约定的接口, 赋予其所有的属性、方法, 以及约定的行为。出于对由$.ajax()方法使用的回调函数名称便利性和一致性的考虑, 它提供了error(), success()以及complete()方法。

// 请求生成后立即分配处理程序, 请记住该请求针对jqxhr对象
var jqXHR = $.get("login.action", function(response, textStatus, jqXHR) {

})
.success(function(response,textStatus,jqXHR) { 

})
.error(function(jqXHR,textStatus,error) { 

})
.complete(function(jqXHR,textStatus) { 

});

6. 例子

6.1. 新建一个名叫jQueryAjaxGet的动态WEB工程

6.2. 新建index.html

<!DOCTYPE html>
<html>
	<head>
		<title>jQuery-Ajax的get()方法</title>
		<meta charset="utf-8" />

		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					var jqXHR = $.get("getVideo.action", {id: '1001', videoName: 'jQuery视频教程', lession: '10', dataType: 'xml'}, function(response, textStatus, jqXHR){
						$("#result").text(response);
					}); 
					console.log(jqXHR);
				});
				$('#btn2').click(function(){
					$.get("getVideo.action", {id: '1001', videoName: 'jQuery视频教程', lession: '10', dataType: 'json'}, function(response, textStatus, jqXHR){
						$("#result").text(response);
						console.log('-------Start-------------');
						console.log('-------End-------------');
					})
					.success(function(response,textStatus,jqXHR) { 
						console.log('-------success Start-------------');
						for(var i = 0; i < arguments.length; i++){
							console.log(arguments[i]);
						}	
						console.log('-------success End-------------');
					})
					.error(function(jqXHR,textStatus,error) { 
						console.log('-------error Start-------------');
						for(var i = 0; i < arguments.length; i++){
							console.log(arguments[i]);
						}		
						console.log('-------error End-------------');
					})
					.complete(function(jqXHR,textStatus) { 
						console.log('-------complete Start-------------');
						for(var i = 0; i < arguments.length; i++){
							console.log(arguments[i]);
						}
						console.log('-------complete End-------------'); 
					}); 
				});
				$('#btn3').click(function(){
					$.get("getVideo.action", {id: '1001', videoName: 'jQuery视频教程', lession: '10', dataType: 'xml'}, function(response, textStatus, jqXHR){
						var data = $(response);
						$("#result").text('code=' + data.find('code').text() + ',info=' + data.find('info').text() + ',msg=' + data.find('msg').text());
					}, "xml");
				});
				$('#btn4').click(function(){
					$.get("getVideo.action", {id: '1001', videoName: 'jQuery视频教程', lession: '10', dataType: 'json'}, function(response, textStatus, jqXHR){
						$("#result").text('code=' + response.data.code + ',info=' + response.data.info + ',msg=' + response.data.msg);
					}, "json"); 
				});
			});
		</script>
		<style type="text/css">
			div {
				width: 450px;
				height: 100px;
				background-color: pink;
			}
		</style>
	</head>
	<body> 
  		<div id="result">结果区域</div><br />
  		<button id="btn1">get方法请求获取xml数据</button> <button id="btn2">get方法请求获取json数据</button><br /><br />
  		<button id="btn3">get方法规定服务器响应xml数据</button> <button id="btn4">get方法规定服务器响应json数据</button>
	</body>
</html>

5.3. 新建test.xml

<?xml version="1.0" encoding="UTF-8"?>
<data>
	<code>1</code>
	<info>success</info>
	<msg>请求成功。</msg>
</data>

5.4. 新建text.json

{"data": {"code": 1, "info": "success", "msg": "请求成功。"}}

5.5. 新建JqueryAjaxGet.java

package com.rjbd.jag;

import java.io.BufferedReader;
import java.io.FileReader;
import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class JqueryAjaxGet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		String id = req.getParameter("id");
		String videoName = new String(req.getParameter("videoName").getBytes("ISO-8859-1"), "utf-8");
		String lession = req.getParameter("lession");
		String dataType = req.getParameter("dataType");
		
		System.out.println("id = " + id + ", videoName = " + videoName + " , lession = " + lession + " , dataType = " + dataType);
		
		FileReader fr = new FileReader(getServletContext().getRealPath("test." + dataType));
		BufferedReader br = new BufferedReader(fr);
		
		StringBuffer sb = new StringBuffer();
		String result = null;
		while((result = br.readLine()) != null) {
			sb.append(result);
		}
		br.close();
		fr.close();
		
		// 响应客户端的内容类型是text/plain 编码是UTF-8(包含字符编码和网页编码)
		resp.setContentType("text/plain;charset=UTF-8");
		resp.getWriter().write(sb.toString());
	}
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doGet(req, resp);
	}
}

5.6. 修改web.xml

5.7. 运行项目

自由与束缚JavaJavaScript

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
030_jQuery Ajax的get方法

1. $.get()方法通过HTTP GET请求从服务器上请求数据。2. $.get()方法请求成功时可调用回调函数。3. 语法:$.get(url,data,function(response,textStatus,jqXHR),dataType)4. 参数5. jqXHR对象5.1. 所有jQuery的AJAX方法返回的是XMLHTTPRequest对象的超类。$.get()方法返回的也是XMLHTTPRequest对象的超类, 实现了约定的接口, 赋予其所有的属性、方法,
复制链接

扫一扫