jQuery实现Ajax

时间 2019-12-08

标签 jquery 实现 ajax 栏目 JQuery 繁體版

原文原文链接

原由

现在的Web形式是后端仅仅提供api接口,那么系统的前端如何获得后端传来的这些数据呢?而后系统前端所填的信息又是如何传递給后端呢?javascript
我想最易理解的方案那就是经过ajax进行先后端的数据交互,嘻嘻嘻嘻,直接用jQuery库封装好的ajax方法,能够说是一种快速生产的方式.php
ajax都是异步请求的,因此接下去所记录的方法也都是异步进行的.html

ajax方法

`load(url,[data],[callback])` 异步请求载入远程HTML片断并插入至DOM中

这些HTML片断能够没有<html>、<head>、<body>,只包含最基本的代码前端

$('#abc').load('abc.html');

也能够加载HTML片断中某个须要的匹配部分html5

$('#abc').load('html5/abc.html #abc');

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

getJSON()是全局jQuery对象的方法,也就是全局函数.
经过url获取JSON数据格式,而后使用回调函数将获取的数据进行后续操做.java

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

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

同getJSON方法同样,也是全局jQuery对象的方法.
有时候初次加载页面是有些js文件未必都是必须的,因此经过这个方法能够用户在操做能够动态灵活的加载所需的js脚本.ajax

$.getScript('abc/abc.js');

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

get可简单的理解为从服务器获取数据进行以后一系列操做json

$.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请求发送序列化表单数据:api

$.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.
$.ajaxSuccess()绑定一个函数当 Ajax 请求成功完成时执行, 这是一个Ajax Event.

总结

关于先后端用数据Ajax实现就先到这吧.
$.ajax()此方法是最底层的方法并未展开,但的确在从此实践生产是用得最多的.
get和post区别也是须要清楚的.
前端路漫漫任重而道远

jQuery实现Ajax

原由

ajax方法

load(url,[data],[callback]) 异步请求载入远程HTML片断并插入至DOM中

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

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

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

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

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

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

ajaxStart()和ajaxStop()

$.ajaxError()和$.ajaxSuccess()

总结