异步（ajax）
- 当浏览器向Web服务器发送一个请求时，服务器接收并处理传来的表单，然后返回一个新的网页，这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间，所以出现了异步(Ajax)技术。
- Ajax 全称 “Asynchronous JavaScript and XML”（异步JavaScript 和XML）,由Jesse James Garrett于2005年发明，通过该技术，可以在不重新加载整个网页的情况下向服务器发送请求并接收来自服务器的响应以实现页面局部刷新。
- 可以使用原生JavaScript实现异步（参见：JavaScript原生异步），但这种方式代码复杂，jQuery对Ajax 做了大量的封装，通过该JavaScript库可以很简单地实现异步
ajax：
jsp页面：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
//当点击按钮时发生异步
$("[type='button']").click(function(){
var obj = {
url:"./AreaServlet?name=Tom&password=123456",
//type:"",//默认get请求
//data:"",//只用于在post请求时传递数据
dataType:"",//设置服务器端返回什么类型的数据
success:function(data){//服务器端返回200响应码时
console.log(data);
},
error:function(data){//返回的响应码非200时
console.log(data);
}
};
$.ajax(obj);//异步
});
});
</script>
</head>
<body>
<input type="button" value="按钮"/>
</body>
</html>
Servlet：
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AreaServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setCharacterEncoding("UTF-8");//设置相应数据的编码格式
String name = request.getParameter("name");
String password = request.getParameter("password");//获取通过异步传来的数据
System.out.println(name+","+password);
response.setContentType("text/html; charset=UTF-8");//设置响应回的数据类型
response.setStatus(501);
PrintWriter out = response.getWriter();
out.write("你好！");//传入响应数据
out.flush();
out.close();
}
}
MVC模块化开发思路
显示（View）层：直接面向用户的最外层，用于接收用户的输入，并将用户需要的结果展现出来，对Web应用系统而言，HTML页面、JSP页面均属于显示层。
业务逻辑层（Model）：该层任务处理具体的业务逻辑。根据面向接口编程的思想，在业务逻辑层首先定义一些接口，针对这些接口编写具体的实现类，而表示层通过调用业务逻辑层的接口来实现各类操作。通常把业务逻辑层的类放在service包或biz包（business缩写）下。
数据访问层：实现对数据库表中数据的操作。一般把数据访问层的类放在dao（Data Access Object，数据访问对象）包中。
控制层（Controller）：提供应用的处理过程控制（一般是一个 Servlet）。
省市县选择框的三级级联
项目目录结构（maven项目，运用MVC设计模式）：
Area.java（把地区信息封装为一个类）：
package com.jd.vo;
public class Area {
private String id;
private String code;
private String name;
private String parentCode;
public Area(String id, String code, String name, String parentCode) {
super();
this.id = id;
this.code = code;
this.name = name;
this.parentCode = parentCode;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public String getParentCode() {
return parentCode;
}
public void setParentCode(String parentCode) {
this.parentCode = parentCode;
}
@Override
public String toString() {
return "Area [id=" + id + ", name=" + name + ", code=" + code + ", parentCode=" + parentCode + "]";
}
}
两个接口：
package com.jd.imp;
import java.util.List;
import com.jd.vo.Area;
public interface IAreaDao {
public List<Area> select(String parentCode);
}
package com.jd.imp;
import java.util.List;
import com.jd.vo.Area;
public interface IAreaService {
public List<Area> select(String parentCode);
}
AreaDao.java（对数据库进行操作）：
package com.jd.dao;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import com.jd.imp.IAreaDao;
import com.jd.tool.db.DBLink;
import com.jd.tool.db.IRowMapper;
import com.jd.vo.Area;
public class AreaDao implements IAreaDao{
public List<Area> select(String parentCode) {
final List<Area> LIST = new ArrayList<Area>();
String sql = "select * from area where parent_code='"+parentCode+"'";
new DBLink().select(sql, new IRowMapper() {
public void rowMapper(ResultSet rs) {
try {
while(rs.next()) {
String id = rs.getString("id");
String code = rs.getString("code");
String name = rs.getString("name");
String parentCode = rs.getString("parent_code");
LIST.add(new Area(id,code,name,parentCode));
}
} catch (SQLException e) {
e.printStackTrace();
}
}
});
return LIST;
}
}
AreaService.java（对需要传入数据库的信息进行处理）：
package com.jd.service;
import java.util.List;
import com.jd.dao.AreaDao;
import com.jd.imp.IAreaDao;
import com.jd.imp.IAreaService;
import com.jd.vo.Area;
public class AreaService implements IAreaService{
private IAreaDao areaDao = new AreaDao();
public List<Area> select(String parentCode) {
if(parentCode==null) {
parentCode="";
}
return areaDao.select(parentCode);
}
}
AreaServlet.java：
package com.jd.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
import com.jd.imp.IAreaService;
import com.jd.service.AreaService;
public class AreaServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
private IAreaService areaService = new AreaService();
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String parentCode = request.getParameter("parentCode");
response.setContentType("text/plain; charset=UTF-8");
//json 一种数据存储的结构，以字符串为数据类型，该字符串返回到浏览器端后变成javascript对象
String json = new Gson().toJson(areaService.select(parentCode));
PrintWriter out = response.getWriter();
out.write(json);
out.flush();
out.close();
}
}
jsp页面：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="./js/json2.js"></script>
<script type="text/javascript">
$(function(){
var obj = {
url:"./AreaServlet",
dataType:"text",
success:function(data){
data=JSON.parse(data);
var options = "<option value=''>--请选择--</option>";
for(var i=0;i<data.length;i++){
options=options+"<option value='"+data[i].code+"'>"+data[i].name+"</option>";
}
$("#province").empty();
$("#province").append(options);
}
};
$.ajax(obj);
$("#province").change(function(){
var parentCode = $("#province").val();
if(parentCode==""){
$("#city").empty();
$("#city").append("<option value=''>--请选择--</option>");
$("#country").empty();
$("#country").append("<option value=''>--请选择--</option>");
return;
}
var obj = {
url:"./AreaServlet?parentCode="+parentCode,
dataType:"text",
success:function(data){
data=JSON.parse(data);
var options = "<option value=''>--请选择--</option>";
for(var i=0;i<data.length;i++){
options=options+"<option value='"+data[i].code+"'>"+data[i].name+"</option>";
}
$("#city").empty();
$("#city").append(options);
$("#country").empty();
$("#country").append("<option value=''>--请选择--</option>");
}
};
$.ajax(obj);
});
$("#city").change(function(){
var parentCode = $("#city").val();
if(parentCode==""){
$("#country").empty();
$("#country").append("<option value=''>--请选择--</option>");
return;
}
var obj = {
url:"./AreaServlet?parentCode="+parentCode,
dataType:"text",
success:function(data){
data=JSON.parse(data);
var options = "<option value=''>--请选择--</option>";
for(var i=0;i<data.length;i++){
options=options+"<option value='"+data[i].code+"'>"+data[i].name+"</option>";
}
$("#country").empty();
$("#country").append(options);
}
};
$.ajax(obj);
});
});
</script>
</head>
<body>
<select id="province">
<option value="">--请选择--</option>
</select>
<select id="city">
<option value="">--请选择--</option>
</select>
<select id="country">
<option value="">--请选择--</option>
</select>
</body>
</html>
1380
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
