1.ajax的快捷方法可以帮我们用最少的代码发送ajax请求。

2.　　$.get()方法：使用GET方式来进行异步请求。它的结构为：$.get( url [, data] [, calback] [, type] )

参数名称 类型 说明
url String 请求的HTML页的URL地址
data（可选） Object 发送至服务器的key/value数据会作为QueryString附加到请求URL中
callback（可选） Function

载入成功时回调函数（只有当Response的会犯状态时success才调用

该方法）自动将请求结果和状态传递给该方法
type（可选） String 服务器端返回内容的格式，包括xml,html,script,json,text和_default

　

　

代码展示：

$.get("test.php",

   function(data){

     $('body').append( "Name: " + data.name ) // John

              .append( "Time: " + data.time ); //  2pm

   }, "json");

3.　　$.post()方法：它与$.get()方法的结构和使用方式都相同，不过它们之间仍然有以下区别。

  • GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器。当然，在Ajax请求中，这种区别对用户是不可见的。
  • GET方式对传输的数据有大小限制（通常不能大于2KB），而使用POST方式传递的数据量要比GET方式大得多（理论上不受限制）。
  • GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等。在某种情况下，GET方式会带来严重的安全性问题，而PODT方式相对来说就可以避免这些问题。
  • GET方式和POST方式传递的数据在服务器端的获取页不相同。在PHP中，GET方式的数据可以用$_GET[]获取，而POST方式可以用$_POST[]获取。两种方式都可以用$_REQUEST[]来获取。

　　   例子：用ajax传递一个表单并把结果在一个div中

<!DOCTYPE html>

<html>

<head>

  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

</head>

<body>

  <form action="/" id="searchForm">

   <input type="text" name="s" placeholder="Search..." />

   <input type="submit" value="Search" />

  </form>

  <!-- the result of the search will be rendered inside this div -->

  <div id="result"></div>

<script>

/* attach a submit handler to the form */

$("#searchForm").submit(function(event) {

  /* stop form from submitting normally */

  event.preventDefault();

  /* get some values from elements on the page: */

  var $form = $( this ),

      term = $form.find( 'input[name="s"]' ).val(),

      url = $form.attr( 'action' );

  /* Send the data using post and put the results in a div */

  $.post( url, { s: term },

    function( data ) {

        var content = $( data ).find( '#content' );

        $( "#result" ).empty().append( content );

    }

  );

});

</script>

</body>

</html>

4.　　.load()方法：从服务器载入数据并且将返回的 HTML 代码并插入至匹配的元素中。它的结构为：load( url [, data] [, callback] )。方法参数解释见下表

参数名称 类型 说明
url String 请求HTML页面的URL地址
data（可选） Object 发送至服务器的key/value数据
callback（可选） Function 请求完成时的回调函数，无论请求成功或失败 
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .comment{

                background-color: gainsboro;

            }

        </style>

    </head>

    <body>

        <div class="comment">

            <h4>张三:</h4>

            <p>沙发。</p>

        </div>

        <div class="comment">

            <h4>李四:</h4>

            <p>板凳。</p>

        </div>

        <div class="comment">

            <h4>王五:</h4>

            <p>地板。</p>

        </div>

    </body>

</html>
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

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

        <style type="text/css">

            .container{

                width: 200px;

            }

        </style>

    </head>

    <body>

        <button id="loadTest">Ajax获取</button>

        <div id="container" class="container"></div>

    </body>

    <script type="text/javascript">

        $(function(){

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

                $("#container").load("test.html");//载入html代码

            });

        });

    </script>

</html>

5.　　$.getScript()方法：有时候，在页面初次加载时就取得所需的全部JavaScript文件是完全没有必要的。虽然可以在需要哪个JavaScript文件时，动态地创建<script>标签，但是这种方式并不理想。为此，jQuery提供了$.getScript文件进行处理，JavaScript文件会自动执行。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

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

        <style type="text/css">

            .container{

                width: 200px;

            }

        </style>

    </head>

    <body>

        <button id="loadTest">Ajax获取</button>

        <div id="container" class="container"></div>

    </body>

    <script type="text/javascript">

        $(function(){

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

                $.getScript("js/loadTest.js");//载入js文件

            });

        });

    </script>

</html>
$("#container").load("test.html");//载入html代码

6.　　$.getJSON()方法：使用一个HTTP GET请求从服务器加载JSON编码的数据，与$.getScript()方法的用法相同。

{

"username":"wangganlin",

"password":"123456"

}
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

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

    </head>

    <body>

        <label for="username">用户名：</label><input type="text" id="username"/><br />

        <label for="password">密码：</label><input type="text" id="password"/><br />

        <input type="button" id="getValue" value="获取Json数据" />

    </body>

    <script type="text/javascript">

        $(function(){

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

                $.getJSON('file/test.json',function(data){

                    //data:返回的数据

                    $("input#username").val(data.username);

                    $("input#password").val(data.password);

                })

            })

        })

    </script>

