jQuery中的$.getJSON、$.ajax、$.get、$.post的区别

使用见Flask(python)异步(ajax)返回json格式数据

.$.getJSON

  $.getJSON()是专门为ajax获取json数据而设置的,并且支持跨域调用,其语法的格式为:

getJSON(url,[data],[callback])

  • url:string类型, 发送请求地址
  • data :可选参数, 待发送 Key/value 参数 ,同get,post类型的data
  • callback :可选参数,载入成功时回调函数,同get,post类型的callback
$.getJSON("{{ url_for('form_data') }}",params, function (result) {
$("#myDiv").append("hello world1");
console.log(obj.username + "<br>");
});

.$.ajax

$.ajax 是 jQuery 底层 AJAX 实现,$.ajax是一种通用的底层封装,$.ajax()请求数据之后,则需要使用回调函数,有beforeSend、error、dataFilter、success、complete等。

格式:

$.ajax({
url:”路径”,
type:”post/get”,
datatype:”json”,
//成功的回调函数
success:function(data){
alert(“回调函数成功了”);
},
//失败的回调函数
error:function(){
alert(“服务器请求失败”);
}, //发送请求前调用,可以放一些“正在加载”之类的话
beforeSend:function(){
alert(“正在加载”);
}
});

例如:

        $.ajax({
"url": "{{ url_for('form_data') }}",
"type": "POST",
"data": params,
"success": function (obj) {
$("#myDiv").append("hello world")
console.log(obj.username + "<br>")
},
"error": function (obj) {
console.log(obj)
},
"dataType": "json",
"async": true
});

.$.get

$.get是简单易用的高层实现,我们使用$.get方法,jQuery会自动封装调用底层的$.ajax

$.get 只处理简单的 GET 请求功能以取代复杂 $.ajax,请求成功时可调用回调函数。不支持出错时执行函数,否则必须使用$.ajax

 $.get( url ,[data] ,[callback] )

  • url:string类型,ajax请求的地址。
  • data:可选参数,object类型,发送至服务器的key/value数据会作为QueryString附加到请求URL中。
  • callback:可选参数,function类型,当ajax返回成功时自动调用该函数。

例如:

 $.get("{{ url_for('form_data') }}", params, function (obj) {
$("#myDiv").append("hello world")
console.log(obj.username + "<br>");
}, "json");

.$.post

$.post是简单易用的高层实现,我们使用$.post方法,jQuery会自动封装调用底层的$.ajax

$.post 只处理 post请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。不支持出错时执行函数,否则必须使用$.ajax

$.post(url,[data],[callback],[type])

这个方法和$.get()用法差不多,唯独多了一个type参数,那么这里就只介绍type参数吧,其他的参考上面$.get()的。

  • type:type为请求的数据类型,可以是html,xml,json等类型,如果我们设置这个参数为:json,那么返回的格式则是json格式的,如果没有设置,就和.get()返回的格式一样,都是字符串的。

例如:

$.post("{{ url_for('form_data') }}", params, function (obj) {
$("#myDiv").append(obj.username + "<br>")
console.log(obj);
}, "json");

