jQuery表单提交方法全解析

button按钮, 表单方式提交

$('#sub').click(function(){var name = $("#name").val();var url = $("#url").val();var description = $("#description").val();if(name=="" || name==null){    #("#span_name").text("用户名不能为空");    return false;}if(url=="" || url==null){    #("#span_url").text("用户名不能为空");    return false;}$("#form1").submit();})<form name="form1" id="form1" action="" method="post"><input type="text" name="name" id="name" value=""/><input type="text" name="url" id="url" value=""/><input type="text" name="description" id="description" value=""/><input type="button" id="sub" value="提交"/><input type="reset" value="重置"/></form>

jQuery改变form表单的action, 并进行提交的实现代码

$(function () {    $("#btn").click(function () {        var usercode = $("#UserCode").val();        var verifycode = $("#Verifycode").val();        if ($.trim(usercode) == "" || $.trim(verifycode) == "") {            alert(" 您的[客户号]或者[验证码]必须填写！");            return false;        }        else {            document.SearchForm.action = '/index/Search?u=' + usercode;            document.SearchForm.submit();        }        });});

<form id="SearchForm" name="SearchForm" method="post">...</form>

jQuery ajax()使用serialize()提交form数据

jQuery的serialize()方法通过序列化表单值, 创建URL编码文本字符串, 我们就可以选择一个或多个表单元素, 也可以直接选择form将其序列化, 如：

<form action="">First name: <input type="text" name="FirstName" value="Bill" /><br />Last name: <input type="text" name="LastName" value="Gates" /><br /></form>$(document).ready(function(){console.log($("form").serialize()); // FirstName=Bill&LastName=Gates});

这样, 我们就可以把序列化的值传给ajax()作为url的参数, 轻松使用ajax()提交form表单了, 而不需要一个一个获取表单中的值然后传给ajax(), 举例如下：

$.ajax({type: 'post',url: 'your url',data: $("form").serialize(),success: function(data) {// your code}});

使用$.post()、$.get()和$.getJSON()也是一样的：

$.post('your url', $("form").serialize(), function(data) {// your code}});$.get('your url', $("form").serialize(), function(data) {// your code}});$.getJSON('your url', $("form").serialize(), function(data) {// your code}});

使用FormData对象拼接数据

var formData = new FormData();formData.append("repo_id", '4'); //上传 固定为 4 uploadformData.append("sesskey", '<?php echo sesskey(); ?>');formData.append("action", 'upload');var timestamp = Date.parse(new Date()); //13数 毫秒数formData.append("itemid", timestamp.toString().slice(3)); //此时 itemid 来自 毫秒时间戳 取九位数formData.append("repo_upload_file", repo_upload_file[i]);formData.append("title", repo_upload_file[i].name);formData.append("overwrite", true); //如果出现文件重复时是否重写formData.append("author", '<?php echo $USER->username; ?>'); //作者本人$.ajax({ //ajax 无刷新提交url: "/repository/repository_ajax.php",type: "POST",processData: false,contentType: false,data: formData,dataType : 'json',success: function(msg){if(msg.id){ //关闭当前的窗口， 然后在提示上传文件的信息repo_upload_file.splice(i, 1); //删除预备上传的文件类表repo_exit_upload_file.push(msg); //压入到已上传的文件//写入到文件上传隐藏域$("#itemid").val(msg.id); //文件夹id编号var file_ids = $("#file_ids").val();if(file_ids == ""){$("#file_ids").val(msg.file_id);}else{$("#file_ids").val(file_ids+','+msg.file_id);}}else{$(".assignInfo").text("上传的附件出现雷同或抄袭");}}});

注意: 采用FormData对象传递数据, 以下两个参数必不可少

processData: false, // 告诉jQuery不要去处理发送的数据, 用于对data参数进行序列化处理 这里必须false

contentType: false, // 告诉jQuery不要去设置Content-Type请求头

实例: 如何在submit()表单提交事件之前追加提交数据

$('#sub').click(function(){var name = $("#name").val();var url = $("#url").val();var description = $("#description").val();if(name=="" || name==null){#("#span_name").text("用户名不能为空");return false;}if(url=="" || url==null){#("#span_url").text("用户名不能为空");return false;}var myform=$('#form1'); //得到form对象var tmpInput=$("<input type='hidden' name='token'/>");tmpInput.attr("value", 'EKQEpgr2EY');myform.append(tmpInput);myform.submit();})<form name="form1" id="form1" action="" method="post"><input type="text" name="name" id="name" value=""/><input type="text" name="url" id="url" value=""/><input type="text" name="description" id="description" value=""/><input type="button" id="sub" value="提交"/><input type="reset" value="重置"/></form>

实例: jQuery使用ajaxSubmit()提交表单示例

<form>标题：<input type="text" name="title" /><br />内容：<textarea name="content"><textarea/><br /><button>提交</button></form>$('button').on('click', function() {$('form').on('submit', function() {var title = $('inpur[name=title]').val(),content = $('textarea').val();$(this).ajaxSubmit({type: 'post', // 提交方式 get/posturl: 'your url', // 需要提交的 urldata: {'title': title,'content': content},success: function(data) { // data 保存提交后返回的数据，一般为 json 数据// 此处可对 data 作相关处理alert('提交成功！');}$(this).resetForm(); // 提交后重置表单});return false; // 阻止表单自动提交事件});});