首页 > 代码库 > ajax()使用serialize()提交form表单
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="http://www.mamicode.com/${ctxStatic}/images/zc_311.jpg">
</span>
</p>
</li>
<li id="register_content_on_two">
<input type="text" name="invitationCode" value="http://www.mamicode.com/${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="http://www.mamicode.com/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){}
}
});
}
ajax()使用serialize()提交form表单