AJAX根據(jù)城市名，自動(dòng)完成相應(yīng)的城市信息
更新時(shí)間：2007年01月28日 00:00:00 作者：
以前在做項(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中了
現(xiàn)在該成用ajax的方法來做，速度要快一些，客戶體驗(yàn)會(huì)好一些。誰要咱們處在“體驗(yàn)經(jīng)濟(jì)”時(shí)代呢！
下面是做的一個(gè)小例子，由兩個(gè)頁面組成。
city.html頁代碼如下：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
zipcode.jsp代碼如下：
復(fù)制代碼 代碼如下:
<%@ 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中了
相關(guān)文章
js結(jié)合json實(shí)現(xiàn)ajax簡(jiǎn)單實(shí)例
這篇文章主要為大家詳細(xì)介紹了js結(jié)合json實(shí)現(xiàn)ajax簡(jiǎn)單實(shí)例的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了Ajax郵箱、用戶名唯一性驗(yàn)證實(shí)例代碼,需要的朋友可以參考下2017-10-10
ajax數(shù)據(jù)返回進(jìn)行遍歷的實(shí)例講解
今天小編就為大家分享一篇ajax數(shù)據(jù)返回進(jìn)行遍歷的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
jQuery的ajax傳參巧用JSON使用示例(附Json插件)
jQuery的ajax調(diào)用很方便，傳參的時(shí)候喜歡用Json的數(shù)據(jù)格式，使用示例代碼如下，感興趣的朋友可以參考下，希望對(duì)大家有所幫助2013-08-08
這篇文章主要介紹了ajax調(diào)用中ie緩存問題解決方法,較為詳細(xì)的分析了ajax調(diào)用中ie緩存機(jī)制的原理與具體解決方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12
Ajax請(qǐng)求中async:false/true的作用分析
這篇文章主要介紹了Ajax請(qǐng)求中async:false/true的作用,結(jié)合實(shí)例形式分析說明了Ajax請(qǐng)求中async:false/true的具體功能與使用技巧,需要的朋友可以參考下2016-04-04
asp+ajax實(shí)現(xiàn)靜態(tài)頁面分頁的代碼
asp+ajax實(shí)現(xiàn)靜態(tài)頁面分頁的代碼...2007-11-11
探討.get .post .ajax ztree 還有后臺(tái)servlet傳遞數(shù)據(jù)的相關(guān)知識(shí)
這篇文章主要介紹了探討.get .post .ajax ztree 還有后臺(tái)servlet傳遞數(shù)據(jù)的相關(guān)知識(shí),需要的朋友可以參考下2015-12-12
解決AJAX返回狀態(tài)200沒有調(diào)用success的問題
今天小編就為大家分享一篇解決AJAX返回狀態(tài)200沒有調(diào)用success的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
AJAX實(shí)現(xiàn)JSON與XML數(shù)據(jù)交換方法詳解
這篇文章主要介紹了AJAX實(shí)現(xiàn)JSON與XML數(shù)據(jù)交換方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-01-01