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的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
JQuery元素快速查找与操作
Apr 22 jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
JQuery省市联动效果实现过程详解
May 08 jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 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
Zend Studio (eclipse)使用速度优化方法
2011/03/23 PHP
php 在windows下配置虚拟目录的方法介绍
2013/06/26 PHP
教你如何开启shopnc b2b2c 伪静态
2014/10/21 PHP
php+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
javascript编程起步(第五课)
2007/02/27 Javascript
jquery 操作单选框,复选框,下拉列表实现代码
2009/10/27 Javascript
js escape,unescape解决中文乱码问题的方法
2010/05/26 Javascript
JavaScript栏目列表隐藏/显示简单实现
2013/04/03 Javascript
解析jquery中的ajax缓存问题
2013/12/19 Javascript
jQuery中get和post方法传值测试及注意事项
2014/08/08 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
js面向对象之公有、私有、静态属性和方法详解
2015/04/17 Javascript
TypeScript 中接口详解
2015/06/19 Javascript
AngularJS基础 ng-paste 指令简单示例
2016/08/02 Javascript
微信小程序使用request网络请求操作实例
2017/12/15 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
2018/08/01 Javascript
layui 优化button按钮和弹出框的方法
2018/08/15 Javascript
基于NodeJS开发钉钉回调接口实现AES-CBC加解密
2020/08/20 NodeJs
python 正则式使用心得
2009/05/07 Python
python中Apriori算法实现讲解
2017/12/10 Python
python调用tcpdump抓包过滤的方法
2018/07/18 Python
pyqt5移动鼠标显示坐标的方法
2019/06/21 Python
Django中URL的参数传递的实现
2019/08/04 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
Vilebrequin美国官方网上商店:法国豪华泳装品牌
2020/02/22 全球购物
如果一个类实现了多个接口但是这些接口有相同的方法名将会怎样
2013/06/16 面试题
远程教育心得体会
2014/01/03 职场文书
春季运动会广播稿大全
2014/02/19 职场文书
项目建议书模板
2014/05/12 职场文书
大学辅导员述职报告
2015/01/10 职场文书
张思德观后感
2015/06/09 职场文书
利用python做数据拟合详情
2021/11/17 Python
python模板入门教程之flask Jinja
2022/04/11 Python