有时候在写web 应用的时候，需要临时动态构造一个form 并提交，form 里面的参数以及action,以及是post请求还是get请求，甚至form 的样式都是可以指定的，用原生的javascript 肯定可以做到，我用jquery做了一个测试。
我自己测试的是构造一个分页的post请求, 为了防止csrf 攻击，加入了csrf 验证，不需要的可以去掉.
例子
function genSearchObj(url,page,pageSize,keyword){
var params = {};
params.url = url;
params.page = page;
params.pageSize = pageSize;
params.cond = keyword;
return params;
}
function mockFormSubmit(params){
var form = $('<form />', {action : params.url, method:"post", style:"display:none;"}).appendTo('body');
$.each(params, function(k, v) {
if ( k != "url" ){
form.append('<input type="hidden" name="' + k +'" value="' + v +'" />');
}
});
form.append('<input type="hidden" name="csrfToken" value="' + $("#csrf_token").val() + '" />' );
form.submit();
}
例子2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>createElement</title>
<style type="text/css">
.warpper{ border:1px solid red; padding:8px;}
</style>
<script type="text/javascript" language="javascript" src="JavaScript/jquery-1.6.1.min.js" ></script>
<script type="text/javascript" language="javascript">
<!--
///动态创建一个div
$(function(){
$('<div />',{
id:'test',
text:"this is a div",
"class":"warpper",
click:function(){
var text=$(this).text();
alert(text);
}
}).appendTo("body");
});
//创建input:text
$(function(){
$('<input />',{
type:"text",
val:"input text somethings...",
name:"userName"
}).appendTo("body");
});
//创建input select
$(function(){
var slt=$('<select />',{name:"country" });
$('<option />',{
val:"0",
text:"请选择"
}).appendTo(slt);
$('<option>',{
val:"CN",
text:"China",
selected:"selected"
}).appendTo(slt);
$("body").append(slt);
});
//创建radio
$(function(){
$('<input />',{
type:"radio",
name:"rdo",
checked:"checked",
val:"男"
}).appendTo("body");
$('<label>',{
text:"男",
}).appendTo("body");
$('<input />',{
type:"radio",
name:"rdo",
val:"女"
}).appendTo("body");
$('<label>',{
text:"女"
}).appendTo("body");
});
//creat checkbox
$(function(){
$('<input />',{
type:"checkbox",
name:"cbox",
val:"1",
checked:"checked"
}).appendTo("body");
});
$(function(){
$('<input />',{
type:"file",
name:"myfile"
}).appendTo("body");
});
//-->
</script>
</head>
<body>
<form>
</body>
</html>
你需要把创建好的form添加到DOM中，经过浏览器渲染后才能响应事件和方法。tmpForm.appendTo(document.body).submit();
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索测试
， 浏览器
， 参数
params
jquery动态提交表单、form表单提交例子、velocity提交表单例子、ajax提交form表单例子、jquery提交form表单，以便于您获取更多的相关知识。
时间： 2024-08-22 12:34:18