ajax+邮政编码对应城市-------------另有jquery做法

来源：互联网发布：不用实名认证的域名编辑：程序博客网时间：2024/06/02 10:39

index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>


    <title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

<script>
  var xhr;
  //创建一个XMLHttpRequest对象的函数
  function createXHR(){
   if(window.ActiveXObject){
    //ie
    //alert("ie");
    xhr=new ActiveXObject("Microsoft.XMLHTTP");
   }
   else if(window.XMLHttpRequest){
    //火狐、opera
    //alert("火狐");
    xhr=new XMLHttpRequest();
   }
  }
  //get方式和服务器建立连接
  function test(){
   createXHR();
   var url="servlet/TestServlet?id=1";
   xhr.open("get",url,true);//建立了连接
   xhr.onreadystatechange=callback;//readyState0-1
   xhr.send(null);
  }
  //post方式和服务器建立连接
  function test1(){
   createXHR();
   var code=document.getElementsByName("code")[0].value;
   var url="servlet/TestServlet";
   xhr.open("post",url,true);//建立了连接
   xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

   xhr.onreadystatechange=callback;//readyState0-1
   xhr.send("id="+code);
  }
  //建立回调函数
  function callback(){
   if(xhr.readyState==4){
    //接收服务器的请求，更新当前的页面，响应给客户
    if(xhr.status==200){
     var result=xhr.responseText;
     //document.getElementById("div1").innerHTML="<font color=red>"+result+"</font>";
     var s=result.split(":");
     document.getElementsByName("city")[0].value=s[0];
     document.getElementsByName("sheng")[0].value=s[1];
    }
   }
   //alert(xhr.readyState+":callback");
  }
</script>
</head>

<body>
    
    邮编:<input type="text" name="code" onblur="test1()"><p>
    城市：<input type="text" name="city"/><p>
    省份：<input type="text" name="sheng"/>

</body>
</html>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>TestServlet</servlet-name>
    <servlet-class>servlets.TestServlet</servlet-class>
</servlet>

<servlet-mapping>
    <servlet-name>TestServlet</servlet-name>
    <url-pattern>/servlet/TestServlet</url-pattern>
</servlet-mapping>
<welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>

model包中

package model;

public class CodeBean {

private String code;
private String city;
private String pro;
public String getCode() {
  return code;
}
public void setCode(String code) {
  this.code = code;
}
public String getCity() {
  return city;
}
public void setCity(String city) {
  this.city = city;
}
public String getPro() {
  return pro;
}
public void setPro(String pro) {
  this.pro = pro;
}
public CodeBean(String code, String city, String pro) {

  this.code = code;
  this.city = city;
  this.pro = pro;
}
public CodeBean() {

}

}

servlet包中

package servlets;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import model.CodeBean;

public class TestServlet extends HttpServlet {

private Map<String,CodeBean> codes;

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

  response.setContentType("text/html");
  PrintWriter out = response.getWriter();
  String id=request.getParameter("id");//邮编
  System.out.println(id);
  //具体的请求处理了吧
  CodeBean cBean=codes.get(id);
  if(cBean!=null){
   out.write(cBean.getCity()+":"+cBean.getPro());
  }
  else{
   out.write("null:null");
  }
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

  this.doGet(request, response);
}

public void init(){
  codes=new HashMap<String, CodeBean>();
  CodeBean cb1=new CodeBean("100101","dalian","liaoning");
  CodeBean cb2=new CodeBean("100102","zhengzhou","henan");
  CodeBean cb3=new CodeBean("100103","changchun","jilin");

  codes.put(cb1.getCode(), cb1);
  codes.put(cb2.getCode(), cb2);
  codes.put(cb3.getCode(), cb3);
}

}

另有数据库连接

-- Create table
create table USERS
(
ID    NUMBER not null,
NAME NVARCHAR2(20) not null,
PASS NVARCHAR2(20),
EMAIL NVARCHAR2(50),
POWER NVARCHAR2(20)
)
tablespace USERS
pctfree 10
initrans 1
maxtrans 255
storage
(
    initial 64
    minextents 1
    maxextents unlimited
);
-- Create/Recreate primary, unique and foreign key constraints
alter table USERS
add constraint ID_PK primary key (ID)
using index
tablespace USERS
pctfree 10
initrans 2
maxtrans 255
storage
(
    initial 64K
    minextents 1
    maxextents unlimited
);

-- Create table
create table CITY
(
ID       NUMBER(4) not null,
NAME     NVARCHAR2(20),
SHENG_ID NUMBER(4)
)
tablespace USERS
pctfree 10
initrans 1
maxtrans 255
storage
(
    initial 64
    minextents 1
    maxextents unlimited
);
-- Create/Recreate primary, unique and foreign key constraints
alter table CITY
add constraint CITY_ID_PK primary key (ID)
using index
tablespace USERS
pctfree 10
initrans 2
maxtrans 255
storage
(
    initial 64K
    minextents 1
    maxextents unlimited
);
alter table CITY
add constraint CITY_SHENG_ID_FK foreign key (SHENG_ID)
references SHENG (ID);

-- Create table
create table SHENG
(
ID   NUMBER(4) not null,
NAME NVARCHAR2(20)
)
tablespace USERS
pctfree 10
initrans 1
maxtrans 255
storage
(
    initial 64
    minextents 1
    maxextents unlimited
);
-- Create/Recreate primary, unique and foreign key constraints
alter table SHENG
add constraint SHENG_ID_PK primary key (ID)
using index
tablespace USERS
pctfree 10
initrans 2
maxtrans 255
storage
(
    initial 64K
    minextents 1
    maxextents unlimited
);