您的位置:首页 > Web前端 > JavaScript

使用Struts2+JavaScript+Ajax实现成绩录入功能

2015-02-05 12:09 288 查看
基本需求:使用Struts2框架成绩录入功能。画面概要:(图1)

数据库表格 (tbl_scoreinfo):

姓名

Username

Varchar2(20)

 

课程名

Classname

Varchar2(20)

 

分数

Score

Number(4,1)

0-150

详细说明:

1,  当画面【初期化】显示时:

A)   画面姓名,课程,分数三个文本输入框,内容为空。

2,  当点击【保存】按钮时:

A)   输入检查

姓名,课程,分数都为为必须输入项目,如未输入,请报错!

分数,请做数据检查 0,150之间,可以包含130.5这样的数据,但无130.1这样的数据!

B)   输入完成后,请将输入数据插入到数据库表中。

C)   当数据已经存在时,请报错!

完成要求:

1,  实现追加功能,数据库插入

2,  实现数据检查(javascript)

3,  实现消息提示

(当追加成功,画面显示“保存成功”,并清空表单数据,等待二次数据填写)

  当有相同数据存在时,画面显示“数据已存在”,并要求用户修改数据。

web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"> <display-name></display-name>

<filter>
<filter-name>struts2</filter-name>
<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
</filter>

<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>

<welcome-file-list>
<welcome-file>add.jsp</welcome-file>
</welcome-file-list>
</web-app>


struts.xml:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>

<constant name="struts.i18n.encoding" value="UTF-8" />
<constant name="struts.devMode" value="true" />

<package name="scoreinfo" namespace="/" extends="struts-default">
<action name="ScoreinfoAction_*" class="zbiti.action.ScoreinfoAction" method="{1}">
<result name="success">success.jsp</result>
<result name="error">error.jsp</result>
</action>
</package>

</struts>


add.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%
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="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<script type="text/javascript" src="./js/add.js"></script>
</head>

<body>
<form id="addinfo" name="addinfo" action="ScoreinfoAction_add" method="post">
姓名:<input type="text" id="username" name="scoreinfo.username" /><br /><br />
课程:<input type="text" id="classname" name="scoreinfo.classname" /><br /><br />
分数:<input type="text" id="score" name="scoreinfo.score" />    
<input type="button" value="保存" onclick="onSubmit()"/>
<input type="reset" name="reset" style="display: none;"/>
</form>
</body>
</html>


add.js:

function basicAjax(path, method, funcs) {
var request;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else {
request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
var back = request.responseText;
funcs(back);
}
};
request.open(method, path, true);
if ("POST" == method) {
request.send(path);
} else {
request.send();
}
}

function onSubmit(){
var username = document.addinfo.username.value;
if (username.length == 0) {
alert("姓名不能为空!");
document.addinfo.username.focus();
return false;
}
var classname = document.addinfo.classname.value;
if (classname.length == 0) {
alert("课程不能为空!");
document.addinfo.classname.focus();
return false;
}
var score = document.addinfo.score.value;
if (score.length == 0) {
alert("分数不能为空!");
document.addinfo.score.focus();
return false;
}

/*//0-100之间数字的正则表达式,可以是整数,也可以含1位或者2位小数,含0和100
var reg1 = /^(\d{1,2}(\.\d{1,2})?|100|100\.0|100\.00)$/;
var reg2 = /^(\d{1,2}(\.\d{1,2})?|100(\.0{1,2})?)$/;

//0-150之间的整数
var reg = /^((\d{1,2})|(1[0-4]\d)|(150))$/;*/

//数据检查 0,150之间,可以包含130.5这样的数据,但无130.1这样的数据
var reg = /^(((\d{1,2})|(1[0-4]\d))(\.(0|5))?|(150|150\.0))$/;

if(score.length > 0 && !reg.test(score)){
alert("请重新输入0-150的分数!");
document.addinfo.score.focus();
return false;
}
var param = "scoreinfo.username=" + username + "&scoreinfo.classname="
+ classname + "&scoreinfo.score=" + score;
var path = "./ScoreinfoAction_check?" + param;

basicAjax(path, "POST", function(result){
if("exist" == result){
alert("数据已存在,请重新输入!");
document.addinfo.username.focus();
}else{
//document.addinfo.submit();
var path = "./ScoreinfoAction_insert?" + param;
basicAjax(path, "POST", function(result){
if(1 == result){
alert("保存成功!");
//document.addinfo.reset();
clearForm("addinfo");
document.addinfo.username.focus();
}else{
alert("保存失败!");
}
});
}
});
}

