jQuery教程
+ -

JQuery AJAX

2019-09-09 7 0

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”按钮以查看在输入框中输入的内容。

jQuery AJAX方法

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

No. Methods 描述
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数据结构供您使用。

jQuery AJAX事件

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

No. Methods 描述
1 ajaxComplete( callback ) 附加每当AJAX请求完成时要执行的功能。
2 ajaxStart( callback ) 附加一个函数,只要AJAX请求开始且尚无活动,该函数即可执行。
3 ajaxError( callback ) 附加一个在AJAX请求失败时要执行的功能。
4 ajaxSend( callback ) 在发送AJAX请求之前,附加要执行的功能。
5 ajaxStop( callback ) 附加所有AJAX请求结束后要执行的功能。
6 ajaxSuccess( callback ) 附加每当AJAX请求成功完成时要执行的功能。

0 篇笔记 写笔记

Ajax教程
AJAX代表异步JavaScript和XML。 AJAX是一种借助XML,HTML,CSS和JavaScript创建更好,更快,更交互的Web应用程序的新技术。AJAX教程涵盖了适用于初学者和专业人士的AJAX技术的概念和示例。AJAX是Asynchronous JavaScript和XML的首......
Ajax Java示例
要创建ajax示例,需要使用服务器端语言,例如:Servlet,JSP,PHP,ASP.Net等。这里使用JSP来生成服务器端代码。在这个例子中,只是打印给定数字的表。使 用jsp创建ajax示例的步骤需要按照以下步骤操作:加载org.json.jar文件。创建输入页面以接收文本或数字。创......
Ajax是什么?
AJAX代表异步JavaScript和XML。AJAX是一种借助XML,HTML,CSS和JavaScript创建更好,更快,更交互的Web应用程序的新技术。Ajax使用XHTML作为内容,CSS使用文档对象模型和JavaScript进行动态内容显示。传统的Web应用程序使用同步请求向服务器和从......
AJAX JSON示例
我们可以通过AJAX代码获取JSON数据。 AJAX提供了异步获取响应的工具。 它不会重新加载页面并节省带宽。AJAX JSON 示例下面我们看一个使用AJAX代码获取JSON数据的简单示例。
在此示例中,我们使用Ajax与数据库进行交互。无需太多的代码。仅在服务器端页面中写入数据库逻辑。在这个例子中,在index.jsp文件中编写了服务器端代码。通 过jsp使用数据库创建ajax示例的步骤需要按照以下步骤操作:加载org.json.jar文件创建输入页面以接收文本或数字创建服务......
如前所述,ajax不是一种技术,而是一组相互关联的技术组合。AJAX技术包括:HTML/XHTML和CSSDOMXML或JSONXMLHttpRequestJavaScriptHTML/XHTML和CSS这些技术用于显示内容和样式,它主要用于演示。DOM它用于动态显示和与数据交互。用于访......
在此示例中,我们将创建一个表单,使用java与ajax实现按名称搜索员工。在这里,我们编写了两层应用程序代码,以使应用程序易于理解。您可以根据标准编写数据库代码。在 Java中使用AJAX创建搜索示例的步骤需要按照以下步骤操作:在数据库中创建表加载org.json.jar文件创建输入表单创建......
AJAX使用XMLHttpRequest对象与服务器通信。我们尝试通过下面显示的图像来了解ajax的流程或ajax的工作原理。正如在上面的示例中所看到的,XMLHttpRequest对象起着重要作用。用户从UI发送请求,javascript调用转到XMLHttpRequest对象。HTTP请......
为了更清楚地说明如何使用AJAX从数据库访问信息,我们将动态构建MySQL查询并在”ajax.html”上显示结果。但在我们继续本教程之前,需要做好一些基础工作。使用以下命令创建表。注 - 假设您有足够的权限执行以下MySQL操作。CREATE TABLE 'ajax_users&#......
本章提供了AJAX操作过程步骤的清晰流程。AJAX 操作的步骤发生客户端事件。创建XMLHttpRequest对象。XMLHttpRequest对象创建成功并配置。XMLHttpRequest对象向Web服务器发出异步请求。Web服务器返回包含XML文档的结果。XMLHttpRequest对象......
AJAX安全性:服务器端基于AJAX的Web应用程序使用与常规Web应用程序的服务器端具有相同安全问题。可以在web.xml文件(声明性)或程序(程序)中指定身份验证,授权和数据保护要求。基于AJAX的Web应用程序受到与常规Web应用程序相同的安全威胁。AJAX安全:客户端JavaScrip......
在这个例子中,我们创建一个发表评论的表单。表单数据保存在数据库中,所有发布的注释列表显示在注释表单下方。使用Java中的AJAX创建注释表单示例的步骤需要按照以下步骤操作:在数据库中创建表加载org.json.jar文件创建评论表单创建服务器端页面以保存表单数据并列出所有发布的评论创建评论表......
并不是所有的浏览器都支持AJAX,以下是支持AJAX的主要浏览器 -Mozilla Firefox 1.0及以上版本。Netscape 7.1及以上版本。Apple Safari 1.2及以上版本。Microsoft Internet Explorer 5及更高版本。Konqueror。Oper......
AJAX是异步JavaScript和XML的首字母缩写,该技术可帮助我们从服务器加载数据而无需刷新浏览器页面。JQuery是一个很棒的工具,它提供了丰富的AJAX方法集来开发下一代Web应用程序。load()加载数据使用JQuery AJAX加载任何静态或动态数据非常容易。 jQuery提供 loa......
AJAX正在快速增长,它包含许多问题的原因。我们希望随着时间的推移,它们将得到解决,AJAX将成为Web应用程序的理想选择。我们列出了AJAX目前遇到的一些问题。增 加了复杂性服务器端开发人员需要了解HTML客户端页面以及服务器端逻辑中将需要表示逻辑。页面开发人员必须具备JavaScript技......
取消
感谢您的支持,我会继续努力的!
扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

您的支持,是我们前进的动力!