Ajax案例
展示页面jsp：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
</head>
<body> <script type="text/javascript"> function getData() { //创建ajax引擎对象
var ajax;
var name=document.getElementById("tid").value;
//console.log(name);
if(window.XMLHttpRequest){//火狐
ajax= new XMLHttpRequest();
}else if(window.ActiveXObject){//ie
ajax=new ActiveXObject("Msxml2.XMLHTTP");
} //复写onreadyststement
ajax.onreadystatechange = function () {
//判断ajax状态码
if(ajax.readyState==4){
//alert(5);
//判断响应状态码（200、405、404、500）
if(ajax.status==200){
//获取响应内容（相应内容的格式）
var res=ajax.responseText;
//console.log(res[0]+" "+res[1]);
eval("var obj="+res);
//alert(obj.heroName);
//console.log(obj.name);
//alert(res);
//alert(obj.name);
//alert(obj);
if(obj!=null){
document.getElementById("d1").innerHTML="";
var ta=document.getElementById("tt");
ta.innerHTML="";
var tr=ta.insertRow(0);
tr.insertCell(0).innerHTML="编号";
tr.insertCell(1).innerHTML="生命值";
tr.insertCell(2).innerHTML="属性";
tr.insertCell(3).innerHTML="描述"; var ts=ta.insertRow(1);
ts.insertCell(0).innerHTML=obj.heroName;
ts.insertCell(1).innerHTML=obj.lifeNum;
ts.insertCell(2).innerHTML=obj.type;
ts.insertCell(3).innerHTML=obj.desc;
}else{
//eval("var obj="+"查无此人");
document.getElementById("d1").innerHTML="查无此人"; //document.write("error");会重新刷整个页面
} }else if(ajax.status==404){ }else if(ajax.status==500){ } } }
ajax.open("get","user?name="+name);
ajax.send(null);
} </script>
英雄名称：<input type="text" name="uname" value="" id="tid">
<input type="button" value="搜索" onclick="getData()">
<div id="d1"></div>
<table border="1px" id="tt"> </table>
</body>
</html>
处理Servlet：
package com.zyb.Servlet; import java.io.IOException; 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 com.google.gson.Gson;
import com.zyb.Service.UserService;
import com.zyb.ServiceImp.UserServiceImp;
import com.zyb.pojo.User;
@WebServlet("/user")
public class UserServlet extends HttpServlet{
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
//设置请求编码格式
req.setCharacterEncoding("utf-8");
//设置响应编码格式
resp.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charst=utf-8");
//获取请求信息
String name=req.getParameter("name");
System.out.println("英雄名为:"+name);
//name=name.replaceAll(" ","");
//System.out.println(name.contains(" "));
//处理请求
//获取业务层对象
UserService us = new UserServiceImp();
User u = us.getUserInfoService(name);
System.out.println("查询结果为："+u);
//resp.getWriter().write("var obj={}; obj.name="+u.getHeroName()+";obj.lifenum="+u.getLifeNum()+
// ";obj.type="+u.getType()+";obj.desc="+u.getDesc()+";"); /*resp.getWriter().write("{name:"+u.getHeroName()+
",lifenum:"+u.getLifeNum()+
",type:"+u.getType()+
",desc:"+u.getDesc()
+"}");*/ resp.getWriter().write(new Gson().toJson(u));
//System.out.println("var obj={}; obj.name="+u.getHeroName()+";obj.lifenum="+u.getLifeNum()+
// ";obj.type="+u.getType()+";obj.desc="+u.getDesc()+";");
//响应请求
}
}
业务层（Service）：
package com.zyb.Service;
import com.zyb.pojo.User;
public interface UserService {
User getUserInfoService(String name);
}
package com.zyb.ServiceImp; import com.zyb.Dao.UserDao;
import com.zyb.DaoImp.UserDaoImpl;
import com.zyb.Service.UserService;
import com.zyb.pojo.User; public class UserServiceImp implements UserService{
//获取Dao层对象
UserDao ud = new UserDaoImpl();
@Override
public User getUserInfoService(String name) {
// TODO Auto-generated method stub
return ud.getUserInfo(name);
} }
实体类：
package com.zyb.pojo;
public class User {
private String heroName;
private int lifeNum;
private String type;
private String desc;
public String getHeroName() {
return heroName;
}
public void setHeroName(String heroName) {
this.heroName = heroName;
}
public int getLifeNum() {
return lifeNum;
}
public void setLifeNum(int lifeNum) {
this.lifeNum = lifeNum;
}
public String getType() {
return type;
}
public void setType(String type) {
this.type = type;
}
public String getDesc() {
return desc;
}
public void setDesc(String desc) {
this.desc = desc;
}
@Override
public int hashCode() {
final int prime = 31;
int result = 1;
result = prime * result + ((desc == null) ? 0 : desc.hashCode());
result = prime * result + ((heroName == null) ? 0 : heroName.hashCode());
result = prime * result + lifeNum;
result = prime * result + ((type == null) ? 0 : type.hashCode());
return result;
}
@Override
public boolean equals(Object obj) {
if (this == obj)
return true;
if (obj == null)
return false;
if (getClass() != obj.getClass())
return false;
User other = (User) obj;
if (desc == null) {
if (other.desc != null)
return false;
} else if (!desc.equals(other.desc))
return false;
if (heroName == null) {
if (other.heroName != null)
return false;
} else if (!heroName.equals(other.heroName))
return false;
if (lifeNum != other.lifeNum)
return false;
if (type == null) {
if (other.type != null)
return false;
} else if (!type.equals(other.type))
return false;
return true;
}
public User(String heroName, int lifeNum, String type, String desc) {
//super();
this.heroName = heroName;
this.lifeNum = lifeNum;
this.type = type;
this.desc = desc;
}
public User(){
}
@Override
public String toString() {
return "User [heroName=" + heroName + ", lifeNum=" + lifeNum + ", type=" + type + ", desc=" + desc + "]";
}
}
Dao层：
package com.zyb.Dao;
import com.zyb.pojo.User;
public interface UserDao {
User getUserInfo(String name);
}
package com.zyb.DaoImp;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import com.zyb.Dao.UserDao;
import com.zyb.pojo.User; public class UserDaoImpl implements UserDao{ @Override
public User getUserInfo(String name) {
// TODO Auto-generated method stub
User u=null;
Connection con=null;
PreparedStatement pstmt=null;
ResultSet rs=null; try {
Class.forName("com.mysql.jdbc.Driver");//注册对应的驱动
//url,"root","root"
String url= "jdbc:mysql://localhost:3306/dy?useUnicode=true&characterEncoding=utf-8&useSSL=false";
con = DriverManager.getConnection(url,"root","root");
String RequestSql="select *from s_user where uname=?";
pstmt = con.prepareStatement(RequestSql);
//name=name.replaceAll(" ", "");
pstmt.setString(1,name); rs=pstmt.executeQuery();
if(rs.next()){
u = new User();
u.setHeroName(rs.getString("uname"));
u.setLifeNum(rs.getInt("lifenum"));
u.setType(rs.getString("type"));
u.setDesc(rs.getString("desc")); } } catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}finally{
try {
if(rs!=null)
rs.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} try {
if(pstmt!=null)
pstmt.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} try {
if(con!=null)
con.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} } return u; } }
工程结构：
效果展示：
数据库设计：
Ajax案例的更多相关文章
- js调用ajax案例
js调用ajax案例 测试地址:http://www.w3school.com.cn/tiy/t.asp?f=ajax_get 嵌入下面代码,点击提交,再点击请求数据.就可以看到结果了. <ht ...
- Django-website 程序案例系列-6 ajax案例
普通ajax案例: views.py def testajax(request): h = request.POST.get('hostname') #拿到ajax传来的值 i = request.P ...
- ajax案例_校验用户名
目录 ajax案例_校验用户名 代码下载 需求 流程 搭建环境 开发代码 1_jsp 1_servlet 1_service.dao 2_servlet 2_jsp 测试后,功能实现,完结撒花 aja ...
- Ajax案例(使用ajax进行加法运算)
此案例功能实现了一边看视频一边进行加法运算,而加法运算时页面不会刷新请求 ajax代码: <script type="text/javascript" src="j ...
- Ajax 案例之三级联动
每次在博客园网站写博客,格式真的好难搞,还望好心人告知更好的编辑工具.接下来进入正题:三级联动(其效果演示可看我的博文Ajax 学习总结 末尾). 数据表设计(Oracle) 新建数据表 Employ ...
- jquery Ajax 案例
html <div class="data"><ul></ul></div> <div id="load" ...
- AJAX案例四：省市联动
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- AJAX案例二：简单表单验证
案例:如果用户名输入为张三,那么在失去焦点时后面会显示该用户名已被注册,否则显示可以注册! <%@ page language="java" import="jav ...
- ajax案例源码
html文件中demo2_index.html ---------------------------------------------------------------------------- ...
- Ajax案例：三级联动查询员工的信息(三张表进行内连接)
需求分析: 通过数据库连接池,可以查询到数据库中员工的各种信息,通过点击下拉框的方式实现三级联动,即:没有点击city下拉框,后面两个下拉框中没有值,这样,点击city下拉框,department下拉 ...
随机推荐
- RLE压缩算法详解
from:http://data.biancheng.net/view/152.html RLE压缩算法(下简称RLE算法)的基本思路是把数据按照线性序列分成两种情况:一种是连续的重复数据块,另一种是 ...
- PHP中使用CURL实现Get和Post请求方法
1.cURL介绍 cURL 是一个利用URL语法规定来传输文件和数据的工具,支持很多协议,如HTTP.FTP.TELNET等.最爽的是,PHP也支持 cURL 库.本文将介绍 cURL的一些高级特性, ...
- 记一道简单的re--BUUctf reverse1
1.首先拖进ida里,看到了左面一百多function...还是shift+f12 查看敏感字符串吧 2.发现了这两个比较可疑的字符串,然后双击this is the right flag 进入到了他 ...
- NMAP输出结果中CPE的含义【转】
CPE全称是Common Platform Enumeration,意思是通用平台枚举项:它是NMAP对识别出来的软件.操作系统和硬件的一种命名方式:格式如下: cpe:/<part>:& ...
- cube-ui IndexList 切换Tab Y坐标归零
<template> <div class="fx t12 column"> <div class="order_search_div fl ...
- 解决tensorflow Saver.restore()无效的问题
解决tensorflow 的 Saver.restore()无法从本地读取变量的问题 最近做tensorflow 手写数字识别的时候遇到了一个问题,Saver的restore()方法无法从本地恢复变量 ...
- springboot 服务卡死 连接池查询无响应问题解决
排查背景:基于nacos + springboot + druid +mybatis + mysql的环境,服务突然就出现不可访问,所有连接都超时,重启就可以使用一会,过一会就又不可用了 排查出来的原 ...
- 吴裕雄 python 人工智能——智能医疗系统后台用户注册、登录和初诊简约版代码展示
#用户注册.登录模块 #数据库脚本 CREATE TABLE usertable( userid number(8) primary key not null , username varchar(5 ...
- 浅析PHP页面局部刷新功能的实现小结(转)
转载地址 https://www.jb51.net/article/38901.htm 方法其实挺多的.以前比较常用的是iframe这样来做.现在多了个ajax,所以一般情况下都是用的ajax.第一种 ...
- 【Struts 动态表单】DynaActionForm
RegisterAction package k.action; import org.apache.struts.action.ActionForm; import org.apache.strut ...