【communication】ajax之jquery与struts2通信 小实验

前端之家收集整理的这篇文章主要介绍了【communication】ajax之jquery与struts2通信 小实验前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

先创建一action,接受用户登录参数,若用户名、密码相同,则返回success.jsp,否则返回fail.jsp

1、LoginAction.java

package com.jing.action;
import com.opensymphony.xwork2.ActionSupport;
public class LoginAction extends ActionSupport {
private String name;
private String password;
@Override
public String execute() throws Exception {
if (getName().equals(getPassword())) {
return "success";
}else {
return "fail";
}
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}

2struts.xml:

<package name="login" namespace="/" extends="struts-default">
<action name="login" class="com.jing.action.LoginAction">
<result name="success">success.jsp</result>
<result name="fail">fail.jsp</result>
</action>
</package>

3、其他文件:web.xml struts.xml success.jsp fail.jsp

至此,后台完成!!

===================================================


前台:用easyUI编写的:1.html

<!DOCTYPE html>
<html>
<head>
<Meta http-equiv="content-type" content="text/html,charset=UTF-8" />
<script type="text/javascript" src="./js/jquery-1.8.0.min.js"
charset="UTF-8"></script>
<script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
<link rel="stylesheet" type="text/css"
href="./js/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="./js/themes/icon.css">
<script type="text/javascript" src="./js/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="./js/demo/demo.css">
<script type="text/javascript">
var loginAndRegister;

$(function() {
loginAndRegister = $('#loginAndRegister').dialog( {
closable : false,
modal : true,
buttons : [ {
text : '注册',
handler : function() {
//console.info("注册事件");
}
},{
text : '登录',
handler : function() {
//console.info("登录事件");
$.ajax( {
url : 'login.action',
data : {
name : $('#loginAndRegisterForm input[name=name]').val(),
password : $('#loginAndRegisterForm input[name=password]').val()
},
cache : false,
dataType : 'json',
success : function(r){
console.info(r.msg);
}
});
}
} ]
});
});
</script>
</head>
<body>
<div id="loginAndRegister" title="用户登录"
style="width: 400px; height: 200px">
<form id="loginAndRegisterForm">
<table align="center">
<tr>
<th align="right">
用户名
</th>
<td>
<input name="name">
</td>
</tr>
<tr>
<th align="right">
密码
</th>
<td>
<input name="password" type="password" />
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
===================================================

运行结果:

输入:http://localhost:8080/easyUI/1.html

原文链接:https://www.f2er.com/ajax/166580.html

猜你在找的Ajax相关文章