iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Jquery使用AJAX方法请求数据
  • 765
分享到

Jquery使用AJAX方法请求数据

2024-04-02 19:04:59 765人浏览 薄情痞子
摘要

一、ajax请求 1、Jquery.ajax(url,[settings]): 通过 HTTP 请求加载远程数据。 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.ge

一、ajax请求

1、Jquery.ajax(url,[settings]):

通过 HTTP 请求加载远程数据。

jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数。

Example: 保存数据到服务器,成功时显示信息。

$.ajax({
  type: "POST",
  url: "some.PHP",
  data: { name: "John", location: "Boston" }
}).done(function( msg ) {
  alert( "Data Saved: " + msg );
});

2、ajax选项

  • async (默认: true):是否为异步请求
  • global (默认: true):是否触发全局 AJAX 事件
  • url (默认: 当前页面地址)“发送请求的地址
  • type (默认: 'GET'):请求方式 ("POST" 或 "GET"),Get时,参数中如果要传递中文,则需要用encodeURIComponent().
  • data:发送到服务器的数据。可将对象或数组将自动转换为请求字符串格式。
  • dataType (默认: Intelligent Guess (xml, JSON, script, or html)):预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如XML MIME类型就被识别为XML。
  • context:用于设置Ajax相关回调函数的上下文。 默认情况下,这个上下文是一个ajax请求使用的参数设置对象settings。
  • cache (默认: true, dataType为"script"和"jsonp"时默认为false):如果设置为 false ,浏览器将不缓存此页面。

3、回调函数

如果要处理 $.ajax() 得到的数据,则需要使用回调函数:beforeSend、error、dataFilter、success、complete。

  • beforeSend:在发送请求之前调用,并且传入一个 XMLHttpRequest 作为参数。
  • error:在请求出错时调用。传入 XMLHttpRequest 对象,描述错误类型的字符串以及一个异常对象(如果有的话)
  • dataFilter:在请求成功之后调用。传入返回的数据以及 "dataType" 参数的值。并且必须返回新的数据(可能是处理过的)传递给 success 回调函数。
  • success:当请求之后调用。传入返回后的数据,以及包含成功代码的字符串。
  • complete:当请求完成之后调用这个函数,无论成功或失败。传入 XMLHttpRequest 对象,以及一个包含成功或错误代码的字符串。

4、GET方法和POST方法的区别

  • get是从服务器上获取数据,get是把参数数据队列加到URL中,值和表单内各个字段一一对应,在URL中可以看到。(服务器端用Request.QueryString获取变量的值)
  • post是向服务器传送数据。post是通过HTTP post机制,将参数数据队列放置在HTML HEADER内一起传送到URL地址。用户看不到这个过程。(服务器端用Request.FORM获取提交的数据)
  • get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。但理论上,IIS4中最大量为80KB,IIS5中为100KB。
  • get安全性非常低,post安全性较高,但是执行效率却比Post方法好。包含机密信息的话,建议用Post数据提交方式;
  • 在做数据查询时,建议用Get方式;而在做数据添加、修改或删除时,建议用Post方式;

二、AJAX请求快捷方法:

1、.load( url [, data ] [, callback ] ):

从服务器载入数据并且将返回的 HTML 代码并插入至 匹配的元素中。

如果提供了 "complete" 回调函数,它将在函数处理完之后,并且 HTML 已经被插入完时被调用。

默认使用 GET 方式 , 如果data参数提供一个对象,那么使用 POST 方式。

举例:

//1、在一个有序列表中,加载主页的页脚导航。
 $("#new-nav").load("/ #jq-footerNavigation li");
//2、显示一个信息如果Ajax请求遭遇一个错误
$("#success").load("/not-here.php", function(response, status, xhr) {
  if (status == "error") {
    var msg = "Sorry but there was an error: ";
    $("#error").html(msg + xhr.status + " " + xhr.statusText);
  }
});

//3、发送数组形式的data参数到服务器。
$("#objectID").load("test.php", { 'choices[]': ["Jon", "Susan"] } );

//4、将feeds.html 文件载人到 ID为feeds的DIV.
$("#feeds").load("feeds.html");

2、$.get(URL,callback):

通过 HTTP GET 请求从服务器上请求数据。

下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据:

