频道导航

Ajax动态刷新级联刷新

2020-05-25 Ajax 前端之家

前端之家收集整理的这篇文章主要介绍了Ajax动态刷新级联刷新，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

1.jsp页面@H_301_3@

首先是两个下拉框，当公司名字变动时会场负责人的选择列表也相应变换

[html]view plaincopyprint? 
   
 <@H_301_3@tr@H_301_3@>@H_301_3@@H_301_3@@H_301_3@
 td@H_301_3@@H_301_3@width@H_301_3@=@H_301_3@"50%"@H_301_3@@H_301_3@bgcolor@H_301_3@=@H_301_3@"#EAF6EA"@H_301_3@>@H_301_3@@H_301_3@@H_301_3@
div@H_301_3@@H_301_3@align@H_301_3@=@H_301_3@"right"@H_301_3@ 公司名：@H_301_3@
</@H_301_3@div@H_301_3@td@H_301_3@td@H_301_3@@H_301_3@bgcolor@H_301_3@=@H_301_3@"#FFFFFF"@H_301_3@s:select@H_301_3@@H_301_3@list@H_301_3@=@H_301_3@"comInfolist"@H_301_3@@H_301_3@listValue@H_301_3@=@H_301_3@"Com_name"@H_301_3@@H_301_3@@H_301_3@
 listKey@H_301_3@=@H_301_3@"Com_id"@H_301_3@@H_301_3@name@H_301_3@=@H_301_3@"Com_id"@H_301_3@@H_301_3@value@H_301_3@=@H_301_3@"%{mai.comId}"@H_301_3@@H_301_3@id@H_301_3@=@H_301_3@"com"@H_301_3@@H_301_3@onchange@H_301_3@=@H_301_3@span@H_301_3@@H_301_3@style@H_301_3@=@H_301_3@"color:#ff0000"@H_301_3@>@H_301_3@"finduserlst1();"@H_301_3@span@H_301_3@>@H_301_3@s:select@H_301_3@label@H_301_3@@H_301_3@style@H_301_3@=@H_301_3@"color:red;"@H_301_3@ @H_301_3@
label@H_301_3@ 会场负责人：@H_301_3@
input@H_301_3@@H_301_3@type@H_301_3@=@H_301_3@"hidden"@H_301_3@@H_301_3@id@H_301_3@=@H_301_3@"user_id"@H_301_3@@H_301_3@value@H_301_3@=@H_301_3@"${mai.responsibleId}"@H_301_3@/>@H_301_3@@H_301_3@@H_301_3@
input@H_301_3@@H_301_3@type@H_301_3@=@H_301_3@"hidden"@H_301_3@@H_301_3@id@H_301_3@=@H_301_3@"user_name"@H_301_3@@H_301_3@value@H_301_3@=@H_301_3@"${mai.responsibleName}"@H_301_3@/>@H_301_3@@H_301_3@@H_301_3@
select@H_301_3@@H_301_3@id@H_301_3@=@H_301_3@"comuser"@H_301_3@@H_301_3@name@H_301_3@=@H_301_3@"comusername"@H_301_3@@H_301_3@style@H_301_3@=@H_301_3@"width:150px"@H_301_3@@H_301_3@select@H_301_3@>@H_301_3@@H_301_3@@H_301_3@

2.js@H_301_3@

js的方法中首先获得选中框的值，也就是公司id。使用了json，data处为传值。

[javascript]? 
   

@H_301_3@function@H_301_3@finduserlst1(){@H_301_3@@H_301_3@

//获取下拉框的选中项@H_301_3@@H_301_3@@H_301_3@

var@H_301_3@checkText=$(@H_301_3@"#com"@H_301_3@).find(@H_301_3@"option:selected"@H_301_3@).val();@H_301_3@@H_301_3@

@H_301_3@

$("#comuser"@H_301_3@).empty();@H_301_3@@H_301_3@

if@H_301_3@(checkText==@H_301_3@""@H_301_3@){@H_301_3@@H_301_3@

$("#comuser"@H_301_3@).append(@H_301_3@"<optionvalue=''>----请选择----</option>"@H_301_3@);@H_301_3@@H_301_3@

}else@H_301_3@{@H_301_3@@H_301_3@

$.ajax({@H_301_3@

url:"<spanstyle="@H_301_3@color:#ff0000@H_301_3@">companymanage!findPeopleByComId.do</span>"@H_301_3@,@H_301_3@@H_301_3@

type:"post"@H_301_3@,@H_301_3@@H_301_3@

dataType:"<spanstyle="@H_301_3@color:#ff0000@H_301_3@">json</span>"@H_301_3@,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px"> data:{<spanstyle="color:#ff0000"@H_301_3@>comID:checkText</span>},108); list-style:decimal-leading-zero outside; line-height:18px"> success:function@H_301_3@(json){@H_301_3@@H_301_3@

$("#comuser"@H_301_3@).append(@H_301_3@"<optionvalue=''>----请选择----</option>"@H_301_3@);@H_301_3@@H_301_3@

$.each(json,function@H_301_3@(i){@H_301_3@@H_301_3@

$("#comuser"@H_301_3@).append(@H_301_3@"<optionvalue='"@H_301_3@+json[i].userid+@H_301_3@"'>"@H_301_3@+json[i].realName+@H_301_3@"</option>"@H_301_3@);@H_301_3@@H_301_3@

});@H_301_3@

},@H_301_3@

error:function@H_301_3@(XMLHttpRequest,textStatus,errorThrown){@H_301_3@@H_301_3@

return@H_301_3@@H_301_3@false@H_301_3@;@H_301_3@@H_301_3@

}@H_301_3@

});@H_301_3@

}@H_301_3@

}@H_301_3@

