Ajax笔记
第一个项目 全局刷新并跳转页面
jsp页面
<form action="bmiServlet" method="get"> 姓名：<input type="text" name="name"><br/> 体重:<input type="text" name="tz"> <br/> 身高：<input type="text" name="sg"> <br> <input type="submit" value="提高"> </form>
bmiServlet页面
public class BmiServlet extends javax.servlet.http.HttpServlet
String name=req.getParameter("name"); String tz=req.getParameter("tz"); String sg=req.getParameter("sg"); //计算bim float t=Float.valueOf(tz); float s=Float.valueOf(sg); float bmi=t/(s*s); String result=""; if(bmi<18.5){ result="太轻了"; }else if(bmi>18.5&&bmi<=23.9){ result="正常"; }else { result="太胖了"; } result="hello"+bmi+result; System.out.println("进来了"); //把数据存入到reque req.setAttribute("result",result); //转发到新的页面 req.getRequestDispatcher("/result.jsp").forward(req,resp); // 使用HttpServletResponse输出数据 response.setContentType("text/html;charset=utf-8"); // 获取PrintWriter PrintWriter pw = response.getWriter(); // 输出数据 pw.println(msg); // 清空缓存 pw.flush(); // 关闭close pw.close(); }
xml配置文件
<servlet>
<servlet-name>BmiServlet</servlet-name>
<servlet-class>controller.BmiServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>BmiServlet</servlet-name>
<url-pattern>/bmiServlet</url-pattern>
第二个项目 Ajax局部刷新——根据输入的编号，请求到servlet中，数据库拿到数据，然后更新页面dom，
jsp页面，还有ajax四个步骤
<title>ajax根据省份id获取城市</title>
<script type="text/javascript">
function search(){
//1.创建异步对象
var xmlHttp=new XMLHttpRequest();
//2绑定事件
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4&&xmlHttp.status==200){
alert(xmlHttp.responseText);
var date= xmlHttp.responseText
//json转对象
var jsonobj=eval("("+date+")");
//修改dom对象
document.getElementById("proname").value=jsonobj.name;
document.getElementById("proshenghui").value=jsonobj.shenghui;
}
}
//3初始请求数据
//获取对象值
var proid=document.getElementById("proid").value;
xmlHttp.open("get","queryCity?proid="+proid,true);
//4发送请求
xmlHttp.send();
}
</script>
</head>
<body>
<h3>梦想</h3>
<table>
<tr>
<td>省份编号</td>
<td><input type="text" id="proid"></td>
<td><input type="button" value="搜索" onclick="search()"></td>
</tr>
<tr>
<td>省份名称</td>
<td><input type="text" id="proname"></td>
</tr>
<tr>
<td>省会</td>
<td><input type="text" id="proshenghui"></td>
</tr>
</table>
servlet页面
String proid=req.getParameter("proid");
System.out.println(proid);
province province=new province();
String json="jackson拿到了";
if (proid!=null){
System.out.println("1111111111111111");
provinceDao dao=new provinceDao();
try {
province= dao.queryNameById(Integer.valueOf(proid));
ObjectMapper om=new ObjectMapper();
json= om.writeValueAsString(province);
System.out.println(json);
} catch (SQLException e) {
e.printStackTrace();
}
}
//定义传输的文件格式
// resp.setContentType("text/html;charset=utf-8");
resp.setContentType("application/json;charset=utf-8");
PrintWriter pw=resp.getWriter();
pw.println(json);
pw.flush();
pw.close();
}
dao层拿数据文件
public Connection getConnection() throws SQLException, SQLException { ResultSet rs=null; PreparedStatement stmt=null; java.sql.Driver driver=new com.mysql.jdbc.Driver(); DriverManager.registerDriver(driver); //2.获取数据库连接 String url="jdbc:mysql://localhost:3306/JDBC?characterEncoding=utf8"; String user="root"; String password="123456"; Connection conn= (Connection) DriverManager.getConnection(url,user,password); return conn; } public province queryNameById(Integer id) throws SQLException { ResultSet rs = null; PreparedStatement stmt = null; String name = null; Connection conn = this.getConnection(); String sql = "select name,shenghui FROM province where id=?"; stmt = conn.prepareStatement(sql); stmt.setInt(1, id); //执行sql rs = (ResultSet) stmt.executeQuery(); province province = new province(); while (rs.next()) { province.setName(rs.getString(1)); province.setShenghui(rs.getString(2)); // name = rs.getString(1); } if (rs != null) { rs.close(); } if (stmt != null) { stmt.close(); } return province; }
因为需要多条数据，用到json，需要新建对象，将对象转成json
浙公网安备 33010602011771号