AJAX根據(jù)城市名，自動(dòng)完成相應(yīng)的城市信息
更新時(shí)間：2007年01月28日 00:00:00 作者：
以前在做項(xiàng)目的時(shí)候碰到這樣的需求。用戶希望能夠直接輸入城市的名字，就能夠得到這個(gè)城市的相應(yīng)的信息。以前是在頁(yè)面打開(kāi)的時(shí)候生成幾個(gè)JavaScript數(shù)組，然后來(lái)對(duì)比的。這樣做的話，如果數(shù)據(jù)比較多的時(shí)候，用戶會(huì)明顯的感到響應(yīng)延遲。
現(xiàn)在該成用ajax的方法來(lái)做，速度要快一些，客戶體驗(yàn)會(huì)好一些。誰(shuí)要咱們處在“體驗(yàn)經(jīng)濟(jì)”時(shí)代呢！
下面是做的一個(gè)小例子，由兩個(gè)頁(yè)面組成。
city.html頁(yè)代碼如下：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(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，說(shuō)明載入完畢，這時(shí)網(wǎng)頁(yè)內(nèi)容已經(jīng)載入 到了Http.responseBody中了
現(xiàn)在該成用ajax的方法來(lái)做，速度要快一些，客戶體驗(yàn)會(huì)好一些。誰(shuí)要咱們處在“體驗(yàn)經(jīng)濟(jì)”時(shí)代呢！
下面是做的一個(gè)小例子，由兩個(gè)頁(yè)面組成。
city.html頁(yè)代碼如下：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(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，說(shuō)明載入完畢，這時(shí)網(wǎng)頁(yè)內(nèi)容已經(jīng)載入 到了Http.responseBody中了
相關(guān)文章
用juery的ajax方法調(diào)用aspx.cs頁(yè)面中的webmethod方法示例
juery的ajax調(diào)用aspx.cs頁(yè)面中的webmethod方法：首先在 aspx.cs文件里建一個(gè)公開(kāi)的靜態(tài)方法，然后加上WebMethod屬性，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-07-07
ajax 發(fā)送請(qǐng)求時(shí)狀態(tài)判斷 if else 語(yǔ)句問(wèn)題如何解決呢？接下來(lái)通過(guò)本文給大家分享ajax犯的錯(cuò)誤處理方法，對(duì)ajax錯(cuò)誤感興趣的朋友一起看看吧2016-09-09
基于h5的history改善ajax列表請(qǐng)求體驗(yàn)
這篇文章主要介紹了基于h5的history改善ajax列表請(qǐng)求體驗(yàn)的相關(guān)資料,需要的朋友可以參考下2015-11-11
ajax請(qǐng)求json數(shù)據(jù)案例詳解
最近項(xiàng)目有這樣一個(gè)需求，點(diǎn)擊六大洲，出現(xiàn)對(duì)應(yīng)的一些請(qǐng)求信息，展示在下面，當(dāng)請(qǐng)求之后，第二次點(diǎn)擊就不用再次請(qǐng)求了，究竟用代碼怎么寫(xiě)呢，下面小編帶領(lǐng)大家了解了解2015-09-09
通過(guò)ajax向后臺(tái)發(fā)送和接收數(shù)據(jù)時(shí)，常常會(huì)出現(xiàn)同步異步問(wèn)題。這篇文章給大家介紹Ajax同步和異步問(wèn)題淺析，需要的朋友參考下2017-02-02
本文主要介紹了ajax實(shí)現(xiàn)登錄功能的示例代碼。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
AJax實(shí)現(xiàn)類(lèi)似百度搜索欄的功能 (面試多見(jiàn))
下面是ajax實(shí)現(xiàn)一個(gè)簡(jiǎn)單的百度搜索欄的功能，當(dāng)用戶在上面的輸入框中鍵入字符時(shí)，會(huì)執(zhí)行函數(shù) "showHint()" 。下文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，感興趣的朋友一起看看吧2016-11-11
本文由腳本之家小編跟大家分享的ajax請(qǐng)求Session失效問(wèn)題，感興趣的朋友一起看看吧2015-09-09
layui的checbox在Ajax局部刷新下的設(shè)置方法
今天小編就為大家分享一篇layui的checbox在Ajax局部刷新下的設(shè)置方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
AJAX 是與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁(yè)的藝術(shù),在不重新加載整個(gè)頁(yè)面的情況下,通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換,AJAX 可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新,下面這篇文章主要給大家介紹了關(guān)于原生Ajax之全面了解xhr的概念與使用的相關(guān)資料,需要的朋友可以參考下2022-11-11