AJAX根據(jù)城市名，自動(dòng)完成相應(yīng)的城市信息

2024-09-01 08:29:52

字體：大中小

供稿：網(wǎng)友

以前在做項(xiàng)目的時(shí)候碰到這樣的需求。用戶希望能夠直接輸入城市的名字，就能夠得到這個(gè)城市的相應(yīng)的信息。以前是在頁面打開的時(shí)候生成幾個(gè)JavaScript數(shù)組，然后來對(duì)比的。這樣做的話，如果數(shù)據(jù)比較多的時(shí)候，用戶會(huì)明顯的感到響應(yīng)延遲。

    現(xiàn)在該成用ajax的方法來做，速度要快一些，客戶體驗(yàn)會(huì)好一些。誰要咱們處在“體驗(yàn)經(jīng)濟(jì)”時(shí)代呢！

    下面是做的一個(gè)小例子，由兩個(gè)頁面組成。

    city.html頁代碼如下：

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

zipcode.jsp代碼如下：
代碼如下:
<%@ 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.executeQuery();

if(rs.next())
{
  out.println(rs.getString("citrmm")+"|"+rs.getString("cittier"));
}
else
{
  out.println("未知"+"|"+"未知");
}

rs.close();
state.close();
conn.close();

}
else
{
out.println("未知"+"|"+"未知");
}

%>

PS：
    Http.send()后，經(jīng)檢測(cè)Http.readystate==4，說明載入完畢，這時(shí)網(wǎng)頁內(nèi)容已經(jīng)載入到了Http.responseBody中了

上一篇：Ajax Hacking

下一篇：ajax實(shí)現(xiàn)標(biāo)簽導(dǎo)航