1. 程式人生 > >簡單的兩級聯動ajax載入省市

簡單的兩級聯動ajax載入省市

//新新增修改的時候繫結省市

jquery Code:

//ajax繫結省s
	$(function(){
		var prov = '${tour.prov}';
			$.ajax({
                url: "./listProv.jspx",
                type: 'POST',
                dataType: 'JSON',
                timeout: 5000,
                error: function() { alert('載入省列表失敗!'); },
                success: function(msg) {
                    $("#province").empty();
                    $.each(eval(msg), function(i, item) {
                    	if(item.prov==prov){
                        	$("<option value='" + item.prov + "' selected = 'selected'>" + item.prov + "</option>").appendTo($("#province"));
                        }else{
                        	$("<option value='" + item.prov + "'>" + item.prov + "</option>").appendTo($("#province"));
                        }
                    });
                   loadCity($("#province").val());
                }
            });
			 $("#province").change(function() {
                loadCity($("#province").val());
            });
            
            function loadCity(parentid) {
            	var city = '${tour.city}';
            	
                $.ajax({
                    url: './listCity.jspx?prov='+ parentid,
                    type: 'POST',
                    dataType: 'JSON',
                    timeout: 5000,
                    error: function() { alert('載入城市列表失敗!'); },
                    success: function(msg) {
                        $("#city").empty();
                        $.each(eval(msg), function(i, item) {
                        	if(item.city ==city){
                        		$("<option value='" + item.city + "' selected = 'selected'>" + item.city + "</option>").appendTo($("#city"));
                        	}else{
                        		 $("<option value='" + item.city + "'>" + item.city + "</option>").appendTo($("#city"));
                        	}
                        
                           
                        });
                    }
                });
            }
		})

如果get方式出現中文亂碼的時候:

那麼ajax【get方式】附帶引數的時候需要加個函式:encodeURIComponent

即:

url: './listCity.jspx?prov='+ encodeURIComponent(parentid),

說明:

encodeURIComponent方法在編碼單個URIComponent(指請求引數)應當是最常用的,它可以講引數中的中文、特殊字元進行轉義,而不會影響整個URL。

具體詳情請看:

CSDN發帖關於ajax  get方式亂碼:

對函式URIComponent()的具體說明: