`
uule
  • 浏览: 6358259 次
  • 性别: Icon_minigender_1
  • 来自: 一片神奇的土地
社区版块
存档分类
最新评论

$.ajax中dataType为html实现地区显示效果

阅读更多

实现了选择第一个时,第二个才显示,并且显示的是对应的信息

 

主要实现:

1.进入页面时第二个 select隐藏,第一个被清空,通过传回的List将第一个 select的option补全
2.通过ajax将第一个select中选中的值对应的信息传入,dataType类型为html,将返回的result添加到第二个 select中


    <tr>
	<td><label class="text">所属区域编号:</label></td>
	<td valign="middle">
		<select  id="address_city_id"></select>
		 	 <input type="hidden" name="areaStore.city" id="address_city" /> 
		<select  id="address_region_id"></select>
			 <input type="hidden" name="areaStore.region" id="address_region" /></td>
    </tr>
 
<script>
function initCity(){
	
	$("#address_region_id").hide();
	$("#address_city_id").empty();
	$("<option value='-1'>请选择...</option>").appendTo($("#address_city_id"));
	
	<c:forEach items="${cityList}" var="city" >
		$("<option value='${(city.produce_area_id)}' >${city.produce_area_name}</option>").appendTo($("#address_city_id"));
	</c:forEach>
	
	$("#address_city_id").change(function(){
		$("#address_city").val($("#address_city_id option:selected").text());

		$.ajax({
			method:"get",
			url:"areaStore!list_region.do?city_id=" + $("#address_city_id").attr("value"),
			dataType:"html",
			success:function(result){
				alert(result);
 				$("#address_region_id").show();
				$(result).appendTo($("#address_region_id"));
			},
			error:function(){
				alert("异步失败");
			}
		});
	});
	$("#address_region_id").change(function(){
		$("#address_region").val($("#address_region_id option:selected").text());
	});
}
$(function(){
	initCity();
});
</script>

alert(result)得到的为:

<option value="-1">请选择...</option>

<option value="2">上城区</option>

<option value="3">下城区</option>

<option value="4">江干区</option>

<option value="5">拱墅区</option>

<option value="6">西湖区</option>

<option value="7">滨江区</option>

<option value="8">萧山区</option>
 

第二个请求:

	public String list_region() {
		regionList = areaStoreManager.listRegion(city_id);
		return "list_region";
	}
 
<action name="areaStore" class="areaStoreAction">
	<result name="list_region">/Region_Area_Panel.html</result>	 	
 </action>

 Region_Area_Panel.html页面(第二个select中内容):

<option value="-1">请选择...</option>
<#list regionList as region>
<option value="${(region.produce_area_id)}">${region.produce_area_name}</option>
</#list>

 1

 

  • 大小: 6.2 KB
分享到:
评论

相关推荐

    jquery 异步调用$.ajax() $.post() $.get()

    总的来说,jQuery的`$.ajax()`、`$.post()`和`$.get()`为开发者提供了强大且灵活的异步请求手段,无论是在传统的Web应用还是在响应式布局的现代网站中,它们都是不可或缺的工具。通过熟练掌握这些API,你可以更高效...

    $.ajax()方法详解

    总的来说,$.ajax()方法是jQuery中处理Ajax请求的核心工具,它的强大在于可以灵活地控制请求的各个阶段,适应各种不同的网络交互需求。熟练掌握$.ajax()方法的使用,能够极大地提高开发效率并提升用户体验。

    JQ中$.ajax()方法详解

    ### JQ中$.ajax()方法详解 在前端开发领域,jQuery因其简洁易用而深受开发者喜爱。其中,`$.ajax()`方法是实现异步数据请求的核心功能之一,它简化了与服务器交互的过程,使得前端页面无需刷新即可更新数据或状态。...

    解决JQurey跨域问题$.get|$.post|$.getJSON等等统统可跨域

    对于$.post和$.ajax,你可以通过设置`dataType`和`crossDomain`参数来启用跨域: ```javascript // 使用$.post进行CORS请求 $.post('http://otherdomain.com/api', {data: 'test'}, function(response) { console....

    使用$.Ajax调用后台.aspx

    在$.ajax中,我们将url设置为.aspx页面的URL,例如: ```javascript $.ajax({ url: '/path/to/your/page.aspx', type: 'POST', // 或者 'GET' data: {param1: 'value1', param2: 'value2'}, dataType: 'json', ...

    Jquery $.ajax 请求部署在 Tomcat报HTTP 406上解决方法

    3. **调整客户端Accept头**:确认$.ajax请求中的`dataType`是否与服务器支持的Content-Type匹配。如果服务器只能提供XML响应,而你设置了`dataType: 'json'`,则会导致406错误。 4. **查看服务器日志**:通过查看...

    详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())

    接下来,我们将详细介绍jQuery中各种AJAX函数,包括$.get()、$.post()、$.ajax()和$.getJSON()。 首先,$.get()方法是一种简单实现GET请求的方式。它的语法是$.get(url, [data], [callback])。其中url参数代表请求...

    Jquery中$.post和$.ajax的用法小结

    `$.post`和`$.ajax`是jQuery中用于实现Ajax(异步JavaScript和XML)请求的两个关键方法,它们允许我们在不刷新整个页面的情况下更新网页的部分内容,提高用户体验。 `$.post`是`$.ajax`的一个简化版本,主要用来...

    jQuery中$.ajax()和$.getJson()同步处理详解

    在$.ajax()中,通过将async设置为false,可以实现同步请求。需要注意的是,由于同步请求会锁定浏览器,因此必须谨慎使用,以免导致用户体验下降。 在处理异步请求时,可以利用$.ajax()的success和error回调函数来...

    Jquery中$.getScript()$.getJSON

    在这个例子中,`$.ajax()`的`dataType`参数设为'json',意味着我们期望服务器返回JSON数据。`success`回调函数会在数据成功接收后执行。 对比`$.getScript()`和`$.getJSON()`,虽然它们简化了代码,但灵活性较低。`...

    jquery $.post()的用法 传递json文本 客户端和服务器端相互传递

    jQuery 提供了多种 AJAX 方法来简化这一过程,其中 `$.post()` 是一种常用的方式来实现客户端向服务器端发送数据并接收响应。本文将详细探讨 `$.post()` 的使用方法,特别是在传递 JSON 数据时的应用。 #### 一、`$...

    jQuery Ajax 实例代码 ($.ajax、$.post、$.get)

    一、$.ajax的一般格式 $.ajax({ type: 'POST', url: url , data: data , success: success , dataType: dataType }); 二、$.ajax的参数描述 参数 描述 url 必需。规定把请求发送到哪个 URL。 data 可选...

    jQuery+get/post+Ajax+Json

    在上述示例中,我们使用了$.ajax方法,设置type为'POST',data为JSON对象,dataType为'json',以发送JSON数据到服务器并接收JSON响应: ```javascript $.ajax({ url: 'api.php', type: 'POST', data: JSON....

    学习jQuery中的Ajax——$.get()方法

    对于更复杂的请求,可以使用`$.ajax()`方法,它提供了更多的选项来定制请求,如错误处理、超时设置、缓存控制等。 ### 四、示例代码 在`demo3-get`这个文件中,很可能包含了一个使用`$.get()`方法的示例代码。通过...

    全面解析$.Ajax()方法参数(推荐)

    $.ajax()是jQuery库中用于AJAX通信的底层方法,它封装了原生的AJAX实现,并提供了简单易用的接口。该方法仅接受一个参数,即一个包含设置和回调函数的对象,所有的参数都是可选的。通过$.ajax()方法,开发者可以指定...

    $.ajax()方法参数详解

    $.ajax()方法是jQuery库中的一个核心功能,用于在后台与服务器进行异步数据交互,无需刷新页面。熟练掌握$.ajax()的参数设置对于前端开发至关重要。以下是对这些参数的详细解释: 1. **url**: 这是一个String类型的...

    $.ajax中contentType: “application/json” 的用法详解

    在JavaScript的jQuery库中,`$.ajax`是一个用于发送异步HTTP请求的重要方法。当我们设置`contentType: "application/json"`时,它定义了发送到服务器的数据格式。这在处理JSON数据时尤其有用,因为JSON是一种轻量级...

    Jquery $when done then的用法详解

    对于$.ajax请求来说,如果层级比较多,程序看起来会比较乱,而为了解决这种问题,才有了$when…done…fail…then的封装,它将$.ajax这嵌套结构转成了顺序平行的结果,向下面的$.ajax写法,看起来很乱 $.ajax({ url...

    javascript jQuery $.post $.ajax用法

    JavaScript 和 jQuery 提供了多种方式来执行 AJAX(Asynchronous JavaScript and XML)请求,其中 `$.post` 和 `$.ajax` 是最常用的两个方法。AJAX 允许在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容...

Global site tag (gtag.js) - Google Analytics