1.  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2.  <html>
  3.  <head>
  4.  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.  <title>Insert title here</title>
  6.      <script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
  7.      <script type="text/javascript">
  8.          $(document).ready(function(){
  9.              $("#ajaxbutton").click(function(){
  10.                  //表单序列化 他返回的是字符串
  11.                  //var data = $("#form1").serialize();
  12.                  //序列化成三个数据对象
  13.                  var data = $("#form1").serializeArray();
  14.                  alert(data);//alert:只能打印字符串，数字，并不能打印很全面信息
  15.                  console.info(data);
  16.                  //输出数组
  17.                  for(var i=0;i<data.length;i++){
  18.                      alert(data[i].name+" : "+data[i].value);
  19.                  }
  20.                  var option ={
  21.                      "url" :"/jquery_day02/FormServlet",
  22.                      "data":data,
  23.                      "type":"POST",
  24.                      "success":function(data){
  25.                          //用于接受服务器响应的数据
  26.                      }
  27.  
  28.                  };
  29.  
  30.                  $.ajax(option);
  31.              });
  32.          }); 
  33.  
  34.      </script>
  35.  
  36.  </head>
  37.  <body>
  38.      <h3>表单</h3>
  39.      <form id="form1">
  40.          <table border="1" >
  41.              <tr id="tr1">
  42.                  <td class=""><label>姓名</label></td>
  43.                  <td><input type="text" name="username"  value="jack" /></td>
  44.              </tr>
  45.              <tr>
  46.                  <td class=""><span>密码</span></td>
  47.                  <td><input type="password" name="password" value="1234" /></td>
  48.              </tr>
  49.              <tr>
  50.                  <td><input type="button"  value= "异步提交表单"  id="ajaxbutton"/></td>
  51.              </tr>
  52.  
  53.          </table>
  54.      </form>
  55.  
  56.      <h3>公告信息</h3>
  57.      <div>
  58.          未满18慎进
  59.      </div>
  60.  
  61.  </body>
  62.  </html>

表单的序列化ajax的更多相关文章

  1. Form表单提交，Ajax请求，$http请求的区别

    做过前端同学想必都避免不了要和后台server打交道.而以下这三种与后台交互的方式想必大家都不陌生. Form表单提交,Ajax请求,Angular的$http请求 以前一直搞不清楚什么时候应该用哪种 ...

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

    使用ajax提交form表单,包括ajax文件上传 前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },&qu ...

  3. 使用ajax提交form表单，包括ajax文件上传【转载】

    [使用ajax提交form表单,包括ajax文件上传] 前言 转载:作者:https://www.cnblogs.com/zhuxiaojie/p/4783939.html 使用ajax请求数据,很多 ...

  4. 第一百八十六节，jQuery，验证表单插件，Ajax 表单插件，验证和提交表单

    jQuery,验证表单插件,Ajax 表单插件,验证和提交表单 HTML <form id="reg" method="post" action=&quo ...

  5. form表单提交与ajax消息传递

    form表单提交与ajax消息传递 1.前后端传输数据编码格式contentType: urlencoded 对应的数据格式:name=xxx&password=666 后端获取数据:requ ...

  6. 关于ajax提交表单参数序列化和时间戳转换

    ajax提交form表单, 序列化表单的参数 //var a = $("#addfm").serialize(); //将表单的内容序列化成为一个字符串 var a = $(&qu ...

  7. 另类的表单数据"序列化"

    背景:最近在做项目时,由于编辑页面需要提交的数据量有些多,而且在提交前还需要做一些逻辑处理,所以如果按照正常的方式,一个个的获取值然后拼接json对象传到后台的话相对工作量较大,而且容易出错,后期的维 ...

  8. 使用ajax提交form表单，包括ajax文件上传

    前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },"json"); 又或者是这样的aja ...

  9. JavaScript之form表单的序列化和json化[form.js]

    一.应用场景 form提交时,使用ajax提交. 二.效果 通过本工具,实现表单所有form的快速序列化和json化,使前端人员在ajax提交form表单的时,脱离重复性的,大劳动量的手动抽取form ...

随机推荐

  1. TypeScript设计模式之单例、建造者、原型

    看看用TypeScript怎样实现常见的设计模式,顺便复习一下. 单例模式 Singleton 特点:在程序的生命周期内只有一个全局的实例,并且不能再new出新的实例. 用处:在一些只需要一个对象存在 ...

  2. 重新认识JavaScript

    JavaScrpit在我眼中一直是web前端脚本语言,而这段时间的一些工作,让我对JavaScript有了一个全新的认识. 公司准备启动的一个手游项目,服务器端准备使用网易的开源框架pomelo.po ...

  3. Struts2学习笔记⑦

    今天我宛若一个智障- Struts2学的差不多了,今天开始做数据库CURD操作的案例,发现模型驱动一直报NullPointerException异常-.我的妈,我查了半天觉得没啥问题,把关注点放在了g ...

  4. 记录Winform开发过程中遇到的情况

    前两天开发了个Winform操作Excel和数据库的一个小程序,把Winform的一些东西又给捡了起来,当中又学到了一些新的东西,特来写出来留作纪念. 一.CSKIN美化框架的使用 刚开始做的时候,发 ...

  5. Python（五）编程小实例

    Python(五)编程小实例 抓取网页信息,并生成txt文件内容! Python抓取网页技能--Python抓取网页就是我们常看见的网络爬虫,我们今天所要用到的就是我们Python中自带的模块,用这些 ...

  6. android 透明状态栏方法及其适配键盘上推（一）

    android的状态栏(statusBar)版本的差异化比较大.在android 4.4 以上和5.x可以设置状态栏背景颜色,但是不可以设置状态栏中字和图标的颜色.而系统默认的statusbar的字体 ...

  7. php+apache+mysql的安装

    1.LAMP的安装顺序问题,现在是默认安装好了Linux系统,我的版本是Ubuntu 12.04.一般来说比较建议的顺序是Mysql Apache 最后安装PHP,在我实践下来 Apache和Mysq ...

  8. spring boot gradle build：bootRepackage failed

    When running 'gradle clean build' on my spring boot project (version 1.3.6.RELEASE) on windows 10 (a ...

  9. Butter Knife使用详解

    Butter Knife Github地址: https://github.com/JakeWharton/butterknife 官方说明给出的解释是 Bind Android views and ...

  10. jsp页面中从forEach里向action里面传递其中的一个对象

    <c:forEach var="user" items="${users }"> <form action="user_update ...