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. Android获取服务器Json字符串并显示在ListView上面

    已经好久没有更新博客,今天终于有新的东西可以记录了. 通过这次的任务学习到了以前没有注意到的知识点,真的有种书读百遍,其义自见的感觉.这次又重新认识了<Handler消息机制原理>.这次的 ...

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

    一:NSString与NSInteger的互换 NSInteger转化NSString类型:[NSString stringWithFormat: @"%d", NSInteger ...

  3. iOS 学习 - 21 系统自带解析 XML

    准备工作: new -> file -> other -> Empty ,在 Save As: 中随便起个名字后缀为 .xml 拷贝下面 <person> <stu ...

  4. iOS 9.3真机适配-Could not find Developer Disk Image问题

    Could not find Developer Disk Image 这是由于真机系统过高或者过低,Xcode中没有匹配的配置包文件,我们可以通过这个路径进入配置包的存放目录: /Applicati ...

  5. CSS3 text-shadow

    <!DOCTYPE html > <html > <head> <meta charset="utf-8"> <title&g ...

  6. EditText的inputType常用取值

    最近经过实际试验,总结了InputType几个常用取值表示的含义: 1.none, text, textVisiblePassword: 无任何输入限制 2.textMultiLine: 允许多行输入 ...

  7. 【转】Hive内部表、外部表

    hive内部表.外部表区别自不用说,可实际用的时候还是要小心. 1. 内部表: create table tt (name string , age string) location '/input/ ...

  8. 删除Windows中隐藏的物理网卡和网络虚拟化失败后的虚拟网卡

    Windows环境下,在更换硬件服务器主板和网卡等硬件.恢复操作系统或者网络虚拟化失败后,可能会出现网卡方面的问题.例如,设备管理器中多了不应该存在的网卡:因命名冲突无法重命名当前网络连接:IP地址冲 ...

  9. linux 排序命令sort

    sort [选项] [文件] 选项: -b:忽略每行前面开始出的空格字符: -c:检查文件是否已经按照顺序排序: -d:排序时,处理英文字母.数字及空格字符外,忽略其他的字符: -f:排序时,将小写字 ...

  10. spring的路径通配符

    Spring提供了强大的Ant模式通配符匹配,从同一个路径能匹配一批资源. Ant路径通配符支持"?"."*"."**",注意通配符匹配不包 ...