利用iframe实现提交表单是页面部分刷新

直接上代码:

 1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
 2 <%
 3 String path = request.getContextPath();
 4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 5 %>
 6
 7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 8 <html>
 9   <head>
10     <base href="<%=basePath%>">
11
12
13     <meta http-equiv="pragma" content="no-cache">
14     <meta http-equiv="cache-control" content="no-cache">
15     <meta http-equiv="expires" content="0">
16     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
17     <meta http-equiv="description" content="This is my page">
18     <!--
19     <link rel="stylesheet" type="text/css" href="styles.css">
20     -->
21 <style type="text/css">
22 .tab_clas{
23     font-size:13px;
24     font-family:"宋体";
25     border-collapse: separate;
26     border-spacing: 0;
27     width:100%;
28     color:#666666;
29     text-align:center;
30     border-top: 1px solid #c0c0c0;
31     border-right: 1px solid #c0c0c0;
32 }
33 .tab_clas tr td{
34 height:30px;
35     border-left: 1px solid #c0c0c0;
36     border-bottom: 1px solid #c0c0c0;
37 }
38
39 </style>
40   </head>
41
42   <body>
43           <form  action="${pageContext.request.contextPath}/policyCompany/queryWhiteList" target="list" >
44         <table class="tab_clas">
45             <tr>
46                 <td>公司名称</td>
47                 <td><input type="text" name="name"></td>
48                 <td>公司邮箱</td>
49                 <td><input type="text" name="type"></td>
50                 <td>审核状态</td>
51                 <td><input type="text" name="type"></td>
52             </tr>
53             <tr>
54                 <td>创建时间</td>
55                 <td colspan="4"><input type="text"></td>
56                 <td><input type="submit" value="查询" /> </td>
57             </tr>
58         </table>
59         </form>
60         <iframe name="list" src="${pageContext.request.contextPath}/policyCompany/queryWhiteList" width="100%" height="100%"></iframe>
61   </body>
62 </html>

iframe中是查询出的结果列表。iframe中src是在页面初始化时要展示的连接。当上面的form提交之后,会自动变化。所以src可以为空

需要注意的是  form中的 target属性必须要和iframe中的name属性相同

时间: 2024-08-25 13:35:27

利用iframe实现提交表单是页面部分刷新的相关文章

Form提交表单后页面刷新不跳转的实现

<form action="" id="" method="post" target="nm_iframe"> <input type="text" id="input_text" name="input_text"/> <input type="submit" id="sobmit" name=&

使用layer的iframe层提交表单后,需要关闭当前的iframe层,然后刷新父页面的方法2

<input type="button" onclick="edit(${it.id?c})" class="layui-btn layui-btn-normal layui-btn-sm" value="编辑"> function edit(id) {//iframe层 layer.open({ type: 2, title: '编辑服务商', shadeClose: true, shade: 0.8, area

submit提交表单后,不刷新当前页面

<form method="get" target="test" action="a.html"> <input type=""text /> <input type="submit" /> </form> <iframe name="test" style="display:none"></ifram

Mvc利用Html.BeginForm 提交表单代码详解

js验证表单数据合法性代码 $(function () { $("#btnApplication").click(function () { var imageurl = $("#SXtPhoto").val(); var desc = $("#tDesc").val(); var type = $("#type").val(); if (imageurl == "") { alert("请上传照

ajax提交表单、ajax实现文件上传

ajax提交表单.ajax实现文件上传,有需要的朋友可以参考下. 方式一:利用from表单的targer属性 + 隐藏的iframe 达到类似效果, 支持提交含有文件和普通数据的复杂表单 方式二:使用jquery的$.ajax({..}), 支持提交普通表单,但不支持含有文件的复杂表单; ($.post 或 $.get底层用的都是$.ajax) 方式三:使用jquery插件ajaxFileUpload.js, 支持上传文件,但不支持提交表单 方式四:使用jquery.from.js,支持提交同时

JQuery ajax提交表单及表单验证

JQuery ajax提交表单及表单验证 博客分类: jsp/html/javascript/ajax/development Kit 开源项目 注:经过验证,formValidator只适合一个页面不超过一个表单的情况. 本例实现功能:通过ajax提交表单,并在提交表单前对表单的数据进行验证. 主要通过两个插件实现: 第一个: jQuery Form Plugin http://jquery.malsup.com/form 主要功能是ajax提交表单 第二个:jQuery formValida

php中限制ip段访问、禁止ip提交表单的代码

在需要禁止访问或提交表单的页面添加下面的代码进行判断就可以了. 注意:下边只是一个PHP限制IP的实例代码,如果您打算应用到CMS中,请自行修改. <?php /加IP访问限制 if(getenv('HTTP_CLIENT_IP') && strcasecmp(getenv('HTTP_CLIENT_IP'), 'unknown')) { $userip = getenv('HTTP_CLIENT_IP'); } elseif(getenv('HTTP_X_FORWARDED_FOR

ajaxSubmit()提交表单

1.表单提交 submit() 方法触发 submit 事件,或规定当发生 submit 事件时运行的函数.$(selector).submit(function) 使用 preventDefault() 函数来阻止对表单的提交. ajaxSubmit()提交表单,使用第三方插件jquery.form实现: 通常情况下,我们直接通过form提交的话, 提交后当前页面跳转到form的action所指向的页面.然而,很多时候我们比不希望提交表单后页面跳转,那么,我们就可以使用ajaxSubmit(o

使用iframe实现页面无刷新提交表单

iframe提交表单其实比ajax要方便一些,当然ajax也有ajax的好处,只是ajax编码处理有时有些麻烦,虽然经过转码是可以解决中文问题,但如果直接使用iframe不存这些问题了,下面来看看. 最近在做一个项目,用到上传图片功能,发现ajax不能enctype="multipart/form-data" 属性的表单,没办法,只能使用form表单直接提交的方法了,但是form表单直接提交会跳转页面,这样很不友好,也不是项目需求,于是上网搜索了一番,发现可以使用隐藏的iframe来实