AJAX 与省市联动相似原理

不是纯正的省市联动,只是有相同的思路和做法,代码不太一,结果一样
先看两张图:
这里写图片描述

这里写图片描述
图中有宝马/奥迪品牌对应的车型也会被展示出来,省市联动同理
基本思路:
<1>. AJAX获取对应的数据,前边省会在页面加载的同时放在select框中
***<2>.***后边的数据根据前边省id,进行数据动态展示

下边展示部分HTML,JQ ,AJAX前后端,PHP代码 HTML代码
<span class="item_name" style="width:120px;"><span class="need">*</span>省会/城市:</span>
        <select name="province_id" class="select">
        <option value="0">选择省会</option>
	    //这个province可以特殊处理不同类型数据格式
            <{if $province_list_info}>
                <{foreach from=$province_list_info item=$province key=k}>
                    <{foreach from=$province item=$val}>
                        <option value="<{$val.province_id}>" <{if $post_info['cate_id0'] == $val['province_id']}>selected<{/if}> ><{$k}><{$val.province_name}></option>
                    <{/foreach}>
                <{/foreach}>
            <{/if}>
        </select>
        <select name="city_id" class="select">
            <option value="0">选择城市</option>
            <{if $citys}>
                <{foreach from=$citys item=val}>
                    <option value="<{$val.city_id}>" <{if $post_info['city_id'] == $val['city_id']}>selected<{/if}> ><{$val.city_name}></option>
            <{/foreach}>
        <{/if}>
    </select>

AJAX/JQ动态处理选择城市数据

$(document).ready(function(){
	$("select[name='province_id']").change(function(){
		var province_id= $(this).val();
        var content = '';
		$.ajax({
	       	type:'POST',
	       	url:'/car/ajaxcitys/',
	       	data:{province_id: province_id,  is_ajax:1},
	       	dataType:'json',
	        success:function(data){
		        if(data.resultId == '0'){
				$("select[name='city_id']").html('<option value="0">选择城市</option>');
				$.each(data.Data,function(key,val){
				//回调函数有两个参数,第一个是元素索引,第二个为当前值
				//处理数据这里是对应省会下的所有的城市
					content += '<option value="'+ val.city_id + '">' + val.city_name + '</option>';
				}); 
				$("select[name='city_id']").append(content);
	           	}else{
	           	       alert(data.Data);
	           	       $("select[name='city_id']").html('<option value="0">选择城市</option>');
	           	}
		    }
		 });
	});
});

后台AJAX数据必须是JSON串

{"resultId":0,"Data":[{"city_id":"194","city_name":"\u5965\u8feaQ5"},{"city_id":"195","city_name":"\u5965\u8feaA6L"},{"city_id":"1320","city_name":"\u5965\u8feaTTS"},{"city_id":"1318","city_name":"\u5965\u8feaS8"}]}

PHP代码
<1>.第一种是给页面省会数据,以及返回数据用post_info传回html!
<2>.AJAX部分后台处理方式

<1>

	//表格数据接受有所不同post_info接收返回 选中状态
	$post_info = $this->getRequest()->getPost();
	$this->getView()->assign('post_info',$post_info);
	//省会信息获取
	$province_list_info = $_cityCarsInstance>getCarInfoByIds();
    $this->getView()->assign('province_list_info ', $province_list_info );


<2>.

//获取到的省会id 去查询 各种非空查询避免sql查库报错
$params_post = $this->getRequest()->getPost();
if(isset($params['is_ajax']) && $params['is_ajax'] == 1){
     if(!empty($params['province_id'])){
         //根据省会id获得对应城市
         $province_id= $params['province_id'];
         $_tgCityInstance = Business_City_TgCityCarsBusinessModel::getInstance();
         //这是自己封装的方法 就是根据参数去进行查询对应城市的数据
         $city_list= $_tgCityInstance->getCarInfoByBrandId($province_id);
         //最后封装一下json数据格式 resultId随意只要有数据 
         $code = '0';
         $result = ["resultId" => $code,"Data" =>$city_list];
		 json_encode ($result);
		 exit($result);
     }
}

注意:ajax数据数据成功,参数resultId JQ动态数据success里边判断

猜你喜欢

转载自blog.csdn.net/qq_37899005/article/details/82259850