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 相关文章推荐
Java/JS获取flash高宽的具体方法
Dec 27 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
Jan 27 Javascript
ie 7/8不支持trim的属性的解决方案
May 23 Javascript
基于jQuery实现的图片切换焦点图整理
Dec 07 Javascript
JavaScript中继承用法实例分析
May 16 Javascript
JavaScript简单实现弹出拖拽窗口(二)
Jun 17 Javascript
Javascript 闭包详解及实例代码
Nov 30 Javascript
js 轮播效果实例分享
Dec 28 Javascript
浅谈angular.copy() 深拷贝
Sep 14 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
Sep 22 Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 Javascript
js校验开始时间和结束时间
May 26 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数组函数序列之ksort()对数组的元素键名进行升序排序,保持索引关系
2011/11/02 PHP
php字符串函数学习之substr()
2015/03/27 PHP
php提交post数组参数实例分析
2015/12/17 PHP
cakephp2.X多表联合查询join及使用分页查询的方法
2017/02/23 PHP
作为PHP程序员你要知道的另外一种日志
2018/07/30 PHP
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
2013/05/27 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
2015/01/30 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
2015/04/16 Javascript
windows下安装nodejs及框架express
2015/08/07 NodeJs
js中不同的height, top的区别对比
2015/09/24 Javascript
完美实现bootstrap分页查询
2015/12/09 Javascript
AngularJS自动表单验证
2016/02/01 Javascript
探索angularjs+requirejs全面实现按需加载的套路
2016/02/26 Javascript
jquery html动态添加的元素绑定事件详解
2016/05/24 Javascript
关于vue-router的beforeEach无限循环的问题解决
2017/09/09 Javascript
实例分析vue循环列表动态数据的处理方法
2018/09/28 Javascript
jQuery实现的模仿雨滴下落动画效果
2018/12/11 jQuery
详解JavaScript 的变量
2019/03/08 Javascript
vue element 中的table动态渲染实现(动态表头)
2019/11/21 Javascript
Python实现发送email的几种常用方法
2014/08/18 Python
python开发利器之ulipad的使用实践
2017/03/16 Python
python实现汽车管理系统
2018/11/30 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
python创建子类的方法分析
2019/11/28 Python
Python 中如何实现参数化测试的方法示例
2019/12/10 Python
python suds访问webservice服务实现
2020/06/26 Python
浅谈盘点5种基于Python生成的个性化语音方法
2021/02/05 Python
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
财务管理专业毕业生求职信范文
2013/09/21 职场文书
文明礼仪小标兵事迹
2014/01/12 职场文书
公司门卫岗位职责
2014/03/15 职场文书
公务员个人考察材料
2014/12/23 职场文书
档案接收函格式
2015/01/30 职场文书
优秀党员先进事迹材料2016
2016/02/29 职场文书
用Python简陋模拟n阶魔方
2021/04/17 Python
python manim实现排序算法动画示例
2022/08/14 Python