jQuery操作Ajax和Json

嗯，自己学SSH和做项目也已有两个月了。自己今天来整理一下自己在项目中利用jQuery操作过的Ajax和Json。

当时我对于jQuery操作Ajax几乎不怎么了解，但是项目中有需求，所以自己也是必须要去使用，因此现在来详细讲解一下自己在项目中的操作。

功能中，有一个下拉框，里面存储的是服务商的信息，首选项是“--请选择--”，当我选择第一个下拉框中服务商信息之后，后面紧接着将会得到这个选定的 服务商 下的所有产品。做一个联动操作。虽然我不会用jQuery操作Ajax，但是我第一反应就是想到利用这块技术，于是自己就开始查找对应的资料了。

 

首先，我在Action中，将服务商的信息从数据库查找出来，保存到List集合中，将集合转发到JSP界面上，利用的是struts2标签

 

<div>
    <s:select name="provider.iscenicid" list="#request.providerList" listKey="iscenicid" listValue="szcenicname" headerKey="" headerValue="--请选择" onchange="onChangeOptionScenic(this)" id="scenicType"/></s:select>
    <span id="productInfo"></span>
</div>

 

（ps:其实这个里面，本不应该设置headerKey和headerValue，应该在Action中在List集合中去增加一行再进行操作。）

中间的span标签就是将要利用jQuery操作Ajax把产品信息增加到span标签里面！

 

其次，进行jQuery操作Ajax了：

 

<script>
	function onChangeOptionScenic(_this) {
		// 获取下拉框中的listKey值
		var iscenic = $(_this).val();
		// 设置一个变量，来进行下面的操作
		var htmltv = "";
		// 设置URL地址
		var url = "/tips/travelmessage.action";
		// Ajax操作开始
		$.ajax ({
			// 设定URL
			url : url,
			// 设置提交方式，这里为post
			type : "post",
			// 设置数据类型为Json
			dataType : "json",
			// 设置传过去的值的属性名
			data : {"iscenicid" : iscenic},
			// 成功返回之后的操作方法
			success : function(result) {
 				// 获取Action中传回来的result的值
				var json = eval("("+result+")");  
				// 循环将服务商下的产品以复选框形式拼接出来
				for(var i=0; i<json.length; i++) {
					// 将产品信息以复选框形式拼接起来
					htmltv += "<input type='checkbox' name='productName' value='"+json[i].productId+"'/>"+json[i].productName;
				}
				// 添加到上面的span标签中
				$("#productInfo").val(htmltv);
			}
		});
	}
</script>

 

 

 

最后，将result进行一个映射文件的配置，配置信息如下（根据公司的一些设定而操作）：

 

<action name="travelmessage" class="com.web.system.tips.TravelMessageAction" method="travelMessage">
	<result type="json">
		<param name="root">result</param>
	</result>
</action>

 

 

 

在TravelMessageAction中，需要将内容返回到result中，部分代码如下：

 

List productList = travelMessageService.getProductInfo(product);
JSONArray json = new JSONArray().fromObject(productList);
result = json.toString();
return SUCCESS;

 

 

至此，一个完整的操作已完成，这就是自己的一点点整理，希望以后有更多的有技术的知识与大家分享！

更多精彩敬请关注公众号

Java极客思维

微信扫一扫，关注公众号