ajaxMethod.js
---------
//>>>ajax 读取类
function ajax_get_lists(inObj){//使用ajax获取列表,用于筛选页面获取列表
var p_temp = [];
var data = inObj['data'];
for(var obj in data){
var param_val = data[obj];
if (typeof(param_val) == 'object'){//值是对象
var val = [];
for( var val_temp in param_val){
val.push(val_temp + '.' + param_val[val_temp]);
}
val = val.join(',');
}else{
var val = param_val;
}
p_temp.push(obj + '=' + encodeURIComponent(val));//编码非assii
}
$.ajax({
url: inObj.page + '?' + p_temp.join('&'),
type:"GET",
cache :false,
dataType:'html',
ajax_list_obj:inObj.list_obj,
ajaxListObjFun:inObj.callback,
success:function (data){
$(this.ajax_list_obj).html(data);
try{
if (this.ajaxListObjFun){
this.ajaxListObjFun.call(this);
}
}catch(e){}
},
error:function (event,XMLHttpRequest,ajaxOptions,thrownError){ alert('加载列表失败');}
});
}
function searchBy(){//更换了查询
$('#sheng').css('display','none');
$('#shi').css('display','none');
if (!window.shengSelect){
return alert('请选择省份');
}
var inObj = {data:{}};
inObj.page = 'ajaxResult.PHP';
inObj.list_obj = '.ajaxResultDiv';
window.pageSheng = inObj.data.sheng = window.shengSelect;
if (window.shiSelect){
window.pageShi = inObj.data.shi = window.shiSelect;
}
ajax_get_lists(inObj);
}
function page_to(page){//换页
var inObj = {data:{}};
inObj.page = 'ajaxResult.PHP';
inObj.list_obj = '.ajaxResultDiv';
inObj.data.page = page;
if (window.pageSheng){
inObj.data.sheng = window.pageSheng;
}
if (window.pageShi){
inObj.data.shi = window.pageShi;
}
ajax_get_lists(inObj);
}
function loadSheng(){//显示省列表
var inObj = {data:{}};
inObj.page = 'ajaxSheng.PHP';
inObj.list_obj = '#sheng';
inObj.callback = function (){
$('#sheng a').click(
function (){
window.shengSelect = $(this).text();
$('#sheng').css('display','none');
$('#shengSelected').text(window.shengSelect);
loadShi();
}
);
}
ajax_get_lists(inObj);
}
function loadShi(){//显示市列表
$('#shiSelected').text('选择城市');
window.shiSelect = null;
var inObj = {data:{}};
inObj.data.sheng = window.shengSelect;
inObj.page = 'ajaxSheng.PHP';
inObj.list_obj = '#shi';
inObj.callback = function (){
$('#shi a').click(
function (){
window.shiSelect = $(this).text();
$('#sheng').css('display','none');
$('#shiSelected').text(window.shiSelect);
}
);
}
ajax_get_lists(inObj);
}
$(document).ready(
function (){
loadSheng();
$('#searchBt').click(
function (){
searchBy();
}
);
}
);
//<<
-------------------
index.html
---------
<div class="s_search">
<div class="select">
<span id="shengSelected">所在省份</span><a href="#" class="s_ico"><img src="stores_files/ico_select.gif" alt=""></a>
<ul style="display: none;" id="sheng">
</ul>
</div>
<div class="select">
<span id="shiSelected">所在城市</span><a href="#" class="s_ico"><img src="stores_files/ico_select.gif" alt=""></a>
<ul style="display: none;" id="shi">
</ul>
</div>
<input src="stores_files/btn_search2.gif" alt="搜索" type="image" id="searchBt">
<div class="ajaxResultDiv"><!--ajax结果--></div>
</div>
-------------
ajaxResult.PHP
返回数据/处理分页数据
---------------
<?PHP
header('Content-Type: text/html; charset=UTF-8');//设置输出编码
$pageUrl = 'ajaxResult.PHP?';
if (empty($_GET['sheng'])){
exit('错误的省份参数');
}else{
$sheng = trim(urldecode($_GET['sheng']));//必须用decode解码,否则乱码
$sqlWhere['sheng'] = " sheng = '" .$sheng. "' ";
}
if (!empty($_GET['shi'])){
$shi = trim(urldecode($_GET['shi']));//必须用decode解码,否则乱码
$sqlWhere['shi'] = " shi = '" .$shi. "' ";
}
$totalPage = 2;//最大页
$page = (int)$_GET['page'];
if ($page < 1){
$page = 1;
}else if ($page > $totalPage){
$page = $totalPage;
}
//分页实现:上一页-1,下一页+1,大概是这样自己处理分页就是了,包括上shi和sheng的参数就是,可以在这步for生成所有的页的href
$pageCode = '';
for ($forI=1; $forI < $totalPage; $forI++){
if ($page == $forI){// 当前页不加链接
$pageCode .= ' <span>[' .$forI. ']</span>';
}else{
$pageCode .= ' <a href="#" onclick="page_to(' .$forI. ');">' .$forI. '</a>';
}
}
$lists = array('a','b','c');//db中的result,使用前面的where impode(' and ',$sqlWhere) limit(page) 查询得到
$pageHtml = '<h3>详情</h3>';
foreach( $lists as $key => $val){
$pageHtml .= '<div>' .$val. '</div>';
}
$pageHtml .= '<p class="page">' .$pageCode. '</p>';
echo $pageHtml;
------------
ajaxSheng.PHP
返回省和市列表
-------
<?PHP
header('Content-Type: text/html; charset=UTF-8');//设置输出编码
$lists = array(
'北京'=>array('市1','市2'),
'北京1'=>array('市1有','市2肝'),
'北京2'=>array('市1夺','市2夺'),
'北京3'=>array('市13地','市遥2')
);//可以从数据库读取
$shengHtml = '';
if (empty($_GET['sheng'])){
foreach( $lists as $key=>$val)
{
$shengHtml .= '<li><a href="#">' .$key. '</a></li>';
}
}else{
$sheng = trim( urldecode($_GET['sheng']) );
echo $sheng;
$list = $lists[$sheng];
foreach( $list as $key=>$val)
{
$shengHtml .= '<li><a href="#">' .$val. '</a></li>';
}
}
echo $shengHtml;//输出所有的省的列表
-----------
注意事项,所有的文件使用utf8编码,使用本代码即可;如果是gb2312,还需要urldecode后再utf8转gb2312;
select效果还是很粗糙.如select失去焦点示处理