Ajax异步加载web网页数据

前端之家收集整理的这篇文章主要介绍了Ajax异步加载web网页数据前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

HTML代码

<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();//这就是selected的值  var args={"cinema.cinema_name":val,"time":new Date()}; $.post(url,args,function(data){ //alert(data); $("#input1").val(data.cinema_id); $("#input2").val(data.cinema_address); },"json"); }) $('#movieName').change(function(){ var val=$(this).children('option:selected').val();//这就是selected的值  var p1=$(this).children('option:selected').val();//这就是selected的值  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); // alert("主演是:"+data.movie_role); $("#input3").val(data.movie_id); $("#input4").val(data.movie_role); $("#input5").val(data.movie_director); $("#input6").val(data.movie_length); },"json"); }) }) //window.location.href="xx.PHP?param1="+p1+"¶m2="+p2+"";//页面跳转并传参  </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异步通信)

后台代码

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代码

$('#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();//这就是selected的值 
        var args={"date_selected":val,"time":new Date()};
        $.post(url,function(data){
// alert(data);
              $.each(data,function(index,val) {
                  alert("打印查出来的排片id"+val.release_id);
                  });
        },"json"); 
    })
原文链接:https://www.f2er.com/ajax/161557.html

猜你在找的Ajax相关文章