zoukankan      html  css  js  c++  java
  • 记录一次 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;
    100%;
    height: 140px;
    overflow: hidden;
    }

    .customFooter_iframe {
    border: none;
    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=" 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>

  • 相关阅读:
    JSP三大指令是什么?
    jsp和servlet的区别、共同点、各自应用的范围
    1.说一说Servlet的生命周期?
    .查询姓“李”的老师的个数;
    jquery 主要内容有两大部分:
    jQuery的优势:
    JDBC的PreparedStatement是什么?
    execute,executeQuery,executeUpdate的区别是什么?
    String和StringBuffer、StringBuilder的区别是什么?String为什么是不可变的
    数据维护不求人,一招搞定增删改
  • 原文地址:https://www.cnblogs.com/lifan12589/p/12015445.html
Copyright © 2011-2022 走看看