[初学web]phalcon框架下通过ajax更改select表单的选项

最后效果如下：

在更改city选项时候，触发自动更改District的选项

代码如下:

//AddressController.php
/**
     * Edits a addres
     *
     * @param  string $uid
     */
    public function editAction($uid)
    {
        if (!$this->request->isPost()) {
            $addres = Address::findFirstByuid($uid);
            if (!$addres) {
                $this->flash->error("addres was not found");
                return $this->dispatcher->forward(array(
                    "controller" => "address",
                    "action" => "index"
                ));
            }
            $this->view->CITY = AddressDef::$CITY;
            $this->view->DISTRICT = AddressDef::$DISTRICT[$addres->city];
            $this->view->uid = $addres->uid;
            //设定好默认值
            $this->tag->setDefault("city", $addres->city);
            $this->tag->setDefault("district", $addres->district);
            $this->tag->setDefault("zone", $addres->zone);
            $this->tag->setDefault("building", $addres->building);
            $this->tag->setDefault("unit", $addres->unit);
            $this->tag->setDefault("room", $addres->room);
            $this->tag->setDefault("remark", $addres->remark);
        }
    }
[/codesyntax]
[codesyntax lang="php"]
/*address/edit.phtml*/
<table>
    <tr>
        <td align="right">
            <label for="city">City</label>
        </td>
        <td align="left">
            <?php echo $this->tag->selectStatic(array("city", $CITY, "onchange"=>"loadXMLDoc()"));?>
        </td>
    </tr>
    <tr>
        <td align="right">
            <label for="district">District</label>
        </td>
        <td align="left">
            <?php echo $this->tag->selectStatic(array("district", $DISTRICT));?>
        </td>
    </tr>
    <tr>
        <td align="right">
            <label for="zone">Zone</label>
        </td>
        <td align="left">
            <?php echo $this->tag->textField(array("zone", "type" => "number")) ?>
        </td>
    </tr>
    <tr>
        <td align="right">
            <label for="building">Building</label>
        </td>
        <td align="left">
            <?php echo $this->tag->textField(array("building", "type" => "number")) ?>
        </td>
    </tr>
    <tr>
        <td align="right">
            <label for="unit">Unit</label>
        </td>
        <td align="left">
            <?php echo $this->tag->textField(array("unit", "type" => "number")) ?>
        </td>
    </tr>
    <tr>
    //.............

phaclon中input控件可以这么写

<?php echo $this->tag->textField(array("zone", "type" => "number")) ?>

上面的语句呈现出的html语句就是

<input type="text" id="zone" name="zone" value="3" />

其中value="3"是在controller中

$this->tag->setDefault("zone", $addres->zone);

来控制的

select控件可以这么写

<?php echo $this->tag->selectStatic(array("city", $CITY, "onchange"=>"loadXMLDoc()"));?>

其中的$CITY是在controller中这里定义的

$this->view->CITY = AddressDef::$CITY;

onchange事件，触发执行loadXMLDoc()

<script>
function loadXMLDoc()
{
    var xmlhttp;
    //通过id名city获取到控件对象
    var city=document.getElementById("city");
    //获取到当前选择的值
    var cityvalue=city.options[city.selectedIndex].value;
    console.log(cityvalue);
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            var districts=xmlhttp.responseText;
            //获取到名为district的select的组件
            var district=document.getElementById("district");
            //先清空
            district.length=0;
            //将从后端返回的json字符串转为javascript数组
            districts=eval("("+districts+")");
            console.log(districts);
            //遍历数组
            $.each(districts,function(key,value){
                 console.log("key:"+key+";value:"+value);
                  //添加select的options选项
                 district.options.add(new Option(value,key));
            });
        }
    }
    console.log("/address/getDistrict/"+cityvalue);
    xmlhttp.open("GET","/address/getDistrict/"+cityvalue, true);
    xmlhttp.send();
}
</script>

对应在controller中后端接口如下

public function getDistrictAction($city){
        //这句很重要，不然返回的就不止json的字符串，还有外围的很多html
        $this->view->setRenderLevel(0);
        if (!$this->request->isGet()) {
            $this->flash->error("invalid action!");
        }
        $feed = AddressDef::$DISTRICT[$city];
        //JSON_UNESCAPED_UNICODE为了汉字能正确编码解析
        echo json_encode($feed,JSON_UNESCAPED_UNICODE);
    }

转载于:https://my.oschina.net/u/2244980/blog/531101