夏日博客

A-A+

jquery 动态创建表单并提交例子

2016年01月10日 前端设计 暂无评论 阅读 9 views 次

创建表单可以使用js或jquery来创建了，然后提交的就可以直接使用obj.submit()方法进行提交，具体实现方法其实非常的简单，下面来看看。

有时候在写web 应用的时候，需要临时动态构造一个form 并提交，form 里面的参数以及action,以及是post请求还是get请求，甚至form 的样式都是可以指定的，用原生的javascript 肯定可以做到，我用jquery做了一个测试。

我自己测试的是构造一个分页的post请求, 为了防止csrf 攻击，加入了csrf 验证，不需要的可以去掉.

例子:

  1. function genSearchObj(url,page,pageSize,keyword){  
  2.     var params = {};  
  3.     params.url = url;  
  4.     params.page = page;  
  5.     params.pageSize = pageSize;  
  6.     params.cond = keyword;  
  7.     return params;  
  8. }  
  9. function mockFormSubmit(params){  
  10.     var form = $('<form />', {action : params.url, method:"post", style:"display:none;"}).appendTo('body');      
  11.     $.each(params, function(k, v) {  
  12.           if ( k != "url" ){  
  13.               form.append('<input type="hidden" name="' + k +'" value="' + v +'" />');  
  14.           }  
  15.     });  
  16.     form.append('<input type="hidden" name="csrfToken" value="' + $("#csrf_token").val() + '" />' );  
  17.     form.submit();  
  18. }  

例子2

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  2. <html xmlns="http://www.w3.org/1999/xhtml">   
  3. <head>   
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  5. <title>createElement</title>   
  6. <style type="text/css">   
  7. .warpper{ border:1px solid red; padding:8px;}   
  8. </style>   
  9. <script type="text/javascript" language="javascript" src="JavaScript/jquery-1.6.1.min.js" ></script>   
  10. <script type="text/javascript" language="javascript">   
  11. <!--   
  12. ///动态创建一个div   
  13. $(function(){   
  14. $('<div />',{   
  15. id:'test',   
  16. text:"this is a div",   
  17. "class":"warpper",   
  18. click:function(){   
  19. var text=$(this).text();   
  20. alert(text);   
  21. }   
  22. }).appendTo("body");   
  23. });   
  24. //创建input:text   
  25. $(function(){   
  26. $('<input />',{   
  27. type:"text",   
  28. val:"input text somethings...",   
  29. name:"userName"   
  30. }).appendTo("body");   
  31. });   
  32. //创建input select   
  33. $(function(){   
  34. var slt=$('<select />',{name:"country" });   
  35. $('<option />',{   
  36. val:"0",   
  37. text:"请选择"   
  38. }).appendTo(slt);   
  39. $('<option>',{   
  40. val:"CN",   
  41. text:"China",   
  42. selected:"selected"   
  43. }).appendTo(slt);   
  44. $("body").append(slt);   
  45. });   
  46. //创建radio   
  47. $(function(){   
  48. $('<input />',{   
  49. type:"radio",   
  50. name:"rdo",   
  51. checked:"checked",   
  52. val:"男"   
  53. }).appendTo("body");   
  54. $('<label>',{   
  55. text:"男",   
  56. }).appendTo("body");   
  57. $('<input />',{   
  58. type:"radio",   
  59. name:"rdo",   
  60. val:"女"   
  61. }).appendTo("body");   
  62. $('<label>',{   
  63. text:"女"   
  64. }).appendTo("body");   
  65. });   
  66. //creat checkbox   
  67. $(function(){   
  68. $('<input />',{   
  69. type:"checkbox",   
  70. name:"cbox",   
  71. val:"1",   
  72. checked:"checked"   
  73. }).appendTo("body");   
  74. });   
  75. $(function(){   
  76. $('<input />',{   
  77. type:"file",   
  78. name:"myfile"   
  79. }).appendTo("body");   
  80. });   
  81. //-->   
  82. </script>   
  83. </head>   
  84. <body>   
  85. <form>   
  86. </body>   
  87. </html>  

你需要把创建好的form添加到DOM中，经过浏览器渲染后才能响应事件和方法。tmpForm.appendTo(document.body).submit();

标签：

给我留言