jQuery之Ajax--快捷方法

时间 2019-11-10

原文原文链接

1.ajax的快捷方法能够帮咱们用最少的代码发送ajax请求。javascript

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

参数名称	类型	说明
url	String	请求的HTML页的URL地址
data（可选）	Object	发送至服务器的key/value数据会做为QueryString附加到请求URL中
callback（可选）	Function	载入成功时回调函数（只有当Response的会犯状态时success才调用css 该方法）自动将请求结果和状态传递给该方法html
type（可选）	String	服务器端返回内容的格式，包括xml,html,script,json,text和_default

代码展现：java

$.get("test.php",
   function(data){
     $('body').append( "Name: " + data.name ) // John
              .append( "Time: " + data.time ); //  2pm
   }, "json");

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

GET请求会将参数跟在URL后进行传递，而POST请求则是做为HTTP消息的实体内容发送给Web服务器。固然，在Ajax请求中，这种区别对用户是不可见的。
GET方式对传输的数据有大小限制（一般不能大于2KB），而使用POST方式传递的数据量要比GET方式大得多（理论上不受限制）。
GET方式请求的数据会被浏览器缓存起来，所以其余人就能够从浏览器的历史记录中读取到这些数据，例如帐号和密码等。在某种状况下，GET方式会带来严重的安全性问题，而PODT方式相对来讲就能够避免这些问题。

GET方式和POST方式传递的数据在服务器端的获取页不相同。在PHP中，GET方式的数据能够用$_GET[]获取，而POST方式能够用$_POST[]获取。两种方式均可以用$_REQUEST[]来获取。

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

<!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] )。方法参数解释见下表json

参数名称	类型	说明
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>