function clearForm(id){
var formId = document.getElementById(id);
if (formId == undefined) {
return;
}
for(var i=0; i<formId.elements.length; i++){
if(formId.elements[i].type=="text"){
formId.elements[i].value="";
}
}
}


Scoreinfo.java:

package zbiti.model;

public class Scoreinfo {

private String username;
private String classname;
private double score;
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getClassname() {
return classname;
}
public void setClassname(String classname) {
this.classname = classname;
}
public double getScore() {
return score;
}
public void setScore(double score) {
this.score = score;
}
}


DB.java:

package zbiti.util;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.Resul
4000
tSet;
import java.sql.SQLException;

public class DB {

public static Connection getConnection(){
Connection conn = null;
try {
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/project","root","root");
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
return conn;
}

public static PreparedStatement prepare(Connection conn, String sql){
PreparedStatement ps = null;
try {
ps = conn.prepareStatement(sql);
} catch (SQLException e) {
e.printStackTrace();
}
return ps;
}

public static void close(Connection conn){
try {
if(conn != null){
conn.close();
conn = null;
}
} catch (SQLException e) {
e.printStackTrace();
}
}

public static void close(PreparedStatement ps){
try {
if(ps != null){
ps.close();
ps = null;
}
} catch (SQLException e) {
e.printStackTrace();
}
}

public static void close(ResultSet rs){
try {
if(rs != null){
rs.close();
rs = null;
}
} catch (SQLException e) {
e.printStackTrace();
}
}
}


ScoreinfoAction.java:

package zbiti.action;

import java.io.IOException;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import zbiti.model.Scoreinfo;
import zbiti.service.ScoreinfoService;

import com.opensymphony.xwork2.ActionSupport;

public class ScoreinfoAction extends ActionSupport {

private static final long serialVersionUID = 1L;

private ScoreinfoService service = new ScoreinfoService();
private Scoreinfo scoreinfo;

public Scoreinfo getScoreinfo() {
return scoreinfo;
}

public void setScoreinfo(Scoreinfo scoreinfo) {
this.scoreinfo = scoreinfo;
}

public String add() {
int count = service.add(scoreinfo);
if (count > 0) {
return SUCCESS;
} else {
return ERROR;
}
}

public String check() {
int exist = service.check(scoreinfo);
HttpServletResponse response = ServletActionContext.getResponse();
try {
if(exist == 1){
response.getWriter().print("exist");
}else{
response.getWriter().print(" ");
}
} catch (IOException e) {
e.printStackTrace();
}
return null;
}

public String insert() {
int count = service.add(scoreinfo);
HttpServletResponse response = ServletActionContext.getResponse();
try {
if(count > 0){
response.getWriter().print(1);
}else{
response.getWriter().print(0);
}
} catch (IOException e) {
e.printStackTrace();
}
return null;
}

}


ScoreinfoService.java:

package zbiti.service;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

import zbiti.model.Scoreinfo;
import zbiti.util.DB;

public class ScoreinfoService {

public int add(Scoreinfo sc){
Connection conn = DB.getConnection();
String sql = "insert into tbl_scoreinfo (username,classname,score) value(?,?,?)";
PreparedStatement ps = DB.prepare(conn, sql);
int rowNum = 0;
try {
ps.setString(1, sc.getUsername());
ps.setString(2, sc.getClassname());
ps.setDouble(3, sc.getScore());
rowNum = ps.executeUpdate();
} catch (SQLException e) {
e.printStackTrace();
}finally{
DB.close(ps);
DB.close(conn);
}
return rowNum;
}

public int check(Scoreinfo scoreinfo){
Connection conn = DB.getConnection();
String sql = "select count(1) from tbl_scoreinfo where username=? and classname=? and score=?";
PreparedStatement ps = DB.prepare(conn, sql);
ResultSet rs = null;
int rowNum = 0;
try {
ps.setString(1, scoreinfo.getUsername());
ps.setString(2, scoreinfo.getClassname());
ps.setDouble(3, scoreinfo.getScore());
rs = ps.executeQuery();
while(rs.next()){
rowNum = rs.getInt(1);
}
} catch (SQLException e) {
e.printStackTrace();
}finally{
DB.close(ps);
DB.close(conn);
}
return rowNum;
}
}


所需jar包:图2
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  struts2 javascript ajax