首頁 > 開發者 > Ajax

Ajax執行個體(一)____Ajax

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

選擇不同的郵遞區號，省份和城市動態變化

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"  onchange="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>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
ajax manual ajax payload w3s ajax ajax websocket ajax datagrid ajax settimeout ajax controls
相關文章
ajax入門指南（二）
ajax使用_雜類
jQuery ajax 檔案下載_ajax
AJAX各種實現方式比較_ajax
AJAX入門--- XMLHttpRequest對象的屬性和方法
解決spring-security session逾時 Ajax 請求沒有重新導向的問題

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More