用Xajax做的一个无刷新PHP二级联动


数据库中有两张表:大分类BigType表和小分类SmallType表.

  BigType表中的字段为: ID,BigName;

  SmallType表中的字段为:SmallID,BigID,SmallName;

  思路:(主要就是依葫芦画瓢,照官方的实例整的)先读一次大分类表,取得大分类,当每次选择大分类时,将所选择的大分类ID提交给服务器端,通过该ID查得相应的小分类值,将查询值返回,插入相应的位置(注:由于对Xajax往客户端页面插入Javascript部分不熟练,在此我直接把小分类查得的值在服务器端就整理为要输出的select列表菜单,所以感觉有点怪,不是很纯正的感觉^_^,不过已经满足我的需要了,就没继续调,将来如果有机会将加以改进)

  包含三个文件结构:

  xajaxserver.php

  xajaxcommon.php

  chose.php

  代码参考如下:

  xajaxcommon.php页的代码

  view plaincopy to clipboardprint?

//包含xajax的函数库文件 
require_once ("./xajax/xajax_core/xajax.inc.php");  
 
//创建一个xajax对象 
$xajax = new xajax("xajaxserver.php");  
 
//注册你想要通过xajax调用的函数,该函数通过大分类ID来取得小分类。 
$xajax->registerFunction("GetSmallType");       
//包含xajax的函数库文件
require_once ("./xajax/xajax_core/xajax.inc.php");
  
//创建一个xajax对象
$xajax = new xajax("xajaxserver.php");
  
//注册你想要通过xajax调用的函数,该函数通过大分类ID来取得小分类。
$xajax->registerFunction("GetSmallType");     
  
xajaxserver.php页的代码
view plaincopy to clipboardprint?
//输出中文,设置GB2312 
define ('XAJAX_DEFAULT_CHAR_ENCODING', 'GB2312' ); 
 
//包含公用文件 
require("xajaxcommon.php"); 
 
//通过BigID查询小分类的函数,并通过xajaxResponse对象返回XML命令:  
function GetSmallType($BigID) 
{ 
 $objResponse = new xajaxResponse();  
 /* 
 *连接你的数据库,并通过$BigID来查询小分类的值,该部分代码略过 
 *查得的小分类的结果存放在二维数组$SmallTypeResult中 
 */ 
 
 //开始构造Select列表菜单    
 $j=0; 
 while(!emptyempty($SmallTypeResult[$j])) 
 { 
  $Temp.="<option value='".$SmallTypeResult[$j][ID]."'>". 
  $SmallTypeResult[$j][SmallName]."</option>"; 
  $j++; 
 } 
 $str ="<select name='smalltype' id='smalltype'> 
    <option value='0'>[选择小分类]</option>";  
 $str.=$Temp;  
 $str.="</select>"; 
 
 //将列表菜单显示在请求页面的id为mdjingdiv的层中 
 $objResponse->assign("mdjingdiv","innerHTML",$str);  
 return $objResponse;  
; 
} 
 
//在程序输出之前,由xajax处理请求 
$xajax->processRequest();  
//输出中文,设置GB2312
define ('XAJAX_DEFAULT_CHAR_ENCODING', 'GB2312' );
  
//包含公用文件
require("xajaxcommon.php");
  
//通过BigID查询小分类的函数,并通过xajaxResponse对象返回XML命令:
function GetSmallType($BigID)
{
 $objResponse = new xajaxResponse(); 
 /*
 *连接你的数据库,并通过$BigID来查询小分类的值,该部分代码略过
 *查得的小分类的结果存放在二维数组$SmallTypeResult中
 */
  
 //开始构造Select列表菜单   
 $j=0;
 while(!empty($SmallTypeResult[$j]))
 {
  $Temp.="<option value='".$SmallTypeResult[$j][ID]."'>".
  $SmallTypeResult[$j][SmallName]."</option>";
  $j++;
 }
 $str ="<select name='smalltype' id='smalltype'>
    <option value='0'>[选择小分类]</option>"; 
 $str.=$Temp;
 $str.="</select>";
  
 //将列表菜单显示在请求页面的id为mdjingdiv的层中
 $objResponse->assign("mdjingdiv","innerHTML",$str); 
 return $objResponse;
;
}
  
//在程序输出之前,由xajax处理请求
$xajax->processRequest(); 
chose.php页的代码

  view plaincopy to clipboardprint?

<? 
//包含公用文件 
require("xajaxcommon.php"); 
 
//下面括号里的路径与你的Xajax包的位置有关系,调的时候注意一下 
$xajax->printJavascript('../../');  
/* 
*连接你的数据库并取得大分类的值,这部分代码略过 
*大分类值存入二维数组$BigTypeResult中 
*/ 
$i = 0; 
while(!emptyempty($BigTypeResult[$i])) 
{ 
  $str.="n <option value='".$BigTypeResult[$i][ID]. 
  "'>".$BigTypeResult[$i][BigName]."</option>"; 
  $i++; 
} 
?> 
 
<table> 
  <tr> 
    <td align="right">所属大分类:</td> 
    <td> 
      <select name="BigType" id="BigType" onchange= 
      "xajax_GetSmallType(document.getElementById 
      ('BigType').value);"/>  
        <option value='0'>[选择大分类]</option> 
        <?  
          print_r ($str);  
        ?> 
       </select> 
    </td> 
  </tr> 
  <tr> 
    <td align="right">所属小分类:</td> 
    <td> 
      <div id="mdjingdiv">      
      </div>    
    </td> 
  </tr> 
</table>


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3