jQuery - AJAX操作

jQuery - AJAX操作 首页 / jQuery入门教程 / jQuery - AJAX操作

AJAX是异步JavaScript和XML的首字母缩写,该技术可帮助无涯教程从服务器加载数据而无需刷新浏览器页面。

JQuery是一个很棒的工具,它提供了丰富的AJAX方法集来开发下一代Web应用程序。

load()加载数据

使用JQuery AJAX加载任何静态或动态数据非常容易。 jQuery提供 load()()方法来完成工作-

这是 load()()方法的简单语法-

[selector].load( URL, [data], [callback] );

这是所有参数的描述-

  • URL       - 请求发送到的服务器端资源的URL。它可以是CGI,ASP,JSP或PHP脚本,可以动态生成数据或从数据库中生成数据。

  • data        - 此可选参数表示一个对象,其属性被序列化为正确编码的参数,以传递给请求。

  • callback - 在将响应数据加载到匹配集合的元素中之后调用的回调函数。第一个参数是从服务器接收到的响应文本,第二个参数是状态码。

考虑以下带有小的JQuery编码的HTML文件-

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
               $('#stage').load('/jquery/result.html');
            });
         });
      </script>
   </head>
   
   <body>
      <p>Click on the button to load /jquery/result.html file −</p>
      
      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>
      
      <input type = "button" id = "driver" value = "Load Data" />
   </body>
</html>

在这里,load()向指定的URL /jquery/result.html文件发起Ajax请求。 加载此文件后,所有内容将填充在带有ID阶段标签的<div>中。 假设无涯教程的/jquery/result.html文件只有一行HTML行-

<h1>THIS IS RESULT...</h1>

单击给定按钮时,将加载result.html文件。

运行上面代码输出

getJSON获取数据

服务器可能会针对您的请求返回JSON字符串。 jQuery实用工具函数 getJSON()解析返回的JSON字符串,并将所得的字符串作为第一个参数提供给回调函数,以采取进一步的操作。

这是 getJSON()方法的简单语法-

[selector].getJSON( URL, [data], [callback] );

这是所有参数的描述-

  • URL        - 通过GET方法联系的服务器端资源的URL。

  • data         - 一个对象,其属性用作名称/值对,该对象用于构造要附加到URL的查询字符串或预格式化和编码的查询字符串。

  • callback  - 请求完成时调用的函数。将响应主体为JSON字符串后得到的数据值将作为第一个参数传递给此回调,而状态将作为第二个参数传递。

考虑以下带有小的JQuery编码的HTML文件-

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" 
         src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
        
      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
                
               $.getJSON('/jquery/result.json', function(jd) {
                  $('#stage').html('<p> Name: ' + jd.name + '</p>');
                  $('#stage').append('<p>Age : ' + jd.age+ '</p>');
                  $('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
               });
                    
            });
         });
      </script>
   </head>
    
   <body>
      <p>Click on the button to load result.json file -</p>
        
      <div id="stage" style="background-color:#eee;">
         STAGE
      </div>
        
      <input type="button" id="driver" value="Load Data" />
   </body>
</html> 

在这里,JQuery实用程序方法getJSON()()向指定的URL result.json文件发起Ajax请求。 加载此文件后,所有内容将传递给回调函数,该函数最终将填充在标签有ID stage的<div>中。 假设无涯教程的result.json文件具有以下json格式的内容-

{
   "name": "Zara Ali",
   "age" : "67",
   "sex": "female"
}

单击给定按钮时,将加载result.json文件。

无涯教程网

运行上面代码输出

Ajax提交数据

很多时候,您从用户那里收集输入,然后将该输入传递给服务器以进行进一步处理。 jQuery AJAX使使用任何可用Ajax方法的 data 参数将收集的数据传递到服务器变得足够容易。

此示例演示如何将用户输入传递到Web服务器脚本,该脚本将发送回相同的输出,然后将其打印-

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" 
         src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
        
      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
               var name=$("#name").val();
               $("#stage").load('/jquery/result.php', {"name":name} );
            });
         });
      </script>
   </head>
    
   <body>
      <p>Enter your name and click on the button:</p>
      <input type="input" id="name" size="40" /><br />
        
      <div id="stage" style="background-color:cc0;">
         STAGE
      </div>
        
      <input type="button" id="driver" value="Show Result" />
   </body>
</html>

这是用 result.php 脚本编写的代码-

<?php
   if( $_REQUEST["name"] ){
      $name=$_REQUEST['name'];
      echo "Welcome ". $name;
   }
?> 

运行上面代码输出

现在,您可以在给定的输入框中输入任何文本,然后单击"Show Result"按钮以查看在输入框中输入的内容。

AJAX方法

您已经了解了使用JQuery进行AJAX的基本概念。下表列出了所有重要的JQuery AJAX方法,您可以根据编程需要使用它们-

Sr.No.Methods & Remark
1 jQuery.ajax( options )

使用HTTP请求加载远程页面。

2 jQuery.ajaxSetup( options )

设置AJAX请求的全局设置。

3 jQuery.get( url, [data], [callback], [type] )

使用HTTP GET请求加载远程页面。

4 jQuery.getJSON( url, [data], [callback] )

使用HTTP GET请求加载JSON数据。

5 jQuery.getScript( url, [callback] )

使用HTTP GET请求加载并执行JavaScript文件。

6 jQuery.post( url, [data], [callback], [type] )

使用HTTP POST请求加载远程页面。

7 load( url, [data], [callback] )

从远程文件加载HTML并将其注入DOM。

8 serialize( )

将一组输入元素序列化为数据字符串。

9 serializeArray( )

序列化所有表单和表单元素(如.serialize()方法),但返回JSON数据结构供您使用。

AJAX事件

您可以在AJAX调用进度的生命周期中调用各种JQuery方法。基于不同的事件/阶段,可以使用以下方法-

Sr.No.Methods & Remark
1 ajaxComplete( callback )

附加每当AJAX请求完成时要执行的函数。

2 ajaxStart( callback )

附加一个函数,只要AJAX请求开始且尚无活动,该函数即可执行。

3 ajaxError( callback )

附加一个在AJAX请求失败时要执行的函数。

4 ajaxSend( callback )

在发送AJAX请求之前,附加要执行的函数。

5 ajaxStop( callback )

附加所有AJAX请求结束后要执行的函数。

6 ajaxSuccess( callback )

附加每当AJAX请求成功完成时要执行的函数。

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

大规模数据处理实战 -〔蔡元楠〕

透视HTTP协议 -〔罗剑锋(Chrono)〕

SRE实战手册 -〔赵成〕

Kafka核心源码解读 -〔胡夕〕

PyTorch深度学习实战 -〔方远〕

攻克视频技术 -〔李江〕

网络排查案例课 -〔杨胜辉〕

李智慧 · 高并发架构实战课 -〔李智慧〕

Serverless进阶实战课 -〔静远〕

好记忆不如烂笔头。留下您的足迹吧 :)