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


Posted in Javascript onJune 26, 2019

情景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) {


 }



});
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js innerHTML 的一些问题的解决方法
Jun 22 Javascript
锋利的jQuery 第三章章节总结的例子
Mar 23 Javascript
Jquery getJSON方法详细分析
Dec 26 Javascript
js中replace的用法总结
Dec 27 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
Jan 31 Javascript
jqGrid读取选择的多行的某个属性代码
May 18 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
Nov 03 Javascript
js获取Html元素的实际宽度高度的方法
May 19 Javascript
Vue2.0 UI框架ElementUI使用方法详解
Apr 14 Javascript
基于input动态模糊查询的实现方法
Dec 12 Javascript
vuex如何重置所有state(可定制)
Jan 17 Javascript
vue实现前端分页完整代码
Jun 17 Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 #Javascript
通过javascript实现段落的收缩与展开
Jun 26 #Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 #Javascript
Vue实现日历小插件
Jun 26 #Javascript
微信小程序入口场景的问题集合与相关解决方法
Jun 26 #Javascript
Vue组件实现触底判断
Jun 26 #Javascript
vue-week-picker实现支持按周切换的日历
Jun 26 #Javascript
You might like
用PHP实现小型站点广告管理
2006/10/09 PHP
PHP冒泡排序算法代码详细解读
2011/07/17 PHP
php提示Call-time pass-by-reference has been deprecated in的解决方法[已测]
2012/05/06 PHP
input file获得文件根目录简单实现
2013/04/26 PHP
destoon二次开发入门示例
2014/06/20 PHP
php第一次无法获取cookie问题处理
2014/12/15 PHP
ThinkPHP内置jsonRPC的缺陷分析
2014/12/18 PHP
php约瑟夫问题解决关于处死犯人的算法
2015/03/23 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
关于jQuery中.attr()和.prop()的问题探讨
2013/09/06 Javascript
将查询条件的input、select清空
2014/01/14 Javascript
js处理php输出时间戳对不上号的解决方法
2014/06/20 Javascript
js单独获取一个checkbox看其是否被选中
2014/09/22 Javascript
javascript去除空格方法小结
2015/05/21 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016/03/05 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
2016/08/10 Javascript
JS对大量数据进行多重过滤的方法
2016/11/04 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
微信小程序 跳转传递数据的实例
2017/07/06 Javascript
JS实现利用两个队列表示一个栈的方法
2017/12/13 Javascript
layui从数据库中获取复选框的值并默认选中方法
2018/08/15 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
es6数组的flat(),flatMap()函数用法实例分析
2020/04/18 Javascript
在Django的上下文中设置变量的方法
2015/07/20 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
wxPython实现列表增删改查功能
2019/11/19 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
详解Python openpyxl库的基本应用
2021/02/26 Python
创联软件面试题笔试题
2012/10/07 面试题
建筑工程实习自我鉴定
2013/09/19 职场文书
护理专业毕业生自我鉴定
2013/10/08 职场文书
业务总经理岗位职责
2014/02/03 职场文书
升职演讲稿范文
2014/05/23 职场文书
新教师岗前培训方案
2014/06/05 职场文书
幼师求职信
2014/06/23 职场文书
幼儿园家长安全责任书
2014/07/22 职场文书