`

js ajax传回数组 向select中添加options

    博客分类:
  • js
阅读更多
下面的例子是根据选择省份,查出省份下的仓库

js页面:
<html>
<head>
<script type="text/javascript">
var xhr=false;

function createXHR(){
try{
xhr=new XMLHttpRequest();
}catch(e){
try{
xhr=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e1){
try{
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e2){
xhr=false;
}
}
}
if(!xhr){
alert("对不起,您现在所使用的浏览器,无法创建XMLHttpRequest对象");
}
}

function porChange(){
createXHR();
var proid=document.getElementById("pro").value;
var url="<%=request.getContextPath()%>/cameraOperate.do?method=getPro&proid="+proid;
xhr.open("POST",url,true);
xhr.onreadystatechange=callback;

xhr.send(null);
}

function callback(){
if(xhr.readyState==4){
if(xhr.status==200){
var warehouses=eval(xhr.responseText);
var ware=document.getElementById("warehouse_id");
ware.options.length=0;
var op1;
if(warehouses!=null){
  for(var i = 0; i<warehouses.length;i++){  
ware.add(new Option(warehouses[i]["name"], warehouses[i]["id"]));
    }
}
}
}
}
</script>
</head>
<body>
<tr>
<td align="right" width="10%">所属库所在省份:</td>
<td align="left" width="20%">
<select id="pro" name="pro"  style="width:200" onchange="porChange();">
<c:forEach items="${prolist}" var="pr" varStatus="p">
<option value="${pr.id}">${pr.name}</option>
</c:forEach>
</select>
<script>
for(var i=0;i<document.getElementById('pro').options.length;i++){
if(document.getElementById('pro').options[i].value==='${cameraOperateForm.proid}'){
document.getElementById('pro').options[i].selected=true;
}
}
</script>
</td>
</tr>
<tr class="common">
<td align="right" width="8%">所属库:</td>
<td align="left" width="20%">
<html:select styleId="warehouse_id" name="cameraOperateForm" property="warehouseid" style="width:200" value="warehouse_id.name">
<html:options  collection="warehouses" labelProperty="name" property="id" />
</html:select>
<script>
document.getElementById("warehouse_id").value="${cameraOperateForm.warehouse_id.id}";
</script>
<font color="red">*</font>
</td>
</tr>
</body>
</html>

java界面(我这里用的是struts1,原理都是一样的)
public ActionForward execute(ActionMapping mapping,
ActionForm form,
HttpServletRequest request,
HttpServletResponse response)throws Exception
{
CameraOperateForm cameraOperateForm = (CameraOperateForm)form;
CameraService cameraService = (CameraService)getWebApplicationContext().getBean("cameraService");
CameraOperateVo camerOperateVo = new CameraOperateVo();
if("getPro".equals(cameraOperateForm.getMethod())){
WareHouseService wareHouseService = (WareHouseService)getWebApplicationContext().getBean("wareHouseService");
List<DictWarehouse> warehouses=wareHouseService.getWareHouseByProvinceId(cameraOperateForm.getProid());
//下面是把集合循环出来,获得数组中的对象,并用对象的id,name值组成String 的json形式,写入流。在后台就可以获取到json
String json = "[";
if(warehouses!=null && warehouses.size()>0){
for (DictWarehouse obj : warehouses) {
json = json + "{id:" + obj.getId() + ",name:'" + obj.getName() + "'},";
}
json = json.substring(0, json.length() - 1) + "]";
}else{
json="";
}
response.setCharacterEncoding("UTF-8");
PrintWriter out=response.getWriter();
out.print(json);
return null;
}
}
分享到:
评论

相关推荐

    js对ajax返回数组的处理介绍

    在JavaScript(JS)中,AJAX(Asynchronous JavaScript and XML)是一种用于创建动态网页的技术,它允许我们在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。在处理AJAX返回的数据时,如果数据是数组...

    SSH1,JQuery的ajax返回json二维数组处理过程

    在本文中,我们将探讨如何使用SSH1框架与jQuery的AJAX功能来处理JSON二维数组,特别是在实现菜单联动下拉框的场景中。SSH1(Spring、Struts、Hibernate)是Java开发中的一个流行MVC框架组合,而jQuery的AJAX功能则...

    ajax操作json数组,实现局部刷新

    在本文中,我们将深入探讨如何使用Ajax操作JSON数组来实现页面的局部刷新。Ajax,即Asynchronous JavaScript and XML,是一种创建动态网页的技术,允许在不重新加载整个页面的情况下与服务器交换数据并更新部分网页...

    ajax传递list对象数组

    通过以上介绍,我们了解了如何在前端使用JavaScript处理List对象数组并通过AJAX发送给后端,以及后端如何接收并处理这些数据。这在实际项目开发中是非常实用的技巧。希望本文能帮助到正在学习或实践这一技术的朋友。

    AJAX和struts2传递JSON数组

    在Web开发中,AJAX(Asynchronous JavaScript and XML)是一种技术,它允许我们在不刷新整个页面的情况下与服务器进行异步数据交换。而Struts2是一个基于MVC(Model-View-Controller)架构的Java Web框架,它极大地...

    jquery ajax 向后台传递数组参数示例

    本文将深入讲解如何在jQuery AJAX中向后台传递数组参数,并提供示例代码。 首先,理解问题的关键在于JavaScript数组在传递给后台时,如果数组内包含的是对象,会被转化为`[object Object]`的字符串形式。这是因为...

    jquery的ajax传json对象数组到struts2的action

    在Web开发中,jQuery的AJAX功能经常被用于与服务器进行异步数据交换,而Struts2作为一款流行的Java Web框架,提供了处理前端请求的能力。本文将深入探讨如何使用jQuery的AJAX方法发送JSON对象数组到Struts2的Action...

    ajax json 遍历json数组

    ajax json 遍历json数组,json的说明文档,json操作说明

    bootstrap select2插件用ajax来获取和显示数据的实例

    在本篇实例中,首先需要在HTML文档中引入Bootstrap框架和Select2插件的CSS和JS文件,然后按照Select2的要求使用标准的HTML SELECT元素创建一个输入框,并为其设置特定的id和class,以便于使用jQuery进行操作。...

    ajax json select 多级联动

    **Ajax(异步JavaScript和XML)**是Web开发中的一个核心技术,它允许我们在不刷新整个页面的情况下与服务器进行通信。在多级联动中,Ajax扮演着关键角色,负责向后台发送请求并获取响应数据。当用户在一级`&lt;select&gt;`...

    利用ajax传递数组及后台接收的方法详解

    我们在使用ajax异步的提交多选框得到需要操作的对象的id,这时我们可以把每一个id做出一个对象,之后放到一个数组中,再使用JSON.stringify()对这个数组进行json的格式化;在后台中再inputStream中解析出我们的json...

    jquery中push()的用法(数组添加元素)

    本文主要介绍jQuery中如何使用push()方法来向数组末尾添加元素,并返回新的数组长度。 首先,push()方法是JavaScript的原生方法,jQuery对其进行了封装,使其能够应用于jQuery对象。push()方法的用法和普通的...

    js解析php数组对象数组对象数组对象.docx

    在 JavaScript 中解析这个数组: ```javascript var phpArray = &lt;?php echo json_encode($array); ?&gt;; console.log(phpArray); // 输出 ["apple", "banana", "cherry"] ``` 这里需要注意的是,通常情况下,PHP 的...

    JSP+AJAX实现两级select联动 代码

    在JavaScript的AJAX回调函数中,接收到的数据会被解析,然后更新第二个select的选项。这通常涉及到修改DOM结构,添加或删除option元素。为了保持用户体验的流畅,这个过程应该尽可能快速且无感知。 总结一下,这个...

    AJAX数组表格分页JS类 AjaxTablePage 1.01

    | AjaxTablePage 1.01 | AJAX数组表格分页类 | |-------------------------------------------------------------------| | Copyright (c) 2009 Apollo Updated: 2009年2月5日9:44:56| | | | ...

    全国省市区数据(手工核对整理),内含一份json数组,一份js数组,原生select三级联动,手写jQuery自定义三级联动可查看我的博客

    这份压缩包包含两份关键的数据文件:json数组和js数组,以及可能涉及的原生JavaScript和jQuery实现的三级联动效果。 1. JSON数组:JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和...

    js+ajax 实现select下拉框无限级动态添加模板

    js+ajax 实现select下拉框无限级动态添加,代码简洁方便,哥想了很久才做出来的,欢迎使用

    拼音对照js数组

    标题中的“拼音对照js数组”指的是一个JavaScript编程中用于实现汉字与拼音对应关系的数据结构,通常是一个对象数组,其中每个对象包含一个汉字和对应的拼音。这样的数据结构在开发需要处理汉字拼音转换的应用时非常...

    ajax 返回结果拼装到 select

    接着,遍历服务器返回的数据数组,为每个项创建一个新的`&lt;option&gt;`元素,设置其`value`属性为数据项的ID,`text`属性为显示的名称,最后将这个新创建的`&lt;option&gt;`添加到`&lt;select&gt;`中。 在实际应用中,你可能还需要...

Global site tag (gtag.js) - Google Analytics