Home > Developer > Ajax

Ajax instance (i) ____ajax

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Select different zip codes, provinces and cities dynamic changes

Sql:

CREATE TABLE ZipCode (
ID number primary Key,
Code VARCHAR2 (200),
Province VARCHAR2 (200),
City VARCHAR2 (200)
)
INSERT into zipcode values (1001, ' 412400 ', ' Hunan ', ' Chaling ')
INSERT into zipcode values (1002, ' 100083 ', ' Beijing ', ' university ')

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 {
Loading Oracle jdbc Thin drivers
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;
Turn code to prevent the page garbled in Chinese
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" >
<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 ready state, the response is complete, you can access the server response and use it
if (xmlhttprequest.status==200) {//Server status code
var response=xmlhttprequest.responsetext.split (",");
document.getElementById ("Province"). Value=response[0];
document.getElementById ("City"). Value=response[1];
}
}
}
</script>
<body>
<table align= "center" width= "M" >
<tr>
<td>ZipCode:</td>
<td><select name= "Select" Onchange= "ZipCode (this.value)" >
<option value= "-1" > Please select </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>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

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