注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

dige1993

网页设计 | js、h5开发 | java web开发 | 数据库

 
 
 

日志

 
 
关于我

网页设计,js、h5开发,java web开发,数据库

网易考拉推荐

Java Web开发笔记(4)之 struts2+jquery+ajax的一个简单示例  

2014-08-31 11:11:08|  分类: Java Web |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
这次演示要用到MySql数据库,所以先创建好数据库,脚本db.sql如下:

drop database if exists db_web1;
create database db_web1 character set utf8;
use db_web1;
drop table if exists tb_student;
create table tb_student (
id integer auto_increment primary key comment 'id',
_name varchar(10) comment '姓名',
age integer comment '年龄',
sex bool comment '性别',
birthday date comment '出生日期'
);
insert into tb_student values(null,'奕一',12,1,'1992-10-10');
insert into tb_student values(null,'莫儿',13,0,'1991-01-23');
insert into tb_student values(null,'卢三',11,1,'1993-01-15');
insert into tb_student values(null,'郭强',15,1,'1989-08-10');
insert into tb_student values(null,'吴思',14,0,'1990-10-11');
insert into tb_student values(null,'邢武',16,1,'1988-07-20');
insert into tb_student values(null,'陆思玢',17,1,'1987-07-07');
insert into tb_student values(null,'陈玖',15,0,'1989-11-25');
insert into tb_student values(null,'果衣衣',15,1,'1989-12-02');
insert into tb_student values(null,'盛小涵',14,0,'1990-09-11');

然后新建WebProject,搭建好struts2开发环境。

第一步 编写数据库操作类DBHelper.java
DBHelper.java用于封装涉及到数据库的操作,代码如下:

package com.lidi.other;

import java.sql.*;

public class DBHelper {

private static String URI = "jdbc:mysql://localhost:3306/db_web1";
private static String ACCOUNT = "root";
private static String PASSWORD = "123456";

public static Connection getConnection() {
Connection conn = null;
try {
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection(URI, ACCOUNT, PASSWORD);
} catch (Exception e) {
e.printStackTrace();
}
return conn;
}
}


第二步 导入Jquery库
下载jquery库,在WebRoot下新建js文件夹,并将jquery库放入js文件夹中,目录结构如下:
Java Web开发笔记(4)之 struts2+jquery+ajax的一个简单示例 - Liar - 荒年
 
顺便说一句,对于jquery库在myeclipse中报错的情况,该库是没错的,可以不用管,如果看着文件前面的红叉不顺眼的话,在jquery-2.1.1.min.js文件上右键单击,选择MyEclipse→Excluded From Validation,就行了。

第二步 修改Index.jsp
修改Index.jsp,里面有两个文本框,第一个文本框用于输入姓名,用户在第一个文本框输入完成,焦点切到第二个文本框的时候,页面将第一个文本框的内容传递到后台查看数据库中是否已经存在,如果存在,提示名称已存在,如果不存在,提示名称可用。代码如下:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax</title>

<!-- 引用jquery库 -->
<script src="http://dige1993.blog.163.com/blog/js/jquery-2.1.1.min.js"></script>

<script>
$(document).ready(function(e) {
$("#name").focusout(function(e) {

$.ajax({
url : "namecheck",
type : "POST",
dataType : "html",
data : {
name : $("#name").val(),
},
success : function(data) {
$("#msg").html(data);
}
});

//$.ajax模块也可以换成下面的$.post模块,效果一样

/* $.post("namecheck", {
name : $("name").val()
}, function(data, status) {
$("#msg").html(data);
}); */
});
});
</script>
</head>

<body>
<input id="name" type="text" name="name" />&nbsp;
<span id="msg"></span>
<br />
<br />
<input type="text" />
</body>
</html>

第三步 编写StudentAction
编写StudentAction.java,在里面编写验证姓名是否已经存在的方法name_exist,代码如下:

package com.lidi.action;

import java.io.IOException;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import org.apache.struts2.ServletActionContext;
import com.lidi.other.DBHelper;
import com.opensymphony.xwork2.ActionSupport;

public class StudentAction extends ActionSupport {

private static final long serialVersionUID = 1L;
private String name;

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

public String name_exist() throws IOException {
String result = "该名称可用";
Connection conn = DBHelper.getConnection();
String sql = "select * from tb_student where _name='" + name + "'";
System.out.println(sql);// 在控制台输出sql语句
try {
Statement stmt = conn.createStatement();
ResultSet rs = stmt.executeQuery(sql);
if (rs.next()) {
result = "该名称已存在";
}
rs.close();
stmt.close();
conn.close();
} catch (SQLException e) {
System.out.println("数据库错误!");
}

System.out.println(result); // 在控制台输出检查结果
ServletActionContext.getResponse().setContentType(
"text/html;charset=utf-8");// 解决中文乱码
ServletActionContext.getResponse().getWriter().print(result);
return null;
}

}



第四步 配置struts.xml
struts.xml完整代码如下:

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

<struts>
<package name="main" extends="struts-default">
<action name="namecheck" class="com.lidi.action.StudentAction"
method="name_exist">
</action>
</package>

</struts>


第五步 运行
重启下服务器,在浏览器查看效果。在第一个文本框中输入姓名,然后把焦点切到第二个文本框。
Java Web开发笔记(4)之 struts2+jquery+ajax的一个简单示例 - Liar - 荒年

最后奉上Ajax_Demo的下载链接:
Ajax_Demo.rar

完毕。
  评论这张
 
阅读(90)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018