讲给Android程序员看的前端系列教程(40集免费视频教程+源码)
版权声明
- 本文原创作者:谷哥的小弟
- 作者博客地址:http://blog.csdn.net/lfdfhl
概述
之前,我们介绍过JavaScript原生AJAX技术;在此,我们学习jQuery中对于AJAX的实现。
在jQuery中AJAX常见使用方式如下:
jQuery.ajax(url,[settings])
简写为$.ajax(url,[settings])
,该方式可处理GET和POST请求
参数如下:
- url:请求URL
- settings:请求设置
jQuery.get(url, [data], [callback], [type])
简写为$.get(url, [data], [callback], [type])
,该方式用于处理GET请求
参数如下:
- url:请求URL
- data:请求参数
- callback:回调函数
- type:响应数据的格式,例如:xml, html, script, json, text等等
jQuery.post(url, [data], [callback], [type])
简写为$.post(url, [data], [callback], [type])
,该方式用于处理POST请求
参数如下:
- url:请求URL
- data:请求参数
- callback:回调函数
- type:响应数据的格式,例如:xml, html, script, json, text等等
AJAX使用示例
在此,以示例形式介绍jQuery中AJAX的使用。
AJAX示例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AJAX</title>
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript">
//利用$.ajax()进行Get请求
$("#ajaxGetButton").click(function() {
var url = "http://httpbin.org/get";
var params = {
"username": "lucy",
"nickname": "pipi"
};
$.ajax({
"url": url,
"data": params,
"type": "GET",
"success": function(data) {
console.log(data);
console.log(data.url);
console.log(data.args.username);
console.log(data.args.nickname);
},
"error": function(data) {
console.log(data);
},
"dataType": "json"
});
});
//利用$.ajax()进行Post请求
$("#ajaxPostButton").click(function() {
var url = "http://httpbin.org/post";
var params = {
"username": "lucy",
"nickname": "pipi"
};
$.ajax({
"url": url,
"data": params,
"type": "POST",
"success": function(data) {
console.log(data);
console.log(data.url);
console.log(data.form.username);
console.log(data.form.nickname);
},
"error": function(data) {
console.log(data);
},
"dataType": "json"
});
});
//利用$.get()发送get请求
$("#getButton").click(function() {
var url = "http://httpbin.org/get";
var params = {
"username": "lucy",
"nickname": "pipi"
};
$.get(
url,
params,
function(data) {
console.log(data);
console.log(data.url);
console.log(data.args.username);
console.log(data.args.nickname);
},
"json"
);
});
//利用$.ajax()提交表单
function firstSubmit() {
var url = "http://httpbin.org/post";
$.ajax({
"url": url,
"data": $("#userform1").serialize(),
"type": "POST",
"success": function(data) {
console.log(data);
console.log(data.url);
console.log(data.form.username);
console.log(data.form.userage);
},
"error": function(data) {
console.log(data);
},
"dataType": "json"
});
return false;
}
//利用$.post()提交表单
function secondSubmit() {
var url = "http://httpbin.org/post";
var params = $("#userform2").serialize();
console.log(params);
$.post(
url,
params,
function(data) {
console.log(data);
console.log(data.url);
console.log(data.form.username);
console.log(data.form.userage);
},
"json"
);
return false;
}
</script>
</head>
<body>
<h2 style="color: red;">本文作者:谷哥的小弟</h2>
<h2 style="color: red;">博客地址:http://blog.csdn.net/lfdfhl</h2>
<button id="ajaxGetButton">利用$.ajax()进行Get请求</button>
<br /><br />
<button id="ajaxPostButton">利用$.ajax()进行Post请求</button>
<br /><br />
<button id="getButton">利用$.get()发送get请求</button>
<br /><br />
<form method="post" id="userform1" onsubmit="return firstSubmit()">
姓名: <input type="text" id="name" name="username" style="width: 150px" />
<br /><br />
年龄: <input type="text" id="age" name="userage" style="width: 150px" />
<br /><br />
<input type="submit" value="利用$.ajax()提交表单" />
</form>
<br /><br />
<form method="post" id="userform2" onsubmit="return secondSubmit()">
姓名: <input type="text" id="name" name="username" style="width: 150px" />
<br /><br />
年龄: <input type="text" id="age" name="userage" style="width: 150px" />
<br /><br />
<input type="submit" value="利用$.post()提交表单" />
</form>
</body>
</html>
AJAX示例2
项目结构
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AJAX</title>
<script type="text/javascript" src="jQuery/jquery-1.11.3.js"></script>
<script type="text/javascript">
$(function() {
//利用$.ajax()请求数据
$("#ajaxButton").click(function() {
var url = "/AJAX04/AJAXServlet";
var params = {
"username": "lucy",
"password": "123"
};
$.ajax({
"url": url,
"data": params,
"type": "POST",
"success": function(data) {
console.log(data);
console.log(data.message);
},
"error": function(data) {
console.log(data);
console.log(data.message);
},
"dataType": "json"
});
});
//利用$.get()发送get请求
$("#getButton").click(function() {
var url = "/AJAX04/AJAXServlet";
var params = {
"username": "lucy",
"password": "123"
};
$.get(
url,
params,
function(data) {
console.log(data);
console.log(data.message);
},
"json"
);
});
//利用$.post()发送post请求
$("#postButton").click(function() {
var url = "/AJAX04/AJAXServlet";
var params = {
"username": "lucy",
"password": "123"
};
$.post(
url,
params,
function(data) {
console.log(data);
console.log(data.message);
},
"json"
);
});
});
</script>
</head>
<body>
<h2 style="color: red;">本文作者:谷哥的小弟</h2>
<h2 style="color: red;">博客地址:http://blog.csdn.net/lfdfhl</h2>
<button id="ajaxButton">利用$.ajax()发送请求</button>
<button id="getButton">利用$.get()发送get请求</button>
<button id="postButton">利用$.post()发送post请求</button>
</body>
</html>
AJAXServlet
package cn.com;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* 本文作者:谷哥的小弟
* 博客地址:http://blog.csdn.net/lfdfhl
*
* 在jQuery中使用ajax
*/
public class AJAXServlet extends HttpServlet {
private static final long serialVersionUID = -4452579660869800468L;
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String method = request.getMethod();
String username = request.getParameter("username");
String password = request.getParameter("password");
System.out.println("请求方式:" + method);
System.out.println("请求参数:" +"username="+username+",password="+password);
if("lucy".equals(username)&&"123".equals(password)) {
//设置响应数据
String jsonData = "{\"message\":\"success\"}";
//设置响应格式
response.setContentType("application/json;charset=UTF-8");
//返回响应内容
response.getWriter().print(jsonData);
}else {
//设置响应数据
String jsonData = "{\"message\":\"error\"}";
//设置响应格式
response.setContentType("application/json;charset=UTF-8");
//返回响应内容
response.getWriter().print(jsonData);
}
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>AJAX04</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>AJAXServlet</servlet-name>
<servlet-class>cn.com.AJAXServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AJAXServlet</servlet-name>
<url-pattern>/AJAXServlet</url-pattern>
</servlet-mapping>
</web-app>