首页 > 代码库 > Struts2之ajax提交表单（借助jquery插件）
Struts2之ajax提交表单（借助jquery插件）
1 index.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">
<script type="text/javascript" src=http://www.mamicode.com/"JS/jquery-1.9.1.min.js" ></script>
<script type="text/javascript">
$(document).ready( function() {
$("#btn_login").click( function() {
var url = ‘ajaxLogin‘;
//获取表单值，并以json的数据形式保存到params中
var params = {
loginName:$("#username").val(),
password:$("#password").val(),
};
//使用$.post方式
$.post(
url, //服务器要接受的url
params, //传递的参数
function qwer(data){ //服务器返回后执行的函数 参数 data保存的就是服务器发送到客户端的数据
alert(data);//就是root对应的值这里是result!!
var member = eval("("+data+")"); //包数据解析为json 格式
$(‘#result‘).html("欢迎您:"+member.name+" "+"你的密码:"+member.password);
},
‘json‘ //数据传递的类型 json
);
});
});
</script>
</head>
<body>
<span>用户名：</span>
<input type="text" name="username" id="username">
<br />
<span>密码：</span>
<input type="password" name="password" id="password">
<br />
<input type="button" id="btn_login" value=http://www.mamicode.com/"登录" />
<p>
这里显示ajax信息：
<br />
<span id="result"></span>
</p>
</body>
</html>
2 action类
package org.action;
import com.opensymphony.xwork2.ActionSupport;
import java.util.HashMap;
import java.util.Map;
import net.sf.json.JSONObject;
public class AjaxLoginAction extends ActionSupport {
// 用户Ajax返回数据
private String result;
// struts的属性驱动模式，自动填充页面的属性到这里
private String username;
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
private String password;
public String getResult() {
return result;
}
public void setResult(String result) {
this.result = result;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
@Override
public String execute() {
// 用一个Map做例子
Map<String, String> map = new HashMap<String, String>();
// 为map添加一条数据，记录一下页面传过来loginName
map.put("name", this.username);
map.put("password", this.password);
// 将要返回的map对象进行json处理
JSONObject jo = JSONObject.fromObject(map);
// 调用json对象的toString方法转换为字符串然后赋值给result
this.result = jo.toString();
// 可以测试一下result
System.out.println(this.result);
return SUCCESS;
}
}
3 struts.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
<package name="ajax" extends="json-default">
<action name="ajaxLogin" class="org.action.AjaxLoginAction">
<!-- 返回类型为json 在sjon-default中定义 -->
<result type="json">
<!-- root的值对应action要返回的属性 -->
<!-- 这里的result值即是 对应action中的 result -->
<param name="root">result</param>
</result>
</action>
</package>
</struts>
4所需jar包截图
5 所需jquery.js
6运行截图：
Struts2之ajax提交表单（借助jquery插件）