项目的目录结构如下:
1. 首先创建JSP文件
<body>
<p>ajax根据省份id获取名称</p>
<table>
<tr>
<td>省份编号:</td>
<td><input type="text" id="proid"/>
<input type="button" value="搜索" onclick="search()" />
</td>
</tr>
<tr>
<td>省份名称:</td>
<td><input type="text" id="proname" /></td>
</tr>
</table>
</body>
2.在JSP文件中创建Ajax
使用Ajax四步骤:
1.创建异步对象
2. 绑定事件
3. 初始化异步对象
4. 发送请求
<script type="text/javascript">
//创建ajax异步对象
function search(){
var xmlHttp =new XMLHttpRequest();
//绑定事件
xmlHttp.onreadystatechange = function () {
if( xmlHttp.readyState == 4 && xmlHttp.status== 200){
alert("返回值是:"+xmlHttp.responseText);
//更新页面,就是更新dom对象
document.getElementById("proname").value= xmlHttp.responseText;
}
}
//初始化异步对象
var proid = document.getElementById("proid").value;
xmlHttp.open("get","queryProvice?proid="+proid,true);
//发送请求
xmlHttp.send();
}
</script>
3.创建DAO层连接数据库
public class ProvinceDao {
public String queryProviceNameById(Integer proviceId){
Connection conn = null;
PreparedStatement pst = null;
ResultSet rs = null;
String sql = "";
String url="jdbc:mysql://localhost:3306/info?useUnicode=true&characterEncoding=utf8";
String username="root";
String password="123456";
String name ="";
try {
Class.forName("com.mysql.jdbc.Driver");
conn=DriverManager.getConnection(url, username, password);
sql = "select name from province where id=?";
pst= conn.prepareStatement(sql);
pst.setInt(1, proviceId);
rs = pst.executeQuery();
if(rs.next()) {
name = rs.getString("name");
}
} catch (Exception e) {
e.printStackTrace();
}
try {
if(conn !=null) {
conn.close();
}
if(pst != null) {
pst.close();
}
if(rs!=null) {
rs.close();
}
} catch (Exception e) {
// TODO: handle exception
}
return name;
}
}
4.创建servlet层处理请求
@WebServlet(name="QueryProviceServlet",urlPatterns = "/queryProvice")
public class QueryProviceServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public QueryProviceServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String strProid = request.getParameter("proid");
String name = "默认是无数据";
System.out.println(strProid);
if(strProid !=null && !"".equals(strProid.trim())){
ProvinceDao dao = new ProvinceDao();
name =dao.queryProviceNameById(Integer.valueOf(strProid));
}
response.setContentType("text/html;charset=utf-8");
PrintWriter pw = response.getWriter();
pw.println(name);
pw.flush();
pw.close();
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
5.创建数据库文件
SET FOREIGN_KEY_CHECKS=0;
DROP TABLE IF EXISTS `province`;
CREATE TABLE `province` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) DEFAULT NULL COMMENT '省份名称',
`jiancheng` varchar(255) DEFAULT NULL COMMENT '简称',
`shenghui` varchar(255) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=utf8;
INSERT INTO `province` VALUES ('1', '河北', '冀', '石家庄');
INSERT INTO `province` VALUES ('2', '山西', '晋', '太原市');
INSERT INTO `province` VALUES ('3', '内蒙古', '蒙', '呼和浩特市 ');
INSERT INTO `province` VALUES ('4', '辽宁', '辽', '沈阳');
INSERT INTO `province` VALUES ('5', '江苏', '苏', '南京');
INSERT INTO `province` VALUES ('6', '浙江', '浙', '杭州');
INSERT INTO `province` VALUES ('7', '安徽', '皖', '合肥');
INSERT INTO `province` VALUES ('8', '福建', '闽', '福州');
INSERT INTO `province` VALUES ('9', '江西', '赣', '南昌');
总结:使用Ajax技术实现jsp页面局部刷新
1.给按钮添加响应事件,在search事件里面创建Ajax异步对象,绑定事件,初始化异步对象,发送请求。
2.在DAO层创建带有Id参数值的方法,通过获得jsp页面输入的参数,进行对数据库的指定查询。
3.将jsp输入的值提交到servlet层,在servlet层调用DAO层的方法进行查询数据,得到数据后通过PrintWriter进行返回数据到jsp文件。
ps:本人小白,以上是本人学习Ajax局部刷新技术的心得,有不足之处还请大家海涵。