首页 > 代码库 > 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表单