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