用jQuery.form提交form表单

该功能需要引入jquery.form.js，jQuery表单插件文档

链接：jquery.form.js

jquery.form.min.js

1.通过sumbit提交表单

<form class="layui-form" action="" method="POST" enctype="multipart/form-data" lay-filter="" id="ajaxForm" target="hidden_frame">
    <div class="layui-form-item">
        <label class="layui-form-label goods-desc" style="width: 100px;float: none;">请选择上传类型</label>
        <div class="layui-input-block " style="margin-left:15px;">
            <input type="radio" name="importType" value="0" title="合同">
            <input type="radio" name="importType" value="1" title="通知书">
        </div>
    </div>
    <!-- 上传pdf -->
    <div class="layui-form-item">
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="uploadFile"><i class="layui-icon"></i>上传Pdf文件</button>
            <label class="filePDFName"></label>
        </div>
    </div>
     <!-- 隐藏域 -->
    <input type="hidden" name="type" value="phpexcel">
    <input type="hidden" name="method" value="phpexcelmayileaseimportupdate">
    <input type="hidden" name="contractUrl" value="" id="pdfurl">
    <!-- 上传excle -->
    <div class="layui-form-item" style="margin-top:30px;">
        <div class="layui-upload uploadExcle" style="position: relative;">
            <button type="button" class="layui-btn"><i class="layui-icon"></i>上传Excle文件</button>
            <input type="file" class="file" style="position: absolute;top: 15px;left: 15px;opacity: 0;" accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" name="file">
            <span class="fileExcleName"></span>
        </div>
    </div>
    <!-- 提交 -->
    <div class="layui-form-item  btn">
        <div class="layui-input-block" style="margin-left:15px;">
            <input type="submit" class="layui-btn" lay-submit  value="确定">
            <a type="cancel" class="layui-btn layui-btn-primary cancel">取消</a>
        </div>
    </div>
</form>
<!-- form表单提交后跳转 -->
<iframe src="" name="hidden_frame" style="display: none;" id="hidden_frame" frameborder="0"></iframe>

/*
 * jQuery.form.js提交form表单
 * 需要引入jQuery.form.js
*/
$("#ajaxForm").submit(function() {
    $(this).ajaxSubmit(options);
    return false;
});

$("#ajaxForm").ajaxForm(options);

var options = {
    target: '#hidden_frame', // 把服务器返回的内容放入id为output的元素中
    beforeSubmit: showRequest, // 提交前的回调函数
    success: showResponse, // 提交后的回调函数
    url: url, //设置表单提交URL,默认为表单Form上action的路径 ，如果申明，则会覆盖
    // type : type,    // 默认值是form的method("GET" or "POST")，如果声明，则会覆盖
    /**
     * dataType选项提供一种用于指定应如何处理服务器响应的方法。这直接映射到该jQuery.httpData方法。
     * ①'xml'：如果dataType =='xml'，则将服务器响应视为XML，如果指定了'success'回调方法，则将传递responseXML值
     * ②'json'：如果dataType =='json'，则服务器响应将被评估并传递给'success'回调（如果指定）
     * ③'script'：如果dataType =='script'，则在全局上下文中评估服务器响应
    */
    dataType: 'json', // html（默认）、xml、script、json接受服务器端返回的类型
    clearForm: true, // 成功提交后，清除所有表单元素的值
    resetForm: true, // 成功提交后，重置所有表单元素的值
    timeout: 3000 // 限制请求的时间，当请求大于3秒后，跳出请求
}

function showRequest(formData, jqForm, options) {
    /**
     * 若不需要判断，可以为空
     * formData: 表单元素数组对象，数组里面每一个元素都是一个<input>元素，可以通过.name、.value的方式访问元素
     * 提交表单时，form插件会以ajax方式自动提交这些数据，格式如[{name:user,value:val},{name:pwd,value:pwd}]
     * jqForm: jQuery对象，封装了表单的元素
     * options: options对象
    */
    var queryString = $.param(formData); // type=phpexcel&method=phpexcelmayileaseimportupdate
    var formElement = jqForm[0]; // 将jqForm转换为DOM对象
    var method=formElement.method.value; // 访问jqForm的DOM元素 //返回 phpexcelmayileaseimportupdate
    return true; // 只要不返回false，表单都会提交，在这里可以对表单元素进行验证
}

