<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <title>Insert title here</title>

     <script type="text/javascript" src="../js/jquery-1.4.2.js"></script>

     <script type="text/javascript">

         $(document).ready(function(){

             $("#ajaxbutton").click(function(){

                 //表单序列化 他返回的是字符串

                 //var data = $("#form1").serialize();

                 //序列化成三个数据对象

                 var data = $("#form1").serializeArray();

                 alert(data);//alert:只能打印字符串，数字，并不能打印很全面信息

                 console.info(data);

                 //输出数组

                 for(var i=0;i<data.length;i++){

                     alert(data[i].name+" : "+data[i].value);

                 }

                 var option ={

                     "url" :"/jquery_day02/FormServlet",

                     "data":data,

                     "type":"POST",

                     "success":function(data){

                         //用于接受服务器响应的数据

                     }

                 };

                 $.ajax(option);

             });

         }); 

     </script>

 </head>

 <body>

     <h3>表单</h3>

     <form id="form1">

         <table border="1" >

             <tr id="tr1">

                 <td class=""><label>姓名</label></td>

                 <td><input type="text" name="username"  value="jack" /></td>

             </tr>

             <tr>

                 <td class=""><span>密码</span></td>

                 <td><input type="password" name="password" value="1234" /></td>

             </tr>

             <tr>

                 <td><input type="button"  value= "异步提交表单"  id="ajaxbutton"/></td>

             </tr>

         </table>

     </form>

     <h3>公告信息</h3>

     <div>

         未满18慎进

     </div>

 </body>

 </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. ELK日志套件安装与使用

    1.ELK介绍     ELK不是一款软件,而是elasticsearch+Logstash+kibana三款开源软件组合而成的日志收集处理套件,堪称神器.其中Logstash负责日志收集,elast ...

  2. UI --UIView 及其子类

    一 > UIView  1> iOS 概述: iOS 是 Apple 公司的移动操作系统,主要用于iPhone, iPad, iPad Mini , iPod Touch 等移动产品. 借 ...

  3. 摆脱printf的噩梦

    众所周知,printf是一个方便.直观.易写.变长参数的打印函数,但它有一个致命的缺陷,如下的语句将导致程序出现严重的运行时错误: printf("%s", 1); 然后程序中断, ...

  4. 个人C++学习路线

    这段时间学习<<C++ primer >> 第四版,一边学一遍考虑,要怎么样往深处学习.查了网上的学习路线,知乎大神的问题回答,整理了一下思路,如下吧: <<C++ ...

  5. 容斥原理及SQL in关键字在EF中的应用

    突然意识到文字的重要性,于是开始写了第一个篇博客,博客目的紧紧为记录,以便温故. 同时也希望抛砖能达到引玉的作用,欢迎各位来发表自己的感想与想法,以此达到相互学习促进! 背景: 在做百度地图电子围栏的 ...

  6. 感知机和线性单元的C#版本

    本文的原版Python代码参考了以下文章: 零基础入门深度学习(1) - 感知器 零基础入门深度学习(2) - 线性单元和梯度下降 在机器学习如火如荼的时代,Python大行其道,几乎所有的机器学习的 ...

  7. Python（五）编程小实例

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

  8. Apache无法启动原因

    Apache不能启动解决办法 作者的话:遇到这个问题的时候,从网上找了很多资料,结果都是让我这个新手摸不着头绪 还好,在我长时间的查找下,还是找到了一篇文章,解决了我的烦恼,下面是我对这个文章的一些对 ...

  9. 解决！同一ajax请求获取的图片路劲，在谷歌浏览器能正确展示图片，在火狐浏览器则显示路径undefined

    今天的工作学习之路是解决了昨天的问题,可看我昨天的随笔了解问题. 非常感谢昨天各位积极地解答,在此我引用 @不带汽的可乐 的方法进行解决,问题其实挺简单就解决了,先说说原因,在火狐浏览器中,当我在js ...

  10. 使用 POJO 对象绑定请求参数

    概述 Spring MVC 会按请求参数名和 POJO 属性名进行自动匹配,自动为该对象填充属性值并且支持级联属性.这一特性在日常开发过程中使用频率比较高,开发效率也高,本文主要对 POJO 对象绑定 ...