JavaScript动态添加数据到表单并提交的几种方式

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

function formAppendSubmit(){
var myform=$(\'#newArticleForm\'); //得到form对象
var tmpInput=$(\"<input type=\'text\' name=\'blogArticleForm.articleContent\'/>\");
tmpInput.attr(\"value\", myUeditor.window.getContentInsideBody());
myform.append(tmpInput);
myform.submit();
}

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

function(event){
form = $(\"<form></form>\")
form.attr(\'action\',action)
form.attr(\'method\',\'post\')
input1 = $(\"<input type=\'hidden\' name=\'input1\' />\")
input1.attr(\'value\',\'input1 value\')
input2 = $(\"<input type=\'text\' name=\'textinput\' value=\'text input\' />\")
form.append(input1)
form.append(input2)
form.appendTo(\"body\")
form.css(\'display\',\'none\')
form.submit()
}

jquery ajax 提交表单

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

jquery ajax 非表单形式

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

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

function UpladFile(fileUploadId, taskid) { 
　　　　 var fileObj = document.getElementById(fileUploadId).files[0]; // 获取文件对象
// FormData 对象
var form_data = new FormData();
//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) {
　　　　　}
　　　　　　});
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。