<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <title></title>

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

  <!--   引入jQuery -->

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

 <script type="text/javascript">

 //<![CDATA[

     $(function(){

           var obj={a:1,b:2,c:3};

         var  k  = $.param(obj);   //$.param()是serialize（）方法的核心，用来对一个数组或者对象按照key/value进行序列化

         alert(k)        // 输出  a=1&b=2&c=3

     })

 //]]>

 </script>

 </head>

 <body>

 </body>

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

 <!--   引入jQuery -->

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

   <script type="text/javascript">

   $(function(){

         var fields = $("select,:checkbox,:radio").serializeArray();
　　　　　　//serializeArray()改方法返回的不是字符串，而是将DOM元素序列化后，返回json格式的数据

         //console.log(fields)

         $.each( fields, function(i, field){

          $("#results").append( " i:" + i + "  value:" + field.value + " , ");

        });

   })

   </script>

<p id="results"><b>结果：</b> </p>

<input type="checkbox" name="check" value="1" checked/>篮球<br/>

<input type="checkbox" name="check" value="2" checked/>足球<br/>

<input type="checkbox" name="check" value="3" checked/>乒乓球<br/>

<input type="checkbox" name="check" value="4" />羽毛球<br/>

<input type="radio" name="radio" value="1" checked/>篮球<br/>

<input type="radio" name="radio" value="2" />足球<br/>

<input type="radio" name="radio" value="3" />乒乓球<br/>

<input type="radio" name="radio" value="4" />羽毛球<br/>
serializeArray处理后的数据fields：


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head runat="server">

 <title></title>

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

 <style>

 * { margin:0; padding:0;}

 body { font-size:12px;}

 .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}

 .comment h6 { font-weight:700; font-size:14px;}

 .para { margin-top:5px; text-indent:2em;background:#DDD;}

 </style>

  <!--   引入jQuery -->

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

 <script language="javascript" >

     $(function(){

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

             $.get("get3.jsp", {

                         username :  encodeURI( $("#username").val() ) , 
                                     //用字符串方式时，需要注意对字符编码（中文问题），如果不希望编码带来的麻烦，也可以使用serialize（）方法，他会自动编码

                         content :   encodeURI( $("#content").val() )

                     }, function (data, textStatus){

                         var username = data.username;

                         var content = data.content;

                         username =  decodeURI(username);

                         content = decodeURI(content);

                         var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";

                         $("#resText").html(txtHtml); // 把返回的数据添加到页面上

                     },"json");

        })

     })

 </script>

 </head>

 <body>

 <form id="form1">

 <p>评论:</p>

  <p>姓名: <input type="text" name="username" id="username" /></p>

  <p>内容: <textarea name="content" id="content" ></textarea></p>

  <p><input type="button" id="send" value="提交"/></p>

 </form>

 <div  class='comment'>已有评论：</div>

 <div id="resText" >

 </div>

 </body>

 </html> 
 

