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下拉 ...
随机推荐
- 普及C组第二题(8.4)
2266. 古代人的难题 (File IO): input:puzzle.in output:puzzle.out 时间限制: 1000 ms 空间限制: 60000 KB 题目: 门打开了, 里面 ...
- 密码学笔记——eval(function(p,a,c,k,e,d) 加密破解
密码学笔记——eval(function(p,a,c,k,e,d) 的加密破解 例题: 小明某天在看js的时候,突然看到了这么一段代码,发现怎么也理不出代码逻辑,你能帮帮他吗? 格式:SimCTF{} ...
- Mysql实现级联操作（级联更新、级联删除）（转）
一.首先创建两张表stu,sc create table stu( sid int UNSIGNED primary key auto_increment, name varchar(20) not ...
- Git - Windows 下, gitbash 打开资源管理器
1. 概述 windows 下 gitbash 打开 资源管理器 2. 场景 资源管理唤起 gitbash 步骤 进入目录 鼠标右击 在 弹出菜单 中, 找到 Git Bash Here 结果 打开一 ...
- 2019冬季PAT甲级第一题
#define HAVE_STRUCT_TIMESPEC #include<bits/stdc++.h> using namespace std; ][]; ][]; ]; string ...
- ftrace使用
前段时间遇到个问题,有个后继音频数据处理线程调度不及时导致音频输出延迟,音视频不同步. 因此从系统上入手,采用ftrace进行debug,来看有哪些线程会去抢占音频数据处理线程. ftrace 提供了 ...
- 部署DVWA时的一些问题和解决办法(一)
第一个有可能遇到的问题 0x4 配置PHP 配置PHP,GD支持 系统从2017更新到2018多个php版本共存问题解决,phpinfo 显示7.0 ,而php -v 显示7.2问题 apt-get ...
- org.apache.catalina.connector.ClientAbortException: java.io.IOException: 你的主机中的软件中止了一个已建立的连接。
org.apache.catalina.connector.ClientAbortException: java.io.IOException: 你的主机中的软件中止了一个已建立的连接. at org ...
- Javascript自增、自减运算符
JavaScript自增.自减运算符与表达式语法 var i++; var-- 声明变量 i-- 变量名 ++ -- 自增运算符 JavaScript自增.自减运算符与表达式 JavaScript自增 ...
- django+vue 基础框架 ：vue
<template> <div> <p>用户名:<input type="text" v-model="name"&g ...