学习jQuery的ajax,做一个基本的学习知识点总结,以免忘记。
这里用struts2框架搭建的环境,中间的配置文件web.xml,struts.xml,和动态方法调用没有列出,知识为了总结ajax的一个前后台数据交互的过程。
1.前端页面:放一个按钮(一定记得把jQuery引进jsp页面)
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<%-- <base href="<%=basePath%>"> --%>
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 引入jQuery -->
<script type="text/javascript" language="javascript" src="<%=basePath%>/js/jquery-1.3.1.js"></script>
$(document).ready(function(){
var $oDiv = $("#ajax");
$oDiv.click(function(){
$.ajax({
type:"GET",//发送请求类型
url:"user!add",//请求路径
//async:false,//默认为true,是异步请求
//传参给后台的形式(两种方式)
//data:{"username":"test","password":"123456"},
data:"username=test&password=123456",
dataType:"script",//返回类型
cache: false,//不使用当前浏览器的缓存
success:function(msg){//请求成功后调用的回调函数
//请求成功
alert("msg="+msg);
alert("success");
},
error:function(){
//Exception
alert("error");
}
});
});
});
</head>
<body>
<input id="ajax" type="button" value="添加用户">
</body>
</html>
2.后台代码
public class UserAction extends ActionSupport {
//属性定义,同时生成get,set方法,用于获取参数 username 和 password
private String username;
private String password;
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String add() throws IOException{
if(username != null){
String msg="test ajax";
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.print(msg);
out.flush();
out.close();
}
System.out.println("username=" + username);//当点击按钮时,控制台可以看到打印的值,是ajax发过来的参数。
System.out.println("password="+password);//
System.out.println("test success");
return "add_success";
}
}
3.代码解析
(1)点击按钮
(2)jQuery通过var $oDiv = $("#ajax");获取按钮这个对象-
(3)给对象帮定点击事件
$oDiv.click(function(){
$.ajax({
type:"GET",//发送请求类型
url:"user!add",//请求路径
//async:false,//默认为true,是异步请求
//传参给后台的形式(两种方式)
//data:{"username":"test","password":"123456"},
data:"username=test&password=123456",
dataType:"script",//返回类型
cache: false,//不使用当前浏览器的缓存
success:function(msg){//请求成功后调用的回调函数
//请求成功
alert("msg="+msg);
alert("success");
},
error:function(){
//Exception
alert("error");
}
});
});
(4)发送ajax请求后台,根据 url:"user!add",//请求路径找到后台的add方法
该方法能获取前面传递的参数username 和password,同时创建我们要返回
到前端异步请求的数据。
public String add() throws IOException{
if(username != null){
//创建ajax请求交换的数据msg
String msg="test ajax";
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.print(msg);
out.flush();
out.close();
}
System.out.println("username=" + username);
System.out.println("password="+password);
System.out.println("test success");
return "add_success";
}
(5)前端回调函数直接就能拿到后台设定的值,通过alert(msg)就能得到后台设定的String msg = "test ajax".
success:function(msg){//请求成功后调用的回调函数
//请求成功
alert("msg="+msg);
alert("success");
},