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)
参数 | 描述 |
---|---|
url | 必需。规定将请求发送的哪个 URL。 |
data | 可选。规定连同请求发送到服务器的数据。 |
success(response,status,xhr) | 可选。规定当请求成功时运行的函数。 额外的参数:
|
dataType | 可选。规定预计的服务器响应的数据类型。 默认地,jQuery 将智能判断。 可能的类型:
|
详细说明
该函数是简写的 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" } );
例子 2
显示 test.php 返回值(HTML 或 XML,取决于返回值):
$.get("test.php", function(data){ alert("Data Loaded: " + data); });
例子 3
显示 test.cgi 返回值(HTML 或 XML,取决于返回值),添加一组请求参数:
$.get("test.cgi", { name: "John", time: "2pm" }, function(data){ alert("Data Loaded: " + data); });