jquery与ajax应用的更多相关文章

  1. jQuery之ajax实现篇

    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...

  2. 【原创经验分享】JQuery（Ajax）调用WCF服务

    最近在学习这个WCF,由于刚开始学 不久,发现网上的一些WCF教程都比较简单,感觉功能跟WebService没什么特别大的区别,但是看网上的介绍,就说WCF比WebService牛逼多少多少,反正我刚 ...

  3. jQuery版AJAX简易封装

    开发过程中,AJAX的应用应该说非常频繁,当然,jQuery的AJAX函数已经非常好用,但是小编还是稍微整理下,方便不同需求下,可以简化输入参数,下面是实例代码: $(function(){ /** ...

  4. JS原生ajax与Jquery插件ajax深入学习

    序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...

  5. 重写jquery的ajax方法

    //首先备份下jquery的ajax方法 var _ajax=$.ajax; //重写jquery的ajax方法 $.ajax=function(opt){ //备份opt中error和success ...

  6. Jquery通过Ajax方式来提交Form表单

    今天刚好看到Jquery的ajax提交数据到服务器的方法,原文是: 保存数据到服务器,成功时显示信息. jQuery 代码: $.ajax({ type: "POST", url: ...

  7. 对jquery的ajax进行二次封装以及ajax缓存代理组件：AjaxCache

    虽然jquery的较新的api已经很好用了, 但是在实际工作还是有做二次封装的必要,好处有:1,二次封装后的API更加简洁,更符合个人的使用习惯:2,可以对ajax操作做一些统一处理,比如追加随机数或 ...

  8. jquery管理ajax异步－deferred对象

    今天跟大家分享一个jquery中的对象-deferred.其实早在jquery1.5.0版本中就已经引入这个对象了.不过可能在实际开发过程中用到的并不多,所以没有太在意. 这里先不说deferred的 ...

  9. Struts2 使用jQuery实现Ajax

    在jQuery中将Ajax相关的操作进行封装,使用时只需在合适的地方调用Ajax相关的方法即可,相比而言,使用jQuery实现Ajax更加简洁,方便 1.$.Ajax()可以通过发送Http请求加载远 ...

  10. JQuery中Ajax的操作

    JQuery   Ajax异步操作的方式: $.ajax,$.post, $.get, $.getJSON. 一, $.ajax,这个是JQuery对ajax封装的最基础步,通过使用这个函数可以完成异 ...

随机推荐

  1. 使用C#代码审批/转签K2 Blackpearl流程

    转:http://www.cnblogs.com/dannyli/archive/2011/08/02/2125302.html 以下是使用代码审批.转签k2 blackpearl流程,初探K2 Bl ...

  2. blender2.7.4安装three.js插件

    将three.js-master\utils\exporters\blender\addons 下面的io_three文件夹,拷贝到blender安装目录:blender-2.74-windows64 ...

  3. Linux下的Memcache安装

    Linux下Memcache服务器端的安装服务器端主要是安装memcache服务器端,目前的最新版本是 memcached-1.3.0 .下载:http://www.danga.com/memcach ...

  4. Undefined symbols for architecture armv7

    xcode编译过程中出现如下问题Undefined symbols for architecture armv7:... ld: symbol(s) not found for architectur ...

  5. 嵌入式 详解udev

    如果你使用Linux比较长时间了,那你就知道,在对待设备文件这块,Linux改变了几次策略.在Linux早期,设备文件仅仅是是一些带有适当的属性集的普通文件,它由mknod命令创建,文件存放在/dev ...

  6. cppunit使用详解

    cppunit使用详解 第一步:如何安装 (我的运行环境: fc7 Linux, gcc4)    cppunit 的安装是相当标准的linux的安装过程    a. 下载cppunit的源文件    ...

  7. linux系统中内存爆满之后会如何？

    在使用python写程序的时候,发现一个可以无限迭代的迭代器,从而可以直接将系统中的内存占满,那么占满之后会发生什么呢? 1. 创建无限迭代,生成列表,如下: [root@python ~]# pyt ...

  8. Struts1与Struts2的异同

    1.都是MVC的WEB框架 2.struts1是老牌框架,应用很广泛,有很好的群众基础,使用它开发风险很小,成本更低: struts2虽然基于这个框架,但是应用群众并不多,相对不成熟,未知的风险和变化 ...

  9. 分布式数据库hbase详解

    新霸哥注意到了在人类随着计算机技术的发展,数据的存储量发生了很大的变化,可以用海量来形容,同时,存储的数据类型也是有多种多样的,网页,图片,视频,音频,电子邮件等等,所以在这中情况下以谷歌旗下的Big ...

  10. Wireshark基本介绍及应用tcp

    wireshark介绍 wireshark的官方下载网站: http://www.wireshark.org/ wireshark是非常流行的网络封包分析软件,功能十分强大.可以截取各种网络封包,显示 ...