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. 一句话知识:如何解决winform自动缩放产生的布局问题.

    转自http://www.cnblogs.com/KenBlove/articles/1281823.html有时候你会发现本来好好的WinForm程序在别的机器上显示的尺寸就不对了.这些问题主要发生 ...

  2. We refined export to Excel for SharePoint

    http://sysmagazine.com/posts/208948/ http://sharepointwikipedia.blogspot.kr/2013/05/export-to-spread ...

  3. 列表屏幕(List Screen)

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  4. JS判断用户手机是IOS还是Android

    $(function () { var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.indexOf(' ...

  5. android 性能分析案例

    本章以实际案例分析在android开发中,性能方面的优化和处理.设计到知识点有弱引用,memory monitor,Allocation Tracker和leakcanary插件. 1.测试demo ...

  6. Linux挂载卸载光盘&实践

    在Linux下有时候需要挂载光盘,拷贝文件或安装系统,例如拷贝Redhat操作系统镜像文件等.下面介绍一下在Linux系统下挂载.卸载光盘的方法. 在Linux系统中,每一个物理设备都可以看做是一个文 ...

  7. js 输出二维数组的最大值

    function num(arr){ max=a[0][0]; for (var i = 0; i < a.length; i++) { for (var j = 0; j< a[i].l ...

  8. C/S打包 客户端/windows程序 InstallShield

    开发完成后,我们可以直接在Debug目录下启动exe,运行程序. 但是,要如何安装,添加到开始菜单.桌面快捷方式.任务栏等.如Office安装效果: 开始菜单: 快捷菜单: 打包步骤: 1.下载Ins ...

  9. stm32 UART串口

    void USART1_IRQHandler(void) //´®¿Ú1ÖжϷþÎñ³ÌÐò { u8 Res; #ifdef OS_TICKS_PER_SEC //Èç¹ûʱÖÓ½ÚÅÄÊý¶ ...

  10. 【转】What is an SDET

    What is an SDET? SDET stands for Software Development Engineer in Test (or Software Design Engineer ...