function showResponse(responseText, statusText) { //responseText返回内容，statusText返回状态
    console.log(responseText)
    // dataType=xml
    var name=$("name",responseXML).text();
    var address=$("address",responseXML).text();
    $("#xmlout").html(name+" "+address);
    // dataType=json
    $("#jsonout").html(data.name+" "+data.address);

    /**
     * 以下内容为返回的json字符串
     * 使用layer的tips提示
    */ 
    layer.closeAll()
    if (responseText.infor == 'true') {
        layer.msg(responseText.msg, {
            icon: 1
        }, function() {
            window.location.reload();
        });
    } else {
        layer.msg(responseText.msg, {
            icon: 5
        });
    }
}

2.通过按钮打开文件框并提交表单

<button type="button" class="layui-btn">上传</button>
<div style="display: none;" id="uploadExcle">
    <form id="ajaxForm" enctype="multipart/form-data" action="" method="POST" enctype="multipart/form-data" lay-filter="" target="hidden_frame">
        <input type="hidden" name="type" value="phpexcel">
        <input type="hidden" name="method" value="phpexcelzrobotbuyinstalmentimportupdate">
        <input type="hidden" name="importType" value="1">
        <input type="file" name="file" id="file" multiple="multiple" accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
        <input type="submit" class="layui-btn submit" id="surePost" lay-submit lay-filter="" value="">
    </form>
</div>
<!-- form表单提交后跳转 -->
<iframe src="" name="hidden_frame" style="display: none;" id="hidden_frame" frameborder="0"></iframe>

// 通过按钮打开input框，并通过input的按钮提交表单
var uploadBtn = document.getElementById("upload");
var file = document.getElementById("file");
var surePost = document.getElementById("surePost");
uploadBtn.addEventListener("click", function(e) {
    if (file) {
        file.click();
    }
    e.preventDefault();
}, false);

$('input[type="file"]').on('change', function() {
    if (surePost) {
        surePost.click();
    }
});

/**
 * jQuery.form.js提交form表单
 * 需要引入jQuery.form.js
*/
$("#ajaxForm").submit(function() {
    $(this).ajaxSubmit(options);
    return false;
});

$("#ajaxForm").ajaxForm(options);

var options = {
    target: '#hidden_frame', // 把服务器返回的内容放入id为output的元素中
    beforeSubmit: showRequest, // 提交前的回调函数
    success: showResponse, // 提交后的回调函数
    url: url, //设置表单提交URL,默认为表单Form上action的路径 ，如果申明，则会覆盖
    // type : type,    // 默认值是form的method("GET" or "POST")，如果声明，则会覆盖
    /**
     * dataType选项提供一种用于指定应如何处理服务器响应的方法。这直接映射到该jQuery.httpData方法。
     * ①'xml'：如果dataType =='xml'，则将服务器响应视为XML，如果指定了'success'回调方法，则将传递responseXML值
     * ②'json'：如果dataType =='json'，则服务器响应将被评估并传递给'success'回调（如果指定）
     * ③'script'：如果dataType =='script'，则在全局上下文中评估服务器响应
    */
    dataType: 'json', // html（默认）、xml、script、json接受服务器端返回的类型
    clearForm: true, // 成功提交后，清除所有表单元素的值
    resetForm: true, // 成功提交后，重置所有表单元素的值
    timeout: 3000 // 限制请求的时间，当请求大于3秒后，跳出请求
}

