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

时间: 2024-12-26 00:34:37

ajax()使用serialize()提交form表单的相关文章

DEDE使用AJAX无刷新提交Form表单,PHP返回结果

$query = "INSERT INTO `{$diy->table}` (`id`, `ifcheck` $addvar)  VALUES (NULL, 0 $addvalue); "; 引入phpmailer 添加以下代码: /*发送邮件*/ $addvalue_ary = explode(',', $addvalue); //因为DEDE是将所有表单数据提交过来,所以这里需要分隔一下. $addvar_ary = array( 1 => '称呼', 2 =>

Jquery通过Ajax方式来提交Form表单简单实例

因工作中有时会用到ajax,但一般也都写成函数的形式了,再写底层时还要去查资料,这里小记一下ajax的小实例以后不用经常去查了 $.ajax({ type:"POST", url: "要提交的地址", data:{"para":1,"para1":2,...}, dataType:"json",/*要提交的类型*/ success:function(val){/*返回值可以是数组,val['name']*/

jquery的ajax提交form表单方式总结

方法一: function AddHandlingFeeToRefund() { var AjaxURL= "../OrderManagement/AjaxModifyOrderService.aspx"; alert($('#formAddHandlingFee').serialize()); $.ajax({ type: "POST", dataType: "html", url: AjaxURL + '?Action=' + 'Submit

ajax提交form表单资料详细汇总

一.ajax提交form表单和不同的form表单的提交主要区别在于,ajax提交表单是异步提交的,而普通的是同步提交的表单.通过在后台与服务器进行少量数据交换,ajax 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新.传统普通的网页(不使用ajax)如果需要更新内容,必须重载整个网页页面. 二.通过ajax提交form实现的登录实例: <body> <h1 align="center">用户登录</h1> &

使用ajax提交form表单,包括ajax文件上传 转http://www.cnblogs.com/zhuxiaojie/p/4783939.html

使用ajax提交form表单,包括ajax文件上传 前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },"json"); 又或者是这样的ajax $.ajax({ url:"${pageContext.request.contextPath}/public/testupload", type:"post", data:{username:username},

通过php jq ajax 提交form表单

参考http://www.php100.com/html/webkaifa/PHP/PHPyingyong/2013/0619/13568.html html <div id="contact_form"> <form name="contact" method="post" > <label for="name" id="name_label">姓名</label

AJAX PHP无刷新form表单提交的简单实现(推荐)

下面小编就为大家带来一篇AJAX PHP无刷新form表单提交的简单实现(推荐).小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 ajax.php <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head>

AJAX提交form表单带文件上传

过了三天才想要写博客,这样不好,要改正 在做毕设的时候,用户发帖涉及到了文件上传的问题,在这里记录一下 背景: 在用户发帖的时候,用户只想发表文字postText,还有些用户想在发表postText的同时还发表一些图片,如何做? 上代码 不写的太细了,和流水账似的,挑重点记录一下. 1.前台的文件上传 本来想用form表单直接上传了,但是form提交时会刷新整个页面,但这不是我想要的,所以使用了ajax提交form表单. 利用ajax提交表单需要用到jquery.form.js这个包,网上有很多

ajax(ajaxSubmit)提交form表单

ajaxSubmit提交form表单 依赖脚本: 1 <script src="<%=request.getContextPath()%>/huangdao/jquery/jquery-form.js" type="text/javascript"></script> HTML 1 <form id="saveForm" name="form01" class="demofo