您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生

08-注册功能_前台_异步提交表单(jquery的serialize与ajax及post方法)

发布时间：2022-10-15 18:01:56编辑：雪饮阅读（）

jquery的serialize方法可以将一个表单中所有表单元素序列化为http请求的键值对集合

比如如下表单

<form id="registerForm" action="user">

                                          <!--提交处理请求的标识符-->

                                          <input type="hidden" name="action" value="register">

                                       <table style="margin-top: 25px;">

                                              <tbody><tr>

                                                     <td class="td_left">

                                                            <label for="username">用户名</label>

                                                     </td>

                                                     <td class="td_right">

                                                            <input type="text" id="username" name="username" placeholder="请输入账号" style="border: 1px solid red;">

                                                     </td>

                                              </tr>

                                              <tr>

                                                     <td class="td_left">

                                                            <label for="password">密码</label>

                                                     </td>

                                                     <td class="td_right">

                                                            <input type="text" id="password" name="password" placeholder="请输入密码">

                                                     </td>

                                              </tr>

                                              <tr>

                                                     <td class="td_left">

                                                            <label for="email">Email</label>

                                                     </td>

                                                     <td class="td_right">

                                                            <input type="text" id="email" name="email" placeholder="请输入Email">

                                                     </td>

                                              </tr>

                                              <tr>

                                                     <td class="td_left">

                                                            <label for="name">姓名</label>

                                                     </td>

                                                     <td class="td_right">

                                                            <input type="text" id="name" name="name" placeholder="请输入真实姓名">

                                                     </td>

                                              </tr>

                                              <tr>

                                                     <td class="td_left">

                                                            <label for="telephone">手机号</label>

                                                     </td>

                                                     <td class="td_right">

                                                            <input type="text" id="telephone" name="telephone" placeholder="请输入您的手机号">

                                                     </td>

                                              </tr>

                                              <tr>

                                                     <td class="td_left">

                                                            <label for="sex">性别</label>

                                                     </td>

                                                     <td class="td_right gender">

                                                            <input type="radio" id="sex" name="sex" value="男" checked=""> 男

                                                            <input type="radio" name="sex" value="女"> 女

                                                     </td>

                                              </tr>

                                              <tr>

                                                     <td class="td_left">

                                                            <label for="birthday">出生日期</label>

                                                     </td>

                                                     <td class="td_right">

                                                            <input type="date" id="birthday" name="birthday" placeholder="年/月/日">

                                                     </td>

                                              </tr>

                                              <tr>

                                                     <td class="td_left">

                                                            <label for="check">验证码</label>

                                                     </td>

                                                     <td class="td_right check">

                                                            <input type="text" id="check" name="check" class="check">

                                                            <img src="checkCode" height="32px" alt="" onclick="changeCheckCode(this)">

                                                               <script type="text/javascript">

                                                                      //图片点击事件

                                                                      function changeCheckCode(img) {

                                                                             img.src="checkCode?"+new Date().getTime();

                                        }

                                                               </script>

                                                     </td>

                                              </tr>

                                              <tr>

                                                     <td class="td_left">

                                                     </td>

                                                     <td class="td_right check">

                                                               <button onclick="serailzeTest()">测试</button>

                                                            <input type="submit" class="submit" value="注册">

                                                               <span id="msg" style="color: red;"></span>

                                                     </td>

                                              </tr>

                                       </tbody></table>

                                </form>

序列化后结果如：

action=register&username=&password=&email=&name=&telephone=&sex=%E7%94%B7&birthday=&check=

这是如果是该数据看起来像是get那种地址栏上面请求的数据，实际上jquery应该是对其的post方法或者ajax的method为post时候有兼容这种传统的简直对格式。

所以如下的post方法和ajax的method为post的这个实例是可行的

function serailzeTest(){
   var seralize_data=$("#registerForm").serialize();
   console.log("seralize_data seralize_data:",seralize_data);
   $.post("registUserServlet",seralize_data,function(result,status,xhr){
      console.log("seralize_data result:",result);
   });
   $.ajax({
      url:"registUserServlet",
      data:seralize_data,
      method:'post',
      success:function(data){

      },
      error:function(xhr,status,error){
         console.log("p2",p2);
      }
   });
}