Jquery AJAX提交多个FORM表单
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery AJAX提交多个FORM表单相关的知识，希望对你有一定的参考价值。
一个页面里有多个FORM，怎么传嫩？
<html>
<body>
<form name="form1" action="a.php" method="post"></form>
<form name="form2" action="b.php" method="post"></form><form name="form3" action="c.php" method="post"></form>
</body>
</html>
<form name="form1" action="a.php" method="post" target='xxxx'></form>
<IFRAME id='xxxx'name='xxxx' src="" width="220" height="220"></IFRAME>
这是把表单提交重定向到iframe中，页面就不会强制跳转
$(document).ready(function ()
$(function ()
$('form').each(function ()
$(this).submit();
);
);
);本回答被提问者和网友采纳 参考技术B ajax只是模拟表单提交，数据都是通过js组装好再提交各指定的action
页面上的form表单只能通过form的submit()来提交，
多个表单不能同时提交，提交会导致页面跳转，除非设置form标签的target属性，分别指向三个不同的iframe 参考技术C 可以实现。
简单的说，就是在js里控制action的链接和submit。
比如：
document.form['form1'].action='xxxxx';
document.form['form1'].submit();
只是举个例子，代码不一定正确。
ajax()使用serialize()提交form表单
jQuery的serialize()方法通过序列化表单值，创建URL编码文本字符串，我们就可以选择一个或多个表单元素，也可以直接选择form将其序列化，如：
<form id="form">
<ul class="register_content_right_form_one">
<li id="register_content_on" style="margin-top: 16px;">
<input type="text" name="mobileNumber" id="register_one" placeholder="请输入您的手机号 " style="width:260px;" onfocus="mobileHnit()" onblur="validMobile()" onkeyup="validMobile()">
<div class="register_username"></div>
</li>
<p class="register_phone_number error_msg"></p>
<li id="register_content_on_te" style="position: relative;" >
<input type="text" name="phoneCode" placeholder="请输入验证码 " id="register_three" value="" onblur="validPc(),getPhoneCode();" onkeyup="validPc()" onfocus="pcHnit()">
<span class="register_dis">
<a href="javascript:;" onclick="getVerifyCode(this);">获取验证码</a>
</span>
<div class="register_yanzheng"></div>
</li>
<p class="register_phone_number_yanzheng error_msg"></p>
<li id="register_content_on">
<span id="dpwd22" onclick="this.style.display=‘none‘;document.getElementById(‘dpwd‘).style.display=‘block‘;document.getElementById(‘dpwd‘).focus().select();">请输入密码 </span>
<input name="loginPassword" type="password" id="dpwd" style="display:none;" onblur="validPassword()" onkeyup="validPassword()" onfocus="passwordHnit()"/>
<div class="register_passwords"></div>
</li>
<p class="register_password error_msg"> </p>
<li id="register_content_on">
<span id="dpw22" onclick="this.style.display=‘none‘;document.getElementById(‘dpw‘).style.display=‘block‘;document.getElementById(‘dpw‘).focus().select();">再次输入密码 </span>
<input name="passwordSecond" type="password" id="dpw" style="display:none;" onblur="validPassword2()" onkeyup="validPassword2()" onfocus="password2Hnit()"/>
<div class="register_passwords"></div>
</li>
<p class="register_password_ag error_msg"> </p>
</ul>
<ul class="register_content_right_form_two">
<li style="font-size: 14px;height:35px;height:40px\9;">
<p id="register_xuanzhuan_btn" class="register_xuanzhuan_btn"> 我有邀请码
<span class="register_xuanzhuan">
<img src="${ctxStatic}/images/zc_311.jpg">
</span>
</p>
</li>
<li id="register_content_on_two">
<input type="text" name="invitationCode" value="${invitationCode}" class="register_yaoqing" style="width:260px;">
<div class="register_yaoqing_img"></div>
</li>
<li style="height: 30px;">
<input type="checkbox" checked="false" id="check">
<span style="color: #666;font-size: 14px;">我已阅读并同意 <a style="color: #05b38b;cursor:pointer;" href="/regAgree" target="_blank">《注册协议》</a></span>
<div class="register_check"></div>
</li>
<p class="register_checkbox" style="height:15px;width: 333px;margin:0 auto;"></p>
<li id="register_button" readonly style="margin-top: 8px;">
<p style="cursor: pointer;">马上注册</p>
</li>
</ul>
</form>
这样，我们就可以把序列化的值传给ajax()作为url的参数，轻松使用ajax()提交form表单了，而不需要一个一个获取表单中的值然后传给ajax()，举例如下：
function register(){
$.ajax({
url:‘${ctx}/register‘,
data:$(‘#form‘).serialize(),
type:‘post‘,
success:function(data){}
}
});
}
以上是关于Jquery AJAX提交多个FORM表单的主要内容，如果未能解决你的问题，请参考以下文章
使用JQuery的ajax提交表单能否使用一个变量来获取form的id
jQuery ajax()使用serialize()提交form数据
jQuery ajax()使用serialize()提交form数据