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. html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  2. C++的单例模式与线程安全单例模式（懒汉/饿汉）

    1 教科书里的单例模式 我们都很清楚一个简单的单例模式该怎样去实现:构造函数声明为private或protect防止被外部函数实例化,内部保存一个private static的类指针保存唯一的实例,实 ...

  3. mysql 基本

    mysql -u root -p 输入密码进入数据库 show database; 查询当前库 use databasename 切换到某个库 show tables; 列出当前数据库的表 desc ...

  4. vim添加代码折叠功能

    用空格或者za命名改变,添加如下到vimrc文件 " Enable folding set foldmethod=indent set foldlevel=99 " Enable ...

  5. [分享] 很多人手机掉了，却不知道怎么找回来。LZ亲身经历讲述手机找回过程，申请加精！

    文章开头:(LZ文笔不好,以下全部是文字描述,懒得配图.因为有人说手机掉了,他们问我是怎么找回来的.所以想写这篇帖子.只不过前段时间忙,没时间.凑端午节给大家一些经验) 还是先谢谢被偷经历吧!5月22 ...

  6. Linux 克隆虚拟机引起的“Device eth0 does not seem to be present, delaying initialization”

    虚拟机Vmware上克隆了一个Red Hat Enterprise Linx启动时发现找不到网卡,如下所示,如果你在命令窗口启动网络服务就会遇到"Device eth0 does not s ...

  7. [转载]了解Linux的进程与线程

    本文转自Tim Yang的博客http://timyang.net/linux/linux-process/ .对于理解Linux的进程与线程非常有帮助.支持原创.尊重原创,分享知识! 上周碰到部署在 ...

  8. SQL Server：触发器详解

    1. 概述 触发器是一种特殊的存储过程,它不能被显式地调用,而是在往表中插入记录﹑更新记录或者删除记录时被自动地激活. 所以触发器可以用来实现对表实施复杂的完整性约束. 2. 触发器的分类 SQL S ...

  9. C#：结构

    1. 简单示例 // 定义结构 public struct Person { public string name; public int age; } class Program { static ...

  10. mongo学习笔记（一）：增删改查

    安装:我是按这篇来弄的 一.Insert 1.db.person.insert({"name":"jack","age":20}) 2.va ...