jQuery实现Ajax

scwang90 发布于2019-08-23 12:37 / 434人阅读

摘要：设置全局默认的默认选项实际用时仍然可以将默认选项值覆盖和方法用于在请求发出前触发函数。和请求出错时注册一个回调处理函数，这是一个。绑定一个函数当请求成功完成时执行，这是一个。

目前Web开发形式是后端仅仅提供api接口，那么系统的前端如何得到后端传来的这些数据呢？

然后系统前端所填的信息又是如何传递給后端呢？

我想最容易易理解的方案那就是通过ajax进行前后端的数据交互，（直接用jQuery库封装好的ajax方法）

ajax都是异步请求的所以接下去所记录的方法也都是异步进行的 load(url,[data],[callback]) 异步请求载入远程HTML片段并插入至DOM中

直接加载HTML页面

$("#abc").load("abc.html")

也可以加载HTML片段中某个需要的匹配部分

$("#abc").load("html5/abc.html #abc")

$.getJSON(url,[data],[callback]) 使用一个HTTP GET请求从服务器加载JSON编码的数据

getJSON()是全局jQuery对象的方法，也就是全局函数。
通过url获取JSON数据格式,然后使用回调函数将获取的数据进行后续操作。

$.getJSON("abc.json",function(data){
    console.log(data);
})

$.getScript(url,[callback]) 使用一个HTTP GET请求从服务器加载并执行一个 JavaScript 文件

同getJSON方法一样,也是全局jQuery对象的方法。
有时候初次加载页面是有些js文件未必都是必须的，可以通过这个方法可以用户在操作可以动态灵活的加载所需的js脚本。

$.getScript("abc/abc.js")

$.get(url,[data],[callback]) 使用一个HTTP GET请求从服务器加载数据

get可简单的理解为从服务器获取数据进行之后一系列操作。

$.get("http://www.imooc.com/data/info_f.php",function(data){
    $("#abc").html(data);
})

$.post(url,[callback]) 使用一个HTTP POST 请求从服务器加载数据

而post请求虽说与get请求结构一样但也有一些区别.

GET方式对传输的数据大小有限制，而POST方式传递的数据量要比GET方式大得多。

$.post("http://www.imooc.com/data/check_f.php",{
    num:$("txtNumber").val()
},function(data){
    console.log(data);
})

使用post请求发送序列化表单数据

$.post("test.php", $("#testform").serialize(),function(data){
    alert("发送成功");
});

$.ajax([settings]) 执行一个异步的HTTP（Ajax）的请求

ajax()是功能最强大的请求数据的方法，不仅可以请求数据，也可以向服务器发送数据，也可以进行跨域获取json数据。

$.ajax({
    url:"url"
    type:"post",
    async:true,
    data:data,
    dataType: "json",
    success:function(data){}
})

$.ajaxSetup[options] 设置全局默认的Ajax默认选项

$.ajaxSetup({
    type:"post",
    async:true,
    dataType: "json",
})

实际用$.ajax()时仍然可以将默认选项值覆盖

ajaxStart()和ajaxStop()

$(document).ajaxStart(function() {
   $( "#loading" ).show();
 });
$(document).ajaxStop(function() {
    $( "#loading" ).hide();
});

ajaxStart()方法用于在Ajax请求发出前触发函数。

ajaxStop()方法用于在Ajax请求完成后触发函数。

$.ajaxError()和$.ajaxSuccess()

$.ajaxError() Ajax请求出错时注册一个回调处理函数，这是一个Ajax Event。

$.ajaxuccess() 绑定一个函数当Ajax请求成功完成时执行，这是一个AjaxEvent。

总结

关于前后端用数据Ajax实现就先到这吧，$.ajax()此方法是最底层的方法并未展，但的确在今后实践生产是用得最多的，get和post 区别也是需要清楚的。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98855.html

jQuery ajax 源码分析之预处理和分发函数(prefilter/transport)

摘要：调用的情况下，我们通常用来请求数据的方法有前五种方法，在的实现中，本质上还是在调用第六种方法实现的单纯在源码中看前五个函数，代码量都很少，多一点也就是函数，涉及到了的写法，在调用成功时，对返回的数据使用内部方法进行渲调用jQuery 的情况下，我们通常用来请求数据的方法有 $(element).load(url, callback) $.get(url, data, callbac...

he_xd 2019-08-20 19:10 评论0 收藏0
原生JS与jQuery对AJAX的实现

摘要：原生与对的实现一定义里这么解释异步的和。二原生实现所有现代浏览器以及均内建对象。一般是正常未找到页面，一般是错误，或者后台没有创建相应的内部服务错误，多为后台错误。基本上通过发送的数据及传回的数据就能定位问题所在了。原生JS与jQuery对AJAX的实现一、定义 W3C里这么解释AJAX： AJAX = Asynchronous JavaScript and XML（异步的 Jav...

Chaz 2019-08-21 10:37 评论0 收藏0
通过 ES6 Promise 和 jQuery Deferred 的异同学习 Promise

摘要：和和都有和，但是略有不同。实际上返回的是一个对象。和添加的回调，添加的回调。所以在调用成功的情况下执行添加的回调，调用失败时执行添加的回调。，产生对象并，产生对象并，然后继续处理，的语法糖，和的差不多但不同。 Deferred 和 Promise ES6 和 jQuery 都有 Deffered 和 Promise，但是略有不同。不过它们的作用可以简单的用两句话来描述 Deffere...

Yujiaao 2019-08-21 10:39 评论0 收藏0
Ajax设置请求和接收响应、自己封装简易jQuery.Ajax、回调函数

摘要：设置请求和接收响应自己封装简易这篇文章是承接前几篇博客的是前几篇继续学习包括学习与理解和简化版自己实现等这篇文章只算是我的个人学习笔记内容没有精心排版一些错误请见谅所有代码都在这里从历史可以看到所有代码摆阔一个简易的服务器所有代码在历史里 Ajax设置请求和接收响应、自己封装简易jQuery.Ajax 这篇文章是承接前几篇博客的,是前几篇继续学习包括Ajax学习与理解和简化版自己实现j...

Harpsichord1207 2019-08-23 10:42 评论0 收藏0
jquery ajax 方法封装说明

摘要：简要说明前面我写了一篇方法封装及文件设计文档，主要用来说明我们在项目中通常会对的方法进行进一步的封装处理，便于我们在业务代码中使用。这篇文档我们主要对封装的方法进行一个简要说明。简要说明前面我写了一篇《jquery ajax 方法封装及 api 文件设计》文档，主要用来说明我们在项目中通常会对 jquery 的 ajax 方法进行进一步的封装处理，便于我们在业务代码中使用。从那篇文...

z2xy 2019-08-23 16:26 评论0 收藏0