jQuery中的$.getJSON、$.ajax、$.get、$.post的区别的更多相关文章

  1. jquery中,size()和length()方法有啥区别

    jquery中,size()和length()方法有啥区别? size()是jQuery提供的函数,而length是属性(不带括号). jQuery提供的源代码是这样的: size: function ...

  2. jQuery中hover与mouseover和mouseout的区别分析

    本文实例分析了jQuery中hover与mouseover和mouseout的区别.分享给大家供大家参考,具体如下: 以前一直以为在jquery中其实mouseover和mouseout两个事件等于h ...

  3. [转载]jQuery中的html,val,text区别

    在jquery中 text() 返回目标元素所包含的所有文本内容,注意不包含html标签 alert($("#shuru").text()); 1 html() 返回目标元素所包含 ...

  4. jquery中$.get()提交和$.post()提交有区别

    jquery中$.get()提交和$.post()提交有区别吗? 相同点:都是异步请求的方式来获取服务端的数据: 异同点: 1.请求方式不同:$.get() 方法使用GET方法来进行异步请求的.$.p ...

  5. jQuery中的getJSON()

    json文件是一种轻量级的数据交互格式.一般在jQuery中使用getJSON()方法读取. $.getJSON(url,[data],[callback]) url:json文件地址 data:可选 ...

  6. Jquery中bind和live.one,delegate的区别

    Jquery中绑定事件有三种方法:以click事件为例 (1)target.click(function(){}); (2)target.bind("click",function ...

  7. jQuery中append(),prepend()与after(),before()的区别

    在jQuery中,添加元素有append(),prepend和 after(),before()两种共四个. 根据字面意思我们可以看出他们分别是追加,添加和之前,之后,意思相近.同时他们又都有添加元素 ...

  8. jquery 中后代遍历之children、find区别

    jquery 中children.find区别 首先看一段HTML代码,如下: <table id="tb"> <tr> <td>0</t ...

  9. Jquery中$.each()与$().each()的使用与区别。

    在jquery中,遍历对象和数组,经常会用到$().each和$.each(),两个方法.两个方法是有区别的,从而这两个方法在针对不同的操作上,显示了各自的特点. $().each,对于这个方法,在d ...

  10. jQuery中四种事件监听的区别

    原文链接:点我 我们知道jquery提供了四种事件监听方式,分别是bind.live.delegate.on,下面就分别对这四种事件监听方式分析. 已知有4个列表元素: 列表元素1 列表元素2 列表元 ...

随机推荐

  1. rest_framework框架的认识

    它是基于Django的,帮助我们快速开发符合RESTful规范的接口框架. 一  路由 可以通过路由as_view()传参 根据请求方式的不同执行对应不同的方法 在routers模块下 封装了很多关于 ...

  2. 关于简单的安卓APP状态栏设置(类似沉浸式状态栏)

    1.设置为全屏模式: 在所需设置为全屏模式的逻辑的onCreat()方法中加入以下代码即可: if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.K ...

  3. Python爬虫基础之认识爬虫

    一.前言 爬虫Spider什么的,老早就听别人说过,感觉挺高大上的东西,爬网页,爬链接~~~dos黑屏的数据刷刷刷不断地往上冒,看着就爽,漂亮的校花照片,音乐网站的歌曲,笑话.段子应有尽有,全部都过来 ...

  4. 【原创】大数据基础之HDFS(2)HDFS副本数量检查及复制逻辑

    HDFS会周期性的检查是否有文件缺少副本,并触发副本复制逻辑使之达到配置的副本数, <property> <name>dfs.replication</name> ...

  5. 【Python selenium自动化环境配置】4步搞定ChromeDriver版本选择

    很多刚做自动化的小伙伴,会在ChromeDriver版本选择时犯难,看来大家都被坑过,真正掌握独门绝技,都不是难事儿. 看好了主要步骤就4部 1.确定谷歌浏览器版本 2.找到谷歌浏览器版本与Chrom ...

  6. 倒影问题(reflect:below)

    这个例子灵感来源于实现一个登录框下方的倒影: .box { width: 300px; height: 200px; border: 1px solid #1f637b; -webkit-box-re ...

  7. echart 标题配置

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. 解除vnc viewer键盘快捷键的禁用

    解除VNC的键盘禁用: vnc viewer 局域网中用来听课用,alt+tab用不了不能切换其他窗口,很不方便.具体步骤: F8(或者窗口上边缘的设置按钮)——>options——>ad ...

  9. Visual GC提示"不受此JVM支持“解决方案(配置jstatd)

    Visual GC提示"不受此JVM支持“,如果想使用这个插件,就需要配置jstatd连接方式,下面来看jstatd的配置: 1.配置安全策略文件路径$JAVA_HOME/jre/lib/s ...

  10. 二分三元组 CodeForces - 251A

    题目链接: https://vjudge.net/problem/35188/origin 题目大意: 要求你找到一个 i < j < k时有 a[k]-a[i] <= d的组的个数 ...