记录一次 ajaxSubmit()提交表单

 

submit() 方法触发 submit 事件,或规定当发生 submit 事件时运行的函数。$(selector).submit(function)

使用 preventDefault() 函数来阻止对表单的提交。

ajaxSubmit()提交表单,使用第三方插件jquery.form实现;

通常情况下,我们直接通过form提交的话, 提交后当前页面跳转到form的action所指向的页面。然而,很多时候我们比不希望提交表单后页面跳转,那么,我们就可以使用ajaxSubmit(obj)来提交数据。

 

<%@page import="org.apache.commons.lang.StringUtils"%>
<%@page import="com.alibaba.fastjson.JSONObject"%>
<%@page import="...AppContext"%>
<%@page import="com.***"%>
<%@page import="com.***"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
JSONObject userInfo = (JSONObject) session.getAttribute("User");
String ly = (String) request.getSession().getAttribute("***");
String itemName = (String) request.getAttribute("***Name");
String webRoot = AppContext.webRootPath;
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>申报页面</title>
<link rel="stylesheet"
href="<%=webRoot%>/bootstrap-3.3.5/css/bootstrap.min.css">
<link rel="stylesheet"
href="<%=webRoot%>/css/declare.css">
<link rel="stylesheet"
href="<%=webRoot%>/css/common.css">
<script type="text/javascript"
src="<%=webRoot%>/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript"
src="<%=webRoot%>/js/jquery-form.js"></script>
<script type="text/javascript"
src="<%=webRoot%>/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript">
function next() {
$("#Form").ajaxSubmit({
type : 'post',
url : "next.do",
dataType : "json",
success : function(data) {
if (data.url) {
window.location.href = data.url;
}
},
error : function() {
}
});
}
</script>
<style type="text/css">
/* 自建页面 - 头部自定义样式 */
.customHeader_iframe {
border: none;
width: 100%;
height: 140px;
overflow: hidden;
}

.customFooter_iframe {
border: none;
width: 100%;
height: 193px;
overflow: hidden;
}
</style>
<body>
<iframe id="headFrame" class="customHeader_iframe"
src="http://*****.com/head/head.jsp?ly=<%=ly%>"
scrolling="no"></iframe>
<div class="panel-body" style="height: 200px;">
<form class="form-inline" role="form" id="Form"
enctype="multipart/form-data" autocomplete="off" method="post"
target="nm_iframe" style="width: 50%; margin:90px auto;">
<table class="table">
<tr class="info">
<td>申请事项:</td>
<td><%=***Name %></td>
</tr>
<tr class="success">
<td>公司名称:</td>
<td><%=userInfo.getString("Name")%></td>
</tr>
<tr class="warning">
<td>统一社会信用代码:</td>
<td>
<%
if(userInfo.containsKey("Code") &&
StringUtils.isNotBlank(userInfo.getString("Code"))){
%> <%=userInfo.getString("Code")%> <%
}else{
%> <%=userInfo.getString("orgCode")%>
<%
}
%>
</td>
</tr>
<!-- <tr class="warning">
<td>warning</td>
<td>表示警告,可能需要注意。</td>
<td>c</td>
<td>c</td>
</tr>

-->
</table>
<div class="button-bar">
<button type="submit" class="btn btn-lg button-bars"
onclick="next();">下一步</button>
</div>
</form>
</div>
<iframe id="nm_iframe" name="nm_iframe" style="display:none;"></iframe>
<iframe style="margin-top: 180px;" class="customHeader_iframe"
scrolling="no"
src="http://***.com/foot/foot.html"></iframe>
</body>
</html>

posted @ 2019-12-10 11:09  Li&Fan  阅读(309)  评论(0编辑  收藏  举报