Ajax实例(一)

最新推荐文章于 2020-03-03 10:42:10 发布

chenlly99

最新推荐文章于 2020-03-03 10:42:10 发布

阅读量982

点赞数

分类专栏： UI 文章标签： ajax xmlhttprequest string oracle jdbc function

本文链接：https://blog.csdn.net/cdl2008sky/article/details/3540918

版权

UI 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

选择不同的邮政编码，省份和城市动态变化

SQL:

create table zipCode(
id number primary key,
code varchar2(200),
province varchar2(200),
city varchar2(200)
)
insert into zipcode values(1001,'412400','湖南','茶陵')
insert into zipcode values(1002,'100083','北京','北京科技大学')

Connector .java

/**
*
*/
package com.cn.ajax;

import java.sql.Connection;
import java.sql.DriverManager;

/**
* @author Chenlly
*
*/
public class Connector {
public static Connection getCon() {
  Connection con = null;
  try {
   // 加载 Oracle jdbc thin 驱动程序
   Class.forName("oracle.jdbc.driver.OracleDriver");
   // Oracle thin jdbc URL
   String url = "jdbc:oracle:thin:@localhost:1521:oracle92";
   con = DriverManager.getConnection(url, "scott", "tiger");
  } catch (Exception ex) {
   ex.printStackTrace();
  }
  return con;
}
}

//servlet

AjaxDemoServlet.java

/**
*
*/
package com.cn.ajax;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import com.cn.ajax.Connector;

/**
* @author Chenlly
*
*/
public class AjaxDemoServlet extends HttpServlet {

public AjaxDemoServlet() {
super();
}

public void destroy() {
super.destroy();
}

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

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

public void doAny(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  request.setCharacterEncoding("UTF-8");
  String zipCode=request.getParameter("zipCode");
  Connection con=Connector.getCon();
  String sql="select * from ZIPCODE t where t.code='"+zipCode+"'";
  try {
   ResultSet rs= con.createStatement().executeQuery(sql);
   if(rs.next()){
    String province=rs.getString("province");
    String city=rs.getString("city");
    PrintWriter out=response.getWriter();
    String str=province+","+city;
    //转码，防止页面中文乱码
    String str_utf=new String(str.getBytes("UTF-8"),"ISO-8859-1");
    out.write(str_utf);
    out.flush();
   }
  } catch (SQLException e) {
   e.printStackTrace();
  }

}

public void init() throws ServletException {
}

}

ajax.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 'ajax.jsp' starting page</title>
  <script language="javaScript">
      var xmlHttpRequest;
      function createXML(){
      if(window.ActiveXObject){
        xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
      }else{
        xmlHttpRequest=new XMLHttpRequest();
      }
      }
   function zipCode(zipCode){
    createXML();
    var url="servlet/AjaxDemoServlet?zipCode="+zipCode+"";
    xmlHttpRequest.onreadystatechange=handlestatechange;
    xmlHttpRequest.open("GET",url,true);
    xmlHttpRequest.send(null);
   }
   function handlestatechange(){
    if(xmlHttpRequest.readyState==4){//HTTP就绪状态，响应已完成，可以访问服务器响应并使用它
     if(xmlHttpRequest.status==200){//服务器状态码
      var response=xmlHttpRequest.responseText.split(",");
      document.getElementById("province").value=response[0];
      document.getElementById("city").value=response[1];
     }
    }
   }
  </script>
</head>
<body>
<table align="center" width="500">
<h2>Please Enter Local Data</h2>
<tr>
<td>ZipCode:</td>
<td><select name="select" οnchange="zipCode(this.value)" >
         <option value="-1">请选择</option>
   <option value="412400">412400</option>
   <option value="100083">100083</option>
  </select>
</td>
</tr>

   <tr>
<td>Province:</td>
<td><input id="province" type="text"/></td>
</tr>

   <tr>
<td>City:</td>
<td><input id="city" type="text"/></td>
</tr>
</table>
</body>
</html>

chenlly99

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax实例(一)

选择不同的邮政编码，省份和城市动态变化SQL: create table zipCode( id number primary key, code varchar2(200), province varchar2(200), city varchar2(200))insert into zipcode values(1001,412400,湖南,茶陵)insert into
复制链接

扫一扫

专栏目录