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');
        $('#shi').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');
        $('#shi').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="#" οnclick="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失去焦点示处理