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


Posted in jQuery onJuly 19, 2018

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

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

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

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

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

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

jQuery 相关文章推荐
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
jQuery异步提交表单实例
May 30 jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
jQuery轮播图功能制作方法详解
Dec 03 jQuery
详解jQuery中的prop()使用方法
Jan 05 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 #jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 #jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 #jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 #jQuery
jQuery插件实现弹性运动完整示例
Jul 07 #jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 #jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 #jQuery
You might like
PHP入门
2006/10/09 PHP
PHP的foreach中使用引用时需要注意的一个问题和解决方法
2014/05/29 PHP
让CodeIgniter的ellipsize()支持中文截断的方法
2014/06/12 PHP
php判断当前用户已在别处登录的方法
2015/01/06 PHP
PHP中使用imagick实现把PDF转成图片
2015/01/26 PHP
Laravel 5框架学习之环境与配置
2015/04/08 PHP
js检测客户端不是firefox则提示下载
2007/04/07 Javascript
JQuery SELECT单选模拟jQuery.select.js
2009/11/12 Javascript
zeroclipboard复制到剪切板的flash
2010/08/04 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
js时间戳转为日期格式的方法
2015/12/28 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
谈谈对JavaScript原生拖放的深入理解
2016/09/20 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
使用Vue制作图片轮播组件思路详解
2018/03/21 Javascript
vue项目中应用ueditor自定义上传按钮功能
2018/04/27 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
2019/07/16 Javascript
layui递归实现动态左侧菜单
2019/07/26 Javascript
Jquery动态列功能完整实例
2019/08/30 jQuery
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
JS实现纵向轮播图(初级版)
2020/01/18 Javascript
在Gnumeric下使用Python脚本操作表格的教程
2015/04/14 Python
Django中几种重定向方法
2015/04/28 Python
Python随手笔记之标准类型内建函数
2015/12/02 Python
python利用paramiko连接远程服务器执行命令的方法
2017/10/16 Python
Python中循环后使用list.append()数据被覆盖问题的解决
2018/07/01 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
python里glob模块知识点总结
2021/01/05 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
办公室主任职责范本
2014/03/07 职场文书
保护野生动物倡议书
2014/05/16 职场文书
大学本科生职业生涯规划书范文
2014/09/14 职场文书
全国法院系统开展党的群众路线教育实践活动综述(全文)
2014/10/25 职场文书
父亲婚礼答谢词
2015/01/04 职场文书