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. Inplace Search on document libraries and lists is not working

    [http://sharepointfarmer.com/inplace-search-on-document-libraries-and-lists-is-not-working/] I ran i ...

  2. ThinkPHP实现对数据库的增删改查

    好久都没有更新博客了,之前老师布置的任务总算是现在可以说告一段落了,今天趁老师还没提出其他要求来更新一篇博客. 今天我想记录的是我之前做项目,自己所理解的ThinkPHP对数据库的增删改查. 首先要说 ...

  3. Android常用英文词汇不为命名纠结

        ANR  (Application Not Response )  bundle 捆, entire 整个的,完整的 lifetime 生命周期 entire lifetime 完整生命周期 ...

  4. footer置底

    html代码: <div class="container"> <div cass="header"></div> < ...

  5. React Native 红屏之Could not connect to development server.

    React Native 是目前最火的开发框架,其他不说了,上Bug. 按照  React Native iOS环境搭建 高级版 在mac上  搭建 React Native  环境,运行 项目 若出 ...

  6. Ubuntu16.04LTS国内快速源

    一.源文件位置 备份并替换/etc/apt/sources.list的源内容: 二.更改源文件内容 sudo vi /etc/apt/sources.list deb http://mirrors.a ...

  7. 微软源代码管理工具TFS2013安装与使用详细图文教程(Vs2013)

    这篇文章联合软件小编主要介绍了微软源代码管理工具TFS2013安装与使用图文教程,本文详细的给出了TFS2013的安装配置过程.使用教程,需要的朋友可以参考下 最近公司新开发一个项目要用微软的TFS2 ...

  8. Linux iptables配置错误导致ORA-12535 & ORA-12170

    实验环境:       操作系统  : Red Hat Enterprise Linux Server release 5.7 (Tikanga)       数据库版本: Oracle Databa ...

  9. 初探ansible安装

    一.ansible介绍常用的自动化运维工具 Puppet —基于 Ruby 开发,采用 C/S 架构,扩展性强,基于 SSL,远程命令执行相对较弱SaltStack —基于 Python 开发,采用 ...

  10. 设计模式C#实现（十三）——享元模式（蝇量模式）

    意图 0 适用性 1 结构 2 实现 3 效果 4 参考 5 意图 运用共享技术有效地支持大量细粒度的对象. 适用性 当以下情况都成立时使用: 一个程序使用了大量的对象 完全由于使用大量对象造成很大存 ...