Skip to main content
 首页 » 编程设计

jQuery之Ajax快捷方法

2022年07月19日140jirigala

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>


本文参考链接:https://www.cnblogs.com/wgl1995/p/6235945.html