微客导航 » 文章资讯 » jQuery实现表单动态添加数据并提交的方法

jQuery实现表单动态添加数据并提交的方法

2023-09-10 02:57:06 171

本文实例讲述了jQuery实现表单动态添加数据并提交的方法。分享给大家供大家参考，具体如下：

情景1：已经存在form对象了，动态为form增加对象并提交

functionformAppendSubmit(){
varmyform=$('#newArticleForm');//得到form对象
vartmpInput=$("");
tmpInput.attr("value",myUeditor.window.getContentInsideBody());
myform.append(tmpInput);
myform.submit();
}

情景2：没有form对象，动态生成form，动态添加数据并提交

function(event){
form=$("")
form.attr('action',action)
form.attr('method','post')
input1=$("")
input1.attr('value','input1value')
input2=$("")
form.append(input1)
form.append(input2)
form.appendTo("body")
form.css('display','none')
form.submit()
}

jqueryajax提交表单

$.ajax({
type:"POST",
url:www.baidu.com,
data:$('#formId').serialize(),
success:function(data){
},
error:function(data){
}
});

jqueryajax非表单形式

$.ajax({
type:"post",
url:"login.action",
data:"name="+user+"&chatRoomId="+chatRoomId,
success:
function(){
},
error:
function(){
}
});

情景3：没有form对象，利用formData，动态添加数据并提交

functionUpladFile(fileUploadId,taskid){
varfileObj=document.getElementById(fileUploadId).files[0];//获取文件对象
//FormData对象
varform_data=newFormData();
//form.append("author","hooyes");//可以增加表单数据
form_data.append("taskid",taskid);
form_data.append("file",fileObj);//文件对象
$.ajax({
type:"POST",
dataType:"html",
url:www.baidu.com,
data:form_data,
success:function(data){
},
error:function(data){
}
});
}

另外，不要忘了引入jQuery插件，这里建议大家使用cdn，如：

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQueryform操作技巧汇总》、《jQuery操作json数据技巧汇总》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery表格(table)操作技巧汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

返回顶部
3162201930
czq8825@qq.com

jQuery实现表单动态添加数据并提交的方法

热门推荐

随机推荐