<!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. c3p0获取连接Connection后的Close()---释疑

    论题: java c3p0获取连接Connnection 之后, 调用 con.close( ) 是否真的关闭了物理连接 ? 简答: c3p0采用连接池, 目的就是提前预置一定数量的连接, 在使用时候 ...

  2. 同一环境下新建Standby RAC库

    需求:在同一个环境下新建Standby RAC库,即和Primary RAC在相同的磁盘组. 说明:生产环境一般不建议这样配置DG,因为存储层面是相同磁盘组,灾备的实际意义不大.我这里是用作读写分离. ...

  3. 基于MAC10.12+MYSQL5.7.17搭建XMPP服务器【黑苹果系统】

    在以前的公司中了解到XMPP可以搭建即时通讯APP.出于好奇自己在空余时间也学了一下搭建XMPP服务器,其中遇到了许多问题,经过坎坷的路程终于搭建成功[这些坎坷的经历主要是由于自己的无知造成的] 下面 ...

  4. Java程序通过代理访问网络

    问题背景 最近工作上有开发爬虫的任务,对目标网站数据进行抓取,由于大部分网站都在国外,无法直接访问,需要通过代理才能登录.爬虫部署的服务器在香港,所以爬虫部署到服务器后,是可以访问目标网站的,但本地开 ...

  5. BigInteger和BigDecimal的练习

    前言: BigInteger用于处理大数据的计算,它继承自java.math.BigInteger.用法相对来说比较简单,掌握几个基本运算即可. 初始化: BigInteger sum=new Big ...

  6. IOS本地日志记录方案

    我们在项目中日志记录这块也算是比较重要的,有时候用户程序出什么问题,光靠服务器的日志还不能准确的找到问题. 现在一般记录日志有几种方式: 1.使用第三方工具来记录日志,如腾讯的Bugly,它是只把程序 ...

  7. gitoschina使用入门

    1 下载git sudo apt-get install git 2 添加公钥:terminal:  ssh-keygen -t rsa -C "git.oschina.net" ...

  8. 重磅消息：微信小程序支持长按二维码进入

    之前微信小程序一般通过以下入口进入: 而用户经常使用“长按二维码”识别应用的功能一直未开放,据酷客多了解,微信安卓6.5.6内测版已经支持长按二维码识别和进入小程序,意味着把小程序二维码分享给朋友,或 ...

  9. (19)IO流之字符流FileReader和FileWriter，缓冲字符流---缓冲输入字符流BufferedReader和缓冲输出字符流BufferedWriter

    字符流,读取的文件是字符的时候,有两个基类一个是Reader,一个是Writer这有点拟人的感觉,人直接看懂的是文字 字符流 字节流:读取的是文件中的二进制字节流并不会帮你转换成看的懂得字符 字符流: ...

  10. JQuery和原生JS跨域加载JSON数据或HTML。

    前提:有时候需要在网页上,加载另一个网站上的数据.或者加载另一个网站上的一个页面.Js的Ajax请求不具备跨域功能,可以使用JQuery来实现. 网页端JS代码: $(function () { $. ...