Ajax的两个实现案例
郁闷奶茶
帮助1人
使用Ajax，局部刷新 输入身高体重，计算用户的BMI
首先编写index.jsp页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>局部刷新bmi</title>
<script type="text/javascript">
//使用内存的异步对象，代替浏览器发起请求。异步对象使用js创建和管理的。
function doAjax() {
//1.创建异步对象
var xmlHttp = new XMLHttpRequest();
//2.绑定事件
xmlHttp.onreadystatechange = function () {
//处理服务器端返回的数据
//alert("readyState属性值=====" xmlHttp.readyState "丨status" xmlHttp.status)
if (xmlHttp.readyState = 4 && xmlHttp.status ==200){
//alert(xmlHttp.responseText);
var data =xmlHttp.responseText;
//更新dom对象，更新页面数据
document.getElementById("mydata").innerText=data;
}
}
//3初始请求数据
//获取dom对象的value值
var name =document.getElementById("name").value;
var w =document.getElementById("w").value;
var h = document.getElementById("h").value;
var param = "name=" name "&w=" w "&h=" h;
//alert("param=" param);
xmlHttp.open("get","bmiAjax?" param,true);
//4.发送请求
xmlHttp.send();
}
</script>
</head>
<body>
<p>局部刷新ajxa-计算bmi</p>
<div>
<!-- 没有使用form -->
姓名：<input type="text" id="name"><br>
体重(公斤): <input type="text" id="w"><br>
身高(米): <input type="text" id="h"><br>
<input type="button" value="计算bmi" onclick="doAjax()">
</div>
<br>
<br>
<div id="mydata">
等待加载数据....
</div>
</body>
</html>
然后写对应的Servlet页面，并且把他配到xml文件种
package com.bjpowernode.controller;
import java.io.IOException;
import java.io.PrintWriter;
@javax.servlet.annotation.WebServlet(name = "BmiServlet")
public class BmiAjaxServlet extends javax.servlet.http.HttpServlet {
protected void doPost(javax.servlet.http.HttpServletRequest request,
javax.servlet.http.HttpServletResponse response)
throws javax.servlet.ServletException, IOException {
}
protected void doGet(javax.servlet.http.HttpServletRequest request,
javax.servlet.http.HttpServletResponse response)
throws javax.servlet.ServletException, IOException {
System.out.println("====接受了ajax的请求====");
//接收参数
String strname = request.getParameter("name");
String weight =request.getParameter("w");
String height =request.getParameter("h");
//计算bmi
float h = Float.valueOf(height);
float w = Float.valueOf(weight);
float bmi = w / (h * h);
//判断bmi的范围
String msg = "";
if (bmi < 18.5){
msg = "您比较瘦";
}else if (bmi >18.5 && bmi<23.9){
msg = "您的bmi是正常的";
}else if (bmi >24 && bmi <=27){
msg = "您的身体比较胖";
}else {
msg = "您的身体特别肥胖";
}
System.out.println("msg=" msg);
msg = "您好：" strname "先生/女士，您的bmi值是：" bmi "," msg;
//响应ajax需要的数据，使用HttpServletResponse输出数据
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.println(msg);
out.flush();
out.close();
}
}
两个结合便可以完成Ajax局部刷新，计算BMI的功能
下面是效果截图
第二个案例：通过编号找到省对应的省，省会，简称
首先导入了两个sql文件
SET FOREIGN_KEY_CHECKS=0;
DROP TABLE IF EXISTS `city`;
CREATE TABLE `city` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) DEFAULT NULL,
`provinceid` int(11) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=17 DEFAULT CHARSET=utf8;
INSERT INTO `city` VALUES ('1', '石家庄市', '1');
INSERT INTO `city` VALUES ('2', '秦皇岛', '1');
INSERT INTO `city` VALUES ('3', '保定市', '1');
INSERT INTO `city` VALUES ('4', '张家口', '1');
INSERT INTO `city` VALUES ('5', '南昌市', '9');
INSERT INTO `city` VALUES ('6', '九江市', '9');
INSERT INTO `city` VALUES ('7', '宜春市', '9');
INSERT INTO `city` VALUES ('8', '福州市', '8');
INSERT INTO `city` VALUES ('9', '厦门市', '8');
INSERT INTO `city` VALUES ('10', '泉州市', '8');
INSERT INTO `city` VALUES ('11', '龙岩市', '8');
INSERT INTO `city` VALUES ('12', '太原', '2');
INSERT INTO `city` VALUES ('13', '大同', '2');
INSERT INTO `city` VALUES ('14', '呼和浩特', '3');
INSERT INTO `city` VALUES ('15', '包头', '3');
INSERT INTO `city` VALUES ('16', '呼伦贝尔', '3');
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', '江西', '赣', '南昌');
在数据库种加了两个表
然后编写jsp页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>使用json格式的数据</title>
<script TYPE="text/javascript">
function doSearch() {
//1.创建异步对象
var xmlHttp = new XMLHttpRequest();
//2.绑定事件
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status ==200){
var data = xmlHttp.responseText;
var jsonObj = eval("(" data ")");
//更新dom
document.getElementById("proname").value = jsonObj.name;
document.getElementById("projiancheng").value = jsonObj.jiancheng;
document.getElementById("proshenghui").value = jsonObj.shenghui;
}
}
//3.初始请求对象的请求参数
var proid = document.getElementById("proid").value;
xmlHttp.open("get","queryjson?proid=" proid,true);
//4.发送请求
xmlHttp.send();
}
</script>
</head>
<body>
<p>ajax请求使用json格式数据</p>
<table>
<tr>
<td>省份编号：</td>
<td><input type="text" id="proid">
<input type="button" value="搜索" onclick="doSearch()">
</td>
</tr>
<tr>
<td>省份名称：</td>
<td><input type="text" id="proname"></td>
</tr>
<tr>
<td>省份简称：</td>
<td><input type="text" id="projiancheng"></td>
</tr>
<tr>
<td>省会名称：</td>
<td><input type="text" id="proshenghui"></td>
</tr>
</table>
</body>
</html>
写一个Province类，有各种属性，然后封装，对外提供setter和getter
public class Province {
private Integer id;
private String name;
private String jiancheng;
private String shenghui;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getJiancheng() {
return jiancheng;
}
public void setJiancheng(String jiancheng) {
this.jiancheng = jiancheng;
}
public String getShenghui() {
return shenghui;
}
public void setShenghui(String shenghui) {
this.shenghui = shenghui;
}
}
然后写一个ProvinceDao类，里面写一个方法来链接数据库，并且根据我们输入的ID获得一个完整的province对象，这里只截了方法
//根据id获取一个完整的Province对象
public Province queryProvinceByID(Integer provinceId) {
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
String sql = "";
String url = "jdbc:mysql://localhost:3306/springdb";
String username = "root";
String password = "123456";
Province province = null;
//加载驱动
try {
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection(url, username, password);
//创建PrepareStatement
sql = "select id,name,jiancheng,shenghui from province where id=?";
ps = conn.prepareStatement(sql);
//设置参数值
ps.setInt(1, provinceId);
//执行sql
rs = ps.executeQuery();
//便利rs
/*while(rs.next()){//当你的rs有多余一条记录时
name = rs.getString("name");
}
*/
if (rs.next()) {
province = new Province();
province.setId(rs.getInt("id"));
province.setName(rs.getString("name"));
province.setJiancheng(rs.getString("jiancheng"));
province.setShenghui(rs.getString("shenghui"));
}
} catch (ClassNotFoundException | SQLException e) {
e.printStackTrace();
} finally {
if (rs != null) {
try {
rs.close();
} catch (SQLException throwables) {
throwables.printStackTrace();
}
}
if (ps != null) {
try {
ps.close();
} catch (SQLException throwables) {
throwables.printStackTrace();
}
}
if (conn != null) {
try {
conn.close();
} catch (SQLException throwables) {
throwables.printStackTrace();
}
}
}
return province;
}
然后编写servlet，把province对象用jackson转换为json格式数据，并且
响应输出给服务器
import com.bjpowernode.dao.ProvinceDao;
import com.bjpowernode.entity.Province;
import com.fasterxml.jackson.databind.ObjectMapper;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet(name = "QueryJsonServlet")
public class QueryJsonServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//默认值，{} :表示json格式的数据
String json = "{}";
//获取请求参数，省份id
String strProid = request.getParameter("proid");
//判断proid有值时，调用dao查询数据
if(strProid != null && strProid.trim().length()>0){
ProvinceDao dao = new ProvinceDao();
Province p =dao.queryProvinceByID(Integer.valueOf(strProid));
//需要使用jackson 把Province对象转化为 json
ObjectMapper om = new ObjectMapper();
json = om.writeValueAsString(p);
}
//把获取的数据，通过网络传给ajax中的异步对象，响应结果数据
//指定服务器端(servlet)返回给浏览器的是json格式的数据
response.setContentType("application/json;charset=utf-8");
PrintWriter out = response.getWriter();
out.println(json);
out.flush();
out.close();
}
}
效果截图
可以成功的根据编号访问到我们数据库的内容
这篇好文章是转载于：学新通技术网
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 学新通技术网
- 本文地址： /boutique/detail/tanhhiebkg
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
Android 11 保存文件到外部存储，并分享文件
Luke 10-12 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22
