ajax获取数据/分页/li+div仿select代码

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 .= '&nbsp;<span>[' .$forI. ']</span>';
}else{
$pageCode .= '&nbsp;<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失去焦点示处理