$("button").click(function(){
  $.get("demo_test.asp",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

3、$.post(URL,data,callback):

通过 HTTP POST 请求从服务器上请求数据。

下面的例子使用 $.post() 连同请求一起发送数据:

$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

4、$.getJSON(url,data,callback):

通过 HTTP GET 请求载入 JSON 数据。

data数据会被附加到一个查询字符串的URL中,发送到服务器。如果该值的data参数是一个普通的对象,它会转换为一个字符串并使用URL编码,然后才追加到URL中。

下面的例子从 Flickr JSONP api中加载最近的四张标签为猫的图片:

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
  {
    tags: "mount rainier",
    tagmode: "any",
    format: "json"
  },
  function(data) {
    $.each(data.items, function(i,item){
      $("<img/>").attr("src", item.media.m).appendTo("#images");
      if ( i == 3 ) return false;
    });
  });

通过test.js加载这个JSON数据,并使用返回的JSON数据中的 name值:

$.getJSON("test.js", function(json) {
   alert("JSON Data: " + json.users[3].name);
 });

5、$.getScript( url [, callback ] ):

使用一个HTTP GET请求从服务器加载并执行一个 JavaScript 文件

载入的脚本在全局环境中执行,因此能够引用其他变量,并使用 jQuery 函数。被加载的脚本同样作用于当前页面.

默认情况下,$.getScript() cache选项被设置为 false。这将在请求的URL的查询字符串中追加一个时间戳参数,以确保每次浏览器下载的脚本被重新请求。

我们动态加载新的官方jQuery 颜色动画插件,一旦该插件加载完成就会触发一些颜色动画。

(function() {
  var url = "https://raw.GitHub.com/jquery/jquery-color/master/jquery.color.js";
  $.getScript(url, function() {
    $("#Go").click(function(){
      $(".block")
        .animate( { backgroundColor: "rgb(255, 180, 180)" }, 1000 )
        .delay(500)
        .animate( { backgroundColor: "olive" }, 1000 )
    });
  });
})();

三、全局事件

Ajax会触发很多事件。 
有两种事件,一种是局部事件,一种是全局事件:

1、局部事件:

通过$.ajax来调用并且分配。

$.ajax({
beforeSend: function(){
// Handle the beforeSend event
},
complete: function(){
// Handle the complete event
}
// ...
});

2、全局事件:

可以用bind来绑定,用unbind来取消绑定。

这个跟click/mousedown/keyup等事件类似。但他可以传递到每一个DOM元素上。

$("#loading").bind("ajaxSend", function(){ //使用bind
    $(this).show();
}).ajaxComplete(function(){ //直接使用ajaxComplete
    $(this).hide();
});

当然,你某一个Ajax请求不希望产生全局的事件,则可以设置global:false

$.ajax({
url: "test.html",
global: false,
// ...
});

全局事件中,除了ajaxStart和ajaxStop之外,其他的事件都有3个参数:event, XMLHttpRequest, ajaxOptions。

3、事件顺序

事件发生的顺序如下:

  • .ajaxStart(全局):在AJAX 请求刚开始时执行一个处理函数.
  • beforeSend(局部事件):当一个Ajax请求开始时触发。如果需要,你可以在这里设置XHR对象。
  • .ajaxSend(全局):在Ajax请求发送之前绑定一个要执行的函数.
  • success(局部事件):请求成功时触发。即服务器没有返回错误,返回的数据也没有错误。
  • .ajaxSuccess(全局):当 Ajax 请求成功完成时执行。
  • error(局部事件):仅当发生错误时触发。你无法同时执行success和error两个回调函数。
  • .ajaxError(全局):Ajax请求出错时注册一个回调处理函数。
  • complete(局部事件):不管你请求成功还是失败,即便是同步请求,你都能在请求完成时触发这个事件。
  • .ajaxComplete(全局):当Ajax请求完成后注册一个回调函数。
  • .ajaxStop(全局):在AJAX 请求完成时执行一个处理函数。

举例:

//当 AJAX 请求开始时,显示“加载中”的指示:
$("div").ajaxStart(function(){
  $(this).html("<img src='demo_wait.gif' />");
});

//AJAX 请求结束后隐藏信息:
$("#loading").ajaxStop(function(){
  $(this).hide();
});

四、$.ajaxSetup( options ) :

设置全局 AJAX 默认选项。

举例:设置 AJAX 请求默认地址为 "/xmlhttp/",禁止触发全局 AJAX 事件,用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数

$.ajaxSetup({
  url: "/xmlhttp/",
  global: false,
  type: "POST"
});
$.ajax({ data: myData });

五、.serialize() 与 .serializeArray():

序列化表单内容

如果要表单元素的值包含到序列字符串中,元素不能被禁用,元素必须使用 name 属性。

1、.serialize() :

序列化表单内容为字符串。

.serialize() 方法可以操作已选取个别表单元素的 jQuery 对象,比如 <input>, <textarea> 以及 <select>。不过,选择 <form> 标签本身进行序列化一般更容易些:

$('form').submit(function() {
  alert($(this).serialize());
  return false;
});

输出标准的查询字符串:

a=1&b=2&c=3&d=4&e=5

2、.serializeArray() :

序列化表单内容为JSON数组。

serializeArray()输出标准的查询JOSN对象:

[ { name: a value: 1 }, { name: b value: 2 }, { name: c value: 3 }, { name: d value: 4 }, { name: e value: 5 } ]

六、利用Jquery获取后台代码或WEBservice

注意:1.方法一定要静态方法,而且要有[WebMethod]的声明

后台<C#>:

using System.Web.Script.Services;  
 
[WebMethod]  
public static string SayHello()  
{  
     return "Hello Ajax!";  
}

前台<JQuery>:

$(function()
 {   
    $("#btnOK").click(function()
 {   
        $.ajax({  
            //要用post方式  
            type:"Post",  
            //方法所在页面和方法名  
            url:location.pathname+"/SayHello",  
            contentType:"application/json; charset=utf-8",  
            dataType:"json",  
            success:function(data)
             {   
                alert(data.d);  //返回的数据用data.d获取内容  
            },  
            error:function(err)
             {   
                alert(err);  
            }  
        });  
 
        //禁用按钮的提交  
        return false;  
    });  
});

注意:如果方法需要传参数如:GetStr(string str,string str2),则$.ajax需要增加data: "{'str':'我是','str2':'XXX'}"。

七、通过Ajax读取XML数据

//1、解析XML字符串:
var xmlDoc=$.parseXML(“”);

//2、封装XMLDOC:
var $xml=$(xmlDoc) 

//3、判断是否是XMLDOC:
$.isXMLDoc(xmlDoc)==true

//4、查询XML,和查询HTML语法一致:
$.xml.find(“title”).text;$(“title”,$xml).text();

通过Ajax读取XML数据:

$.ajax({
     type: "POST",
     url: "WebService1.asmx/GetDataSet",
     data: "{}",
     dataType: 'xml', //返回的类型为XML ,和前面的Json,不一样了
     success: function (xml) {      
             $(xml).find("Table1").each(function () {
                 $(this).find("ID").text() + " " + $(this).children("title").attr("id"));
             });     
     }
 });
//如果返回的是JOSN文本,则需要使用$.parstJSON(json)或eval("(+json+)")解析

到此这篇关于Jquery使用AJAX方法请求数据的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: Jquery使用AJAX方法请求数据

本文链接: https://www.lsjlt.com/news/148887.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Jquery使用AJAX方法请求数据
    一、AJAX请求 1、jQuery.ajax(url,[settings]): 通过 HTTP 请求加载远程数据。 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.ge...
    99+
    2024-04-02
  • Jquery使用原生AJAX方法请求数据
    目录1.原生ajax1.具体步骤2.get请求3.post请求4.封装方法2.jquery的ajax方法1.原生ajax 1.具体步骤 1.创建XMLHTTPRequest对象 2....
    99+
    2023-02-22
    Jquery AJAX请求数据 Jquery AJAX方法
  • Jquery怎么使用AJAX方法请求数据
    本篇内容主要讲解“Jquery怎么使用AJAX方法请求数据”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Jquery怎么使用AJAX方法请求数据”吧!一、AJAX请求1、jQuery.ajax(...
    99+
    2023-06-30
  • Jquery怎么使用原生AJAX方法请求数据
    这篇文章主要介绍“Jquery怎么使用原生AJAX方法请求数据”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Jquery怎么使用原生AJAX方法请求数据”文章能帮助大家解决问题。1.原生ajax1....
    99+
    2023-07-05
  • jQuery非Ajax的POST请求方法怎么使用
    这篇文章主要介绍了jQuery非Ajax的POST请求方法怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇jQuery非Ajax的POST请求方法怎么使用文章都会有所收获,下面我们一起来看看吧。一、AJA...
    99+
    2023-07-05
  • jQuery如何使用ajax请求
    这篇文章将为大家详细讲解有关jQuery如何使用ajax请求,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。使用最简单的ajax请求jQuery(使用ajax)提供了一个速...
    99+
    2024-04-02
  • jquery中如何使用ajax请求
    本文小编为大家详细介绍“jquery中如何使用ajax请求”,内容详细,步骤清晰,细节处理妥当,希望这篇“jquery中如何使用ajax请求”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新...
    99+
    2024-04-02
  • jquery中AJAX请求$.post方法的用法介绍
    本篇内容介绍了“jquery中AJAX请求$.post方法的用法介绍”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学...
    99+
    2024-04-02
  • jQuery中怎么使用ajax跨域请求获取数据
    本篇文章给大家分享的是有关jQuery中怎么使用ajax跨域请求获取数据,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。跨域是我在日常面试中经常...
    99+
    2024-04-02
  • 怎么使用JQuery接收AJAX请求
    本文小编为大家详细介绍“怎么使用JQuery接收AJAX请求”,内容详细,步骤清晰,细节处理妥当,希望这篇“怎么使用JQuery接收AJAX请求”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。一、用法JQuery提...
    99+
    2023-07-06
  • 如何使用JQuery接收AJAX请求
    JQuery是一个优秀的JavaScript库,支持各种浏览器下的AJAX请求。本文将介绍如何使用JQuery接收AJAX请求。一、用法JQuery提供了ajax方法来发送AJAX请求,如下:$.ajax({ //请求方式,可以为&...
    99+
    2023-05-14
  • Vue使用ajax(axios)请求后台数据的方法教程
    目录前言:Axios安装前台部分连接后台部分(node)总结前言: 页面上那些数据,绝大部分都不是静态的数据,而是通过调用后台接口把数据渲染到页面上的效果。ajax可以帮助我们更好的...
    99+
    2022-11-13
    vue请求后端数据 vue ajax请求 axios请求后端数据
  • jQuery中ajax的常用请求方式有哪些
    本篇内容主要讲解“jQuery中ajax的常用请求方式有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“jQuery中ajax的常用请求方式有哪些”吧!jQu...
    99+
    2024-04-02
  • ajax请求方法有哪些
    这篇文章主要为大家展示了“ajax请求方法有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“ajax请求方法有哪些”这篇文章吧。ajax请求方法如下一、普通的...
    99+
    2024-04-02
  • 使用Ajax请求动态填充页面数据
    这期内容当中小编将会给大家带来有关使用Ajax请求动态填充页面数据,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。实现功能:点击页面上的按钮实现动态追加数据实现原理:点击页面按钮,通过Ajax提交请求到后台...
    99+
    2023-06-08
  • 如何使用jQuery的ajax方法向服务器发出get和post请求
    这篇文章主要介绍如何使用jQuery的ajax方法向服务器发出get和post请求,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!打算写个ajax系列的博文,主要是写给自己看,学习下a...
    99+
    2024-04-02
  • 解决IE9下JQuery发送ajax请求失效的方法
    最近在做项目的时候,测试PC端网页,在IE9下会失效,不能正常的发送POST请求,经过仔细的排查,发现是IE9下JQuery发送ajax存在跨域问题。 目前有两种解决方案: 解决方案...
    99+
    2024-04-02
  • AJAX请求类的用法
    这篇文章主要讲解了“AJAX请求类的用法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“AJAX请求类的用法”吧!代码如下:// AJAX类function ...
    99+
    2024-04-02
  • jquery实现Ajax请求的方式有哪些
    jQuery实现Ajax请求的方式有以下几种:1. $.ajax():最常用的方式,可以进行各种自定义配置,例如请求的URL、请求的...
    99+
    2023-08-15
    jquery Ajax
  • AJAX如何跨域请求数据
    这篇文章主要为大家展示了“AJAX如何跨域请求数据”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“AJAX如何跨域请求数据”这篇文章吧。由于浏览器的同源策略 aj...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作