function showRequest(formData, jqForm, options) {
    /**
     * 若不需要判断，可以为空
     * formData: 表单元素数组对象，数组里面每一个元素都是一个<input>元素，可以通过.name、.value的方式访问元素
     * 提交表单时，form插件会以ajax方式自动提交这些数据，格式如[{name:user,value:val},{name:pwd,value:pwd}]
     * jqForm: jQuery对象，封装了表单的元素
     * options: options对象
    */
    var queryString = $.param(formData); // name=1&address=2
    var formElement = jqForm[0]; // 将jqForm转换为DOM对象，formDom是jQuery表单对象，感觉类似数组，可以通过下标访问元素
    var method=formElement.method.value; // 访问jqForm的DOM元素 //返回 phpexcelmayileaseimportupdate
    return true; // 只要不返回false，表单都会提交，在这里可以对表单元素进行验证
}

function showResponse(responseText, statusText) { //responseText返回内容，statusText返回状态
    console.log(responseText)
    // dataType=xml
    var name=$("name",responseXML).text();
    var address=$("address",responseXML).text();
    $("#xmlout").html(name+" "+address);
    // dataType=json
    $("#jsonout").html(data.name+" "+data.address);

    /**
     * 以下内容为返回的json字符串
     * 使用layer的tips提示
    */ 
    layer.closeAll()
    if (responseText.infor == 'true') {
        layer.msg(responseText.msg, {
            icon: 1
        }, function() {
            window.location.reload();
        });
    } else {
        layer.msg(responseText.msg, {
            icon: 5
        });
    }
}

3.配置选项options

ajaxForm和ajaxSubmit都支持众多的选项参数，这些选项参数可以使用一个Options对象来提供。