3.java方法

然后是action中，首先获得传来的comId.之后是方法。注意这里的需要一个inputstream，不然会报错。这里的comID对应上面json处data所传的值。

?

privateStringcomID;@H_301_3@@H_301_3@

privateListUser_info@H_301_3@>@H_301_3@userlist;@H_301_3@@H_301_3@

privateInputStreaminputStream;@H_301_3@

publicStringfindPeopleByComId(){@H_301_3@

System.out.println("进入了根据公司的id查询所有的人");@H_301_3@

userlist@H_301_3@=@H_301_3@meetingAddrInfoService@H_301_3@.findPeopleByComId(Integer@H_301_3@@H_301_3@

.parseInt(comID));@H_301_3@

StringjsonString@H_301_3@=@H_301_3@JSONArray@H_301_3@.fromObject(userlist).toString();@H_301_3@@H_301_3@

try{@H_301_3@

inputStream@H_301_3@=@H_301_3@new@H_301_3@ByteArrayInputStream(jsonString.getBytes("UTF-8"));@H_301_3@@H_301_3@

}catch(UnsupportedEncodingExceptione){@H_301_3@

//TODOAuto-generatedcatchblock@H_301_3@

e.printStackTrace();@H_301_3@

return"searchUser";@H_301_3@

//System.out.println("根据公司id查询所有人："+userlist+comID);@H_301_3@

publicInputStreamgetInputStream(){@H_301_3@

returninputStream;@H_301_3@

publicvoidsetInputStream(InputStreaminputStream){@H_301_3@

this.inputStream@H_301_3@=@H_301_3@inputStream@H_301_3@;@H_301_3@@H_301_3@

span@H_301_3@@H_301_3@style@H_301_3@=@H_301_3@"white-space:pre"@H_301_3@>@H_301_3@@H_301_3@>@H_301_3@publicList@H_301_3@>@H_301_3@getUserlist(){@H_301_3@@H_301_3@

returnuserlist;@H_301_3@

publicvoidsetUserlist(List>@H_301_3@userlist){@H_301_3@@H_301_3@

this.userlist@H_301_3@=@H_301_3@userlist@H_301_3@;@H_301_3@@H_301_3@

>@H_301_3@publicStringgetComID(){@H_301_3@@H_301_3@

returncomID;@H_301_3@

publicvoidsetComID(StringcomID){@H_301_3@

this.comID@H_301_3@=@H_301_3@comID@H_301_3@;@H_301_3@@H_301_3@

}@H_301_3@

4.配置

struts2里的配置如下

?

@H_301_3@@H_301_3@@H_301_3@

action@H_301_3@@H_301_3@name@H_301_3@=@H_301_3@"companymanage"@H_301_3@@H_301_3@class@H_301_3@=@H_301_3@"com.hb.action.system.MeetingAddrInfoAction"@H_301_3@@H_301_3@method@H_301_3@=@H_301_3@"{1}"@H_301_3@result@H_301_3@@H_301_3@name@H_301_3@=@H_301_3@"searchUser"@H_301_3@@H_301_3@type@H_301_3@=@H_301_3@"stream"@H_301_3@param@H_301_3@@H_301_3@name@H_301_3@=@H_301_3@"contentType"@H_301_3@>@H_301_3@text/json@H_301_3@param@H_301_3@param@H_301_3@@H_301_3@name@H_301_3@=@H_301_3@"inputName"@H_301_3@>@H_301_3@inputStream@H_301_3@result@H_301_3@action@H_301_3@>@H_301_3@@H_301_3@

原文链接：https://www.f2er.com/ajax/165647.html

上一篇：10款超实用Ajax和JavaScript开发框下一篇：mini ajax 上传

猜你在找的Ajax相关文章

网页的异步请求（Ajax）

JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求兼容性问题利用iframe模拟ajax 实现表...

作者：前端之家时间：2021-01-14

手动实现AJAX

AJAX 每日更新前端基础，如果觉得不错，点个star吧 😃 https://github.com/Win...

作者：前端之家时间：2020-12-19

axios异步提交表单数据的不同形式

踩坑Axios提交form表单几种格式前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...

作者：前端之家时间：2020-12-12

php的ajax简单实例

很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...

作者：前端之家时间：2020-11-11

Json与Ajax(注册实例）

需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: "./serv...

作者：前端之家时间：2020-11-07

jSon和Ajax登录功能，ajax数据交互案例

ajax实例，检测用户与注册检测用户名是否被占用：在用户填写完用户名之后，ajax会异步向...

作者：前端之家时间：2020-11-07

关于AjaxControlToolkit的样式问题

网(LieHuo.Net)教程技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...

作者：前端之家时间：2020-11-04

一个简单的AJAX实现(HELLO AJAX)

客户端部分： <html> <head> <meta http-equiv="Content-Type" ...

作者：前端之家时间：2020-11-04

AJAX中文乱码的两类问题及解决之策

1）发送路径中的参数有中文，在服务器段接收参数值是乱码例如： var url=”a.jsp?na...

作者：前端之家时间：2020-11-04

实例：AJAX返回xml代码如何在网页中显示

建站学院（LieHuo.Net）文档今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...

作者：前端之家时间：2020-11-04

最新文章