您的位置：首页 > 其它

条件查询结果显示下面iframe页面

2016-03-15 17:08 537 查看



本页面使用easyui的方式实现

orderCheck.jsp

<script type="text/javascript">
 function find(){

  //点击提交的时候查询的结果显示在下面这个页面里，看上图：

  document.getElementById("form1").action="http://localhost:8080/appContenManageUI/WEB_APP/view/order/orderCheckTable.jsp";

  //提交表单

  $("#form1").submit();

 }

</script>

</head>

<body  onload="find()"> 

<br><br><br>

 <!-- 注意：form里的target="dg3"要和iframe里的name="dg3"属性名相同！！！查询结果才会显示在下面 -->

 <form method="post" id="form1" name="form1"  target="dg3">

  <table width="100%">

  <tr>

   <td>用户号码:</td><td><input id="userPhone_query" name="telnum" style="width: 160px"

     class="easyui-validatebox" validType="length[11,11]"></input></td>

  

   <td>

   <button style="padding:3px 17px 3px 17px;" onclick="find()">查询</button>

   </td>

  </tr>  

 </table>

 </form>

 

 <iframe id="dg3" name="dg3" style="width:98%;height:80%;border: 1px solid red" title="easyui datagrid使用jsonp数据" >

   

 </iframe>

</body>

</html>

注意：orderCheck.jsp里面的input标签里的name属性名称要和orderCheckTable.jsp里面的ajax    data参数的key值相同！！

orderCheckTable.jsp

<body> 

 <table id="dg3" style="width:700px;height:337px" title="easyui datagrid使用jsonp数据"

   data-options="fitColumns:true,collapsible:true,

             loader:function(param,success,error){

             $.ajax({ url:'http://192.168.200.246:8080/appContentManageSys/queryPayHistoryList',

                   dataType: 'jsonp',

                   type:'post' ,

                   data:{'telnum':'<%=request.getParameter("telnum")%>'},//前台传到后台的参数

                   success: function (data) {

              success(data);

        }, error: function (xhr) {error(xhr.responseText) }

       });}">

  <thead>

  </thead>

 </table>

</body>



内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航