phpcms 地区设置AJAX中文参数传递的错误问题分析及解决

Filed under: phpcms专栏 | 1 Comment »
Posted on February 25th, 2008 by 肥龙龙 | 1,359 views

近日研究使用phpcms sp6，当进行会员管理设置会员所在地的时候，发现当切换省份时，对应的城市及城区的下拉菜单中会出现html输出的500错误信息，对应会出现的问题的代码如下（/member/admin/templates/member_edit.tpl.php）：

<select name="province" id="province" onChange="javascript:loadcity(this.value);">
<option value="0" selected="selected">请选择</option>
</select>
 
<select name="city" id="city" onChange="javascript:loadarea($('province').value, this.value);">
<option value="0" selected="selected">请选择</option>
</select>
 
<select name="area" id="area">
<option value="0" selected="selected">请选择</option>
</select>
<script language="javascript">
<!--
var phpcms_path = '<?=PHPCMS_PATH?>';
var selectedprovince = '<?=$province?>';
var selectedcity = '<?=$city?>';
var selectedarea = '<?=$area?>';
//-->
</script>
<script type="text/javascript" src="<?=PHPCMS_PATH?>include/js/area.js"></script>

分析原因，是因为我的调试环境不支持ajax的GET方法传递中文参数(这个问题可能在一些纯中文的环境中被避免)，问题出现在area.js这个文件。解决此问题，只需要将中文参数通过UrlEncode的编码再进行传递即可。解决方法如下：
修改/include/js/area.js文件如下：

var url = phpcms_path+"area.php";
 
function loadprovince()
{
    var pars = "action=province";
    var myAjax = new Ajax.Request(url, {method: 'get', parameters: pars, onComplete: setprovince});
}
 
//urlencode编码
String.prototype.UrlEncode = function()
{
    var str = this;
    str = str.replace(/./g,function(sHex)
    {
        window.EnCodeStr = "";
        window.sHex = sHex;
        window.execScript('window.EnCodeStr=Hex(Asc(window.sHex))',"vbscript");
        return window.EnCodeStr.replace(/../g,"%$&");
    });
    return str;
}
 
function setprovince(Request)
{
    var text = Request.responseText;
    var provinces = text.split(",");
    var currprovince = enterValue(provinces, $('province'));
    loadcity(currprovince);
}
 
function loadcity(province)
{
    var pars = "action=city&province=" + province.UrlEncode();
    var cAjax = new Ajax.Request(url, {method: 'get', parameters: pars, onComplete: setcity});
}
 
function setcity(Request)
{
    var text = Request.responseText;
    var citys = text.split(",");
    var currcity = enterValue(citys, $('city'));
    loadarea($('province').value, currcity);
}
 
function loadarea(province,city)
{
    var pars = "action=area&province="+ province.UrlEncode() +"&city="+ city.UrlEncode();
    var aAjax = new Ajax.Request(url, {method: 'get', parameters: pars, onComplete: setarea});
}
 
function setarea(Request)
{
    var text = Request.responseText;
    var areas = text.split(",");
    enterValue(areas, $('area'));
}
 
function enterValue(cell,place)
{
    clearPreValue(place);
    var selectedval = cell[0];
    for(i=0; i<cell.length; i++)
    {
        isselected = addOption(place, cell[i], cell[i]);
        if(isselected)
        {
            place.options[i].selected = true;
            selectedval = cell[i];
        }
    }
    return selectedval;
}
 
function addOption(objSelectNow,txt,val)
{
    var objOption = document.createElement("option");
    objOption.text = txt;
    objOption.value = val;
    objSelectNow.options.add(objOption);
    return objOption.value == selectedprovince || objOption.value == selectedcity || objOption.value == selectedarea;
}
 
function clearPreValue(pc)
{
    while(pc.hasChildNodes())
    pc.removeChild(pc.childNodes[0]);
}
 
loadprovince();

其中关键部分为新增函数UrlEncode，为中文参数进行编码。请自行理解。

have fun!

Tags : , ,