</html>

jQuery之Ajax--快捷方法的更多相关文章

  1. Ajax请求（二）--JQuery的Ajax请求方法

    JQuery库的Ajax请求的几种方法: 1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. 参数含义: url (String ...

  2. jquery的ajax post 方法传值到后台，无法通过HttpServletRequest得到

    今天通过$.ajax({type:"post"});和$.post()方法传值到后台,发现servelet通过HttpServletRequest无法获取到值,但通过get方法却可 ...

  3. JQuery封装ajax的方法

    1.$.post方法 $.post(url[,data][,callback][,type]) url:请求的后台程序地址 data:发送到后台的数据 callback:载入成功时回调函数,该函数参数 ...

  4. Jquery封装ajax

    Jquery封装ajax   Load方法     <!-- 将jquery.js导入进来 -->     <script type="text/javascript&qu ...

  5. Jquery的$.ajax、$.get、$.post发送、接收JSON数据及回调函数用法

    平时研究代码时,经常会遇到AJAX的相关用法,做项目时才真正体会到Ajax的强大之处(与服务器数据交互如此之便捷,更新DOM节点而不用刷新整个页面),以及运用的频繁程度.今天整理了一下自己之前没搞清楚 ...

  6. Bootstrap 使用教程 与jQuery的Ajax方法

    jQuery.ajax(url,[settings]) 更加详细的内容参考    jQuery API 中文在线手册 概述 通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单 ...

  7. JQuery中$.ajax()方法参数详解

    url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 ...

  8. JQuery中$.ajax()方法参数详解 及 async属性说明

    url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 ...

  9. 重写jquery的ajax方法

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

  10. JQuery中$.ajax()方法参数详解（转载）

    url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 ...

随机推荐

  1. ArcGIS JS 学习笔记4 实现地图联动

    1.开篇 守望屁股实在太好玩了,所以最近有点懒,这次就先写个简单的来凑一下数.这次我的模仿目标是天地图的地图联动. 天地的地图联动不仅地图有联动,而且鼠标也有联动,我就照着这个目标进行山寨. 2.准备 ...

  2. IOS开发基础知识--碎片10

    1:如何给表格单元列增加选择时的背影效果 if (cell == nil) { cell = [[UITableViewCell alloc] initWithStyle:UITableViewCel ...

  3. SQL Challenge ——快速找到1-100之间缺失的数

    有个经典的题目:1-100之间的数字(不重复)存放在表里,共95行一列,但是里面缺了5个数字,怎么用SQL最快找出那五个数字. 我们先来看看Oracle数据库如何实现,如下所示,我们先准备测试环境和数 ...

  4. DDD实施经验分享—价值导向、从上往下进行（圈内第一个吃螃蟹DDD实施方案）

    阅读目录: 1.背景 2.从业务开始 3.从战略到战术 4.借助外力推动研发(QA.领导.自动化测试) 5.领域模型与SAAS平台的内核(价值最大化) 6.最后 1.背景 DDD本身的技术就不介绍了, ...

  5. C#--属性详解

    本章讨论属性,它允许源代码用简化语法来调用方法.CLR支持两种属性:无参属性 有参属性.在C#中称有参属性为索引器 无参属性 面向对象设计和编程的重要原则之一就是数据封装,意味着类型的字段永远不应该公 ...

  6. java int与integer的区别

    int与integer的区别从大的方面来说就是基本数据类型与其包装类的区别: int 是基本类型,直接存数值,而integer是对象,用一个引用指向这个对象 1.Java 中的数据类型分为基本数据类型 ...

  7. Android 通过 Intent 传递类对象或list对象

    (转:http://www.cnblogs.com/shaocm/archive/2013/01/08/2851248.html) Android中Intent传递类对象提供了两种方式一种是 通过实现 ...

  8. eclipse svn账号更换

    在eclipse下用 svn的时候,我们习惯将用户名和密码保存.前天公司将svn的账号全部更换了,这时原来的eclipse保存的svn账号密码就失效了.那怎么样才能切换账号了,eclipse svn插 ...

  9. Useful commmands in Gentoo

    Safe way to upgrade: emerge --sync & eix-sync emerge -avuDN --with-bdeps y --keep-going world et ...

  10. 【小白的CFD之旅】09 初识FLUENT

    按黄师姐的推荐,小白回头查找起 FLUENT的资料来.通过网络及图书馆查找相关资料,小白对于FLUENT有了基本的认识. FLUENT是一个CFD软件包,目前隶属于ANSYS公司 目前FLUENT的最 ...