target	指明页面中由服务器响应进行更新的元素。元素的值可能被指定为一个jQuery选择器字符串、一个jquery对象、一个DOM元素。		默认值：null
url	指定提交表单数据的URL。		默认值：表单的action属性值
data	一个包含应与表单一起提交的额外数据的对象。	data: { key1: 'value1', key2: 'value2' }
type	指定提交表单数据的方法（method）：“GET”或“POST”。		默认值：GET
beforeSerialize	序列化表格之前要调用的回调函数。这提供了在检索表单值之前对其进行操作的机会。该beforeSerialize函数使用两个参数调用：表单的jQuery对象，以及传递给ajaxForm / ajaxSubmit的Options对象。	beforeSerialize: function($form, options) { // return false to cancel submit }	默认值：null
beforeSubmit	表单提交前被调用的回调函数。如果回调函数返回false表单将不被提交。回调函数带三个调用参数：数组形式的表单数据，jQuery表单对象，以及传入ajaxForm/ajaxSubmit中的Options对象。	beforeSubmit: function(arr, $form, options) { // The array of form data takes the following form: // [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ] // return false to cancel submit }	默认值：null
success	表单成功提交后调用的回调函数。然后dataType选项值决定传回responseText还是responseXML的值。	1.）responseText或responseXML值（取决于dataType选项的值）。 2.）statusText 3.）xhr（如果使用jQuery <1.4，则为jQuery包裹的表单元素） 4.）jQuery包装的表单元素（如果使用jQuery <1.4，则为未定义）	默认值：null
dataType	响应的预期数据类型。下列之一：null，“ xml”，“ script”或“ json”。该dataType选项提供一种用于指定应如何处理服务器响应的方法。这直接映射到该jQuery.httpData方法。	‘xml’：如果dataType ==’xml’，则将服务器响应视为XML，如果指定了’success’回调方法，则将传递responseXML值 ‘json’：如果dataType ==’json’，则服务器响应将被评估并传递给’success’回调（如果指定） ‘script’：如果dataType ==’script’，则在全局上下文中评估服务器响应	默认值：null
resetForm	表示如果表单提交成功是否进行重置。		默认值：null
clearForm	表示如果表单提交成功是否清除表单数据。		默认值：null

4.可操作函数

ajaxForm	增加一个所需要的事件监听器，为ajax提交表单做准备。ajaxForm并不能提交表单。在document的ready函数中，使用ajaxForm来为ajax提交表单进行准备。	接受0个或1个参数。参数可以是一个回调函数，也可以是一个Options对象。	$('#myFormId').ajaxForm();
ajaxSubmit	使用ajax提交表单。在最常见的用例中，这是响应用户单击表单上的“提交”按钮而调用的。	接受0个或1个参数。参数可以是一个回调函数，也可以是一个Options对象。	$("#myFormId").ajaxSubmit(); 或 $("#myFormId").submit(function(){ $(this).ajaxSubmit(); return false;});
formSerialize	将表单串行化（或序列化）为一个查询字符串。这个方法将返回以下格式的字符串：name1=value1&name2=value2。	无	var queryString = $('#myFormId').formSerialize(); $.post('myscript.php', queryString);
fieldSerialize	将表单的字段元素串行化（或序列化）为一个查询字符串。当只有部分表单字段需要进行串行化（或序列化）时，使用这个就很方便了。返回以下格式的字符串：name=value1&name2=value2。	无	var queryString = $('#myFormId .specialFields').fieldSerialize();
fieldValue	返回匹配插入数组中的表单元素值。从.91版本开始，此方法始终返回一个数组。如果无法确定有效值，则数组将为空，否则它将包含一个或多个值。	无	var value = $('#myFormId :password').fieldValue();
resetForm	将表单恢复到初始状态。	无	$("#myFormId").resetForm();
clearForm	清除表单元素。该方法将所有的text、password、textarea置空，清除select元素中的选定，以及所有radio按钮和checkbox按钮重置为非选定状态。	无	$("#myFormId").clearForm();
clearFields	清除字段元素。只有部分表单元素需要清除时方便使用。	无	$("#myFormId .specialFields").clearFields();

更多详情文档：jQuery表单插件文档

5.扩展：onsubmit()和submit()

1.onsubmit()

定义：当表单提交时执行 JavaScript。

onsubmit()是Form对象的事件句柄，而submit()是form对象的事件方法。

还有一个Submit 对象，代表 HTML 表单中的一个提交按钮 (submit button)。在 HTML 表单中 <input type="submit"> 标签每出现一次，一个 Submit 对象就会被创建。

当用户单击了表单中的 Submit 按钮而提交一个表单时，就会调用这个事件句柄函数。注意，当调用方法Form.submit()时，该处理函数不会被调用。

如果 onsubmit句柄返回 fasle，表单的元素就不会提交。如果该函数返回其他值或什么都没有返回，则表单会被提交。

由于onsubmit句柄可以取消表单的提交，所以可以用它对于表单提交前进行验证。如下示例(验证密码是否为空，如果为空，就取消表单的提交)：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="" methods="post" onsubmit="return check()" id="ajaxForm">
        <input type="text" name="text" placeholder="请输入用户名" />
        <input type="password" id="password" name="password" placeholder="请输入密码" />
        <input type="submit" value="提交" />
    </form>
</body>

</html>

<script>
    var pw = document.getElementById('password');

    function check() {
        if (pw.value != '') {
            return true; //不为空
        } else {
            return false; //为空
        }
    }
</script>

注：<form action="" methods="post" onsubmit="return check()">中的return不能少

也可以通过js去定义onsubmit。

<form action="" methods="post" id="ajaxForm">
    <input type="text" name="text" placeholder="请输入用户名" />
    <input type="password" id="password" name="password" placeholder="请输入密码" />
    <input type="submit" value="提交" />
</form>
<script>
    document.getElementById("ajaxForm").onsubmit = function() {
        onForm();
    };

    function onForm() {
        alert('上传成功');
        window.location.reload();
    }
</script>

2.submit()

submit()方法把表单数据提交到 Web 服务器。该方法提交表单的方式与用户单击 Submit 按钮一样，但是表单的 onsubmit事件句柄不会被调用。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="" methods="post" onsubmit="return check()" id="form">
        <input type="text" name="text" placeholder="请输入用户名" />
        <input type="password" id="password" name="password" placeholder="请输入密码" />
        <input type="button" id="btn" value="提交" />
    </form>
</body>

</html>

<script>
    var form = document.getElementById('form');
    var btn = document.getElementById('btn');
    btn.onclick = function() {
        form.submit()
    }
</script>