前端之家收集整理的这篇文章主要介绍了
Ajax异步加载web网页数据,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
<select id="cinemaName" name="release.cinema.cinema_name" class="select w50" style="width:250px;"> //javascript代码通过id名称写
<option value="" selected="selected">请选择影院</option>
<s:iterator value="cinemas" id="m">
<option value="<s:property value="#m.cinema_name"/>" ><s:property value="#m.cinema_name"/></option>
</s:iterator>
</select>
javascript代码
<script type="text/javascript"> $(document).ready(function(){ $('#cinemaName').change(function(){ var val=$(this).children('option:selected').val(); val=$.trim(val); var url="releaseAction_getCinemaInfo.action"; alert($(this).children('option:selected').val()); var p1=$(this).children('option:selected').val(); var args={"cinema.cinema_name":val,"time":new Date()}; $.post(url,args,function(data){ $("#input1").val(data.cinema_id); $("#input2").val(data.cinema_address); },"json"); }) $('#movieName').change(function(){ var val=$(this).children('option:selected').val(); var p1=$(this).children('option:selected').val(); val=$.trim(val); var url="releaseAction_getMovieInfo.action"; alert($(this).children('option:selected').val()); var args={"movie.movie_name":val,function(data){ var obj = eval(data); $("#input3").val(data.movie_id); $("#input4").val(data.movie_role); $("#input5").val(data.movie_director); $("#input6").val(data.movie_length); },"json"); }) }) </script>
Action类代码
public void getCinemaInfo() throws Exception{
jsonObject=new JSONObject()
if (cinemaService.getCinemaByCinemaName(cinema).get(0)!=null) {
cinema = cinemaService.getCinemaByCinemaName(cinema).get(0)
HttpServletResponse response=ServletActionContext.getResponse()
response.setContentType("text/html;charset=utf-8")
PrintWriter out = response.getWriter()
jsonObject.put("cinema_id",cinema.getCinema_id())
jsonObject.put("cinema_address",cinema.getCinema_address())
out.println(jsonObject)
out.flush()
out.close()
}
}
数据以json数组的形式交互(ajax异步通信)
后台代码@H_301_295@
public void getCinemaInfobySelect() throws Exception{
System.out.println("打印js 界面传来的选择日期参数"+date_selected)
//这里 的6是影院id,前面的页面提供,先写死 的
if (releases.size()>0) {
jsonArray =JSONArray.fromObject(releases)
//打印订单信息
for(MovieRelease m:releases)
{
System.out.println(m)
}
HttpServletResponse response=ServletActionContext.getResponse()
response.setContentType("text/html;charset=utf-8")
PrintWriter out = response.getWriter()
System.out.println("打印传给界面的值:"+jsonArray.toString())
System.out.println("打印传给界面的值:"+jsonArray)
out.println(jsonArray)
out.flush()
out.close()
}else {
System.out.println("该影片没有查询到排片信息!")
}
}
js代码@H_301_295@
$('#date_select').change(function(){
var val=$(this).children('option:selected').val();
val=$.trim(val);
var url="orderAction_getCinemaInfobySelect.action";
alert($(this).children('option:selected').val());
var p1=$(this).children('option:selected').val();
var args={"date_selected":val,"time":new Date()};
$.post(url,function(data){
$.each(data,function(index,val) {
alert("打印查出来的排片id"+val.release_id);
});
},"json");
})