jQuery 表单提交方式汇总 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 upload
formData.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/post
url: 'your url', // 需要提交的 url
data: {
'title': title,
'content': content
},
success: function(data) { // data 保存提交后返回的数据，一般为 json 数据
// 此处可对 data 作相关处理
alert('提交成功！');
}
$(this).resetForm(); // 提交后重置表单
});
return false; // 阻止表单自动提交事件
});
});