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;
        
        

    }



}

工程结构:

 效果展示:

 

 数据库设计:

猜你喜欢

转载自www.cnblogs.com/cstdio1/p/11799886.html