AJAX automatically completes the corresponding city information based on the city name

Document directory

• Obtain information about the city.

In the past, I encountered such a requirement when I was working on a project. The user wants to directly enter the city name to obtain the corresponding information of the city. In the past, several JavaScript arrays were generated when the page was opened and compared. In this case, when there is a large amount of data, the user will obviously feel the response delay.

Now we need to use ajax to achieve faster speed and better customer experience. Who should we be in the "Experience Economy" Age!

The following is a small example composed of two pages.

The city.html Page code is as follows:

<Center> </p> obtain the city information <table align = "center"> <tr> <td> enter the Pinyin of the city: </td> <input type = "text" id = "citycode" name = "citycode" onblur = "sndReq (this. value); "> </td> </tr> <td> level: </td> <input type = "text" id = "tier" name = "tier"> </td> </tr> <td> owner: </td> <input type = "text" id = "rmm" name = "rmm"> </td> </tr> </table> <p> </center> <br/>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

The zipcode. jsp code is as follows: Copy codeThe Code is as follows: <% @ page contentType = "text/html; charset = gb2312" %>

<% @ Page import = "java. util. *" %>
<% @ Page import = "java. SQL. Connection" %>
<% @ Page import = "java. SQL. PreparedStatement" %>
<% @ Page import = "java. SQL. ResultSet" %>

<% @ Page import = "com. util. MyConnection" %>
<%
String city = request. getParameter ("city ");

If (city = null)
{
City = "";
}
If (! City. equals (""))
{
String SQL = "select citrmm, cittier from tb_basecity where citname like '" + city + "'";
Connection conn = MyConnection. getConnection ();
PreparedStatement state = conn. prepareStatement (SQL );
ResultSet rs = state.exe cuteQuery ();

If (rs. next ())
{
Out. println (rs. getString ("citrmm") + "|" + rs. getString ("cittier "));
}
Else
{
Out. println ("unknown" + "|" + "unknown ");
}

Rs. close ();
State. close ();
Conn. close ();

}
Else
{
Out. println ("unknown" + "|" + "unknown ");
}

%>

PS:
After Http. send () is detected, Http. readystate = 4 indicates that the webpage content has been loaded into Http. responseBody.