ajax()使用serialize()提交form表单

Posted 2020-08-09

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