平时研究代码时,经常会遇到AJAX的相关用法,做项目时才真正体会到Ajax的强大之处(与服务器数据交互如此之便捷,更新DOM节点而不用刷新整个页面),以及运用的频繁程度。今天整理了一下自己之前没搞清楚的地方以及一些常规用法。

首先不得不说数据格式,ajax接收返回数据时,必须将获取到的json数组反序列化为json对象。

  1. {"result": "hello, jenny"} //json数组
  2. Object { result: "hello, jenny" } //json对象

调试时,console.log(data), 其中‘data’为ajax返回数据,若显示的为第一个格式,即为json数组,此时通过jquery改变某个DOM的值是不会有效果的,但是也不会有错误提示。初学者可能比较崩溃。。

  1. var json_object = jQuery.parseJSON(json_str);

此时,如上代码,即可转换为JSON对象,此时再将返回值赋予某个DOM即可实现效果。

下面就引出jQuery中发送Ajax请求的几个常见方法。

$.ajax()

形式:$.ajax({url,data,type,...});
可选字段:
1)url:链接地址,字符串表示
2)data:需发送到服务器的数据,GET与POST都可以,格式为{A: '...', B: '...'}
3)type:"POST" 或 "GET",请求类型
4)timeout:请求超时时间,单位为毫秒,数值表示
5)cache:是否缓存请求结果,bool表示
6)contentType:内容类型,默认为"application/x-www-form-urlencoded"
7)dataType:服务器响应的数据类型,字符串表示;当填写为json时,回调函数中无需再对数据反序列化为json
8)success:请求成功后,服务器回调的函数
9)error:请求失败后,服务器回调的函数
10)complete:请求完成后调用的函数,无论请求是成功还是失败,都会调用该函数;如果设置了success与error函数,则该函数在它们之后被调用
11)async:是否异步处理,bool表示,默认为true;设置该值为false后,JS不会向下执行,而是原地等待服务器返回数据,并完成相应的回调函数后,再向下执行
举例:【后端代码见最下方】

  1. <button class="btn btn-default" id="button1">发送1</button>
  2. <div id="ret">abc</div>
  1. $("#button1").on('click',function(){
  2. $.ajax({
  3. url: "/greet",
  4. data: {name: 'jenny'},
  5. type: "POST",
  6. //dataType: "json",
  7. success: function(data) {
  8. console.log(data);
  9. data = jQuery.parseJSON(data); // dataType注释了,故需要转换为JSON对象
  10. console.log(data);
  11. $("#ret").text(data.result);
  12. }
  13. });
  14. });

笔者推荐大家用这种写法,虽然比$.post、$.get写起来稍微麻烦一点,但是它被称为"jQuery中Ajax系列方法之母",原因在于可以很方便得实现各项其他配置,比如设置同步处理、设置success回调函数等。其中ajax的success和error方法根据响应状态码来触发。当服务器的链接相应成功,即状态码为200的时候,表示响应成功,此时自动触发success().其他状态码则触发error()。$.post和$.get对于success和error的支持,写起来就没有$.ajax这么简单。

$.post()

该方法使用POST方式执行Ajax请求,从服务器加载数据。

形式:$.post(url, data, func, dataType);
可选参数:
1)url:链接地址,字符串表示
2)data:需要发送到服务器的数据,格式为{A: '...', B: '...'}
3)func:请求成功后,服务器回调的函数;function(data, status, xhr),其中data为服务器回传的数据,status为响应状态,xhr为XMLHttpRequest对象,个人感觉关注data参数即可
4)dataType:服务器返回数据的格式
举例:

  1. <button class="btn btn-default" id="button2">发送2</button>
  2. <div id="ret">abc</div>
  1. $("#button2").on('click',function(){
  2.     //$.ajaxSettings.async = false;  //flase 表示同步处理,即等待回调函数执行完毕之后,再执行ajax代码块下面的JS代码,而不是同时执行
  3. $.post(
  4. "{{ url_for('greet') }}",
  5. {name: 'Brad'},
  6. function(data) {
  7. $('#ret').text(data.result);
  8. },
  9. "json"
  10. );
  11. });

注意“json”的返回格式,也可以不写,如果不写,就必须先将返回数据转化为JSON对象才可以使用。

$.get()

该方法使用GET方式执行Ajax请求,从服务器加载数据。

形式:$.get(url, data, func, dataType);
其各个参数所示意义与$.post()一致,在此不再列出,唯一区别就是请求类型是GET。

举例:

  1. <button class="btn btn-default" id="button3">发送3</button>
  2. <div id="ret">abc</div>
  1. $("#button3").on('click',function(){
  2. $.get(
  3. "{{ url_for('greet') }}",
  4. {name: 'Brad'},
  5. function(data) {
  6. $("#ret").text(data.result);
  7. },
  8. "json"
  9. );
  10. });

$.getJSON()

该方法使用GET方式执行Ajax请求,从服务器加载JSON格式数据。

形式:$.getJSON(url, data, func);

因为确定服务器返回json编码的数据,故相较于$.get()不必再指定dataType。

  1. <button class="btn btn-default" id="button4">发送4</button>
  2. <div id="ret">abc</div>
  1. $("#button4").on('click',function(){
  2. $.getJSON(
  3. "{{ url_for('greet') }}",
  4. {name: 'jenny'},
  5. function(data) {
  6. $("#ret").text(data.result);
  7. }
  8. );
  9. });

比较常用的还有$.load、$.getScript()等。

后端代码(Python的Flask框架):

  1. import json
  2. from flask import Flask, request, render_template as rt
  3.  
  4. @app.route('/greet', methods=['GET', 'POST'])
  5. def greet():
  6.  
  7. # GET上传的数据用request.args获取,POST上传的数据用request.form获取
  8. if request.method == 'GET':
  9. name = request.args.get('name')
  10. ret = {'result': 'hi, %s' % name}
  11. else:
  12. name = request.form.get('name')
  13. ret = {'result': 'hello, %s' % name}
  14.  
  15. return json.dumps(ret)

文章中如有不正确之处,请交流指出,wx:offer555

感兴趣的朋友也可以扫描关注我的公众号,里面有很多笔者原创的技术文章,希望大家会喜欢:)

Jquery的$.ajax、$.get、$.post发送、接收JSON数据及回调函数用法的更多相关文章

  1. android发送/接收json数据

    客户端向服务器端发送数据,这里用到了两种,一种是在url中带参数,一种是json数据发送方式: url带参数的写法: url+/?r=m/calendar/contact_list&uid=3 ...

  2. 类型:JQuery;问题:ajax调用ashx文件;结果:ashx文件怎么获取$.ajax()方法发送的json数据

    ashx文件怎么获取$.ajax()方法发送的json数据 作者:careful 和ajax相关     新浪微博QQ空间QQ微博百度搜藏腾讯朋友QQ收藏百度空间人人网开心网0 $.ajax({  t ...

  3. ThinkPHP中使用ajax接收json数据的方法

    本文实例讲述了ThinkPHP中使用ajax接收json数据的方法.分享给大家供大家参考.具体分析如下: 这里通过ThinkPHP+jquery实现ajax,扩展了下,写了个查询,前台代码如下: 首先 ...

  4. AJAX如何接收JSON数据

    简介 在我们了解如何使用AJAX返回JSON数据的时候要先明白下列几点 1. JSON如何来表示对象的 2. JSON如何来表示数组的 var object = { "labId" ...

  5. jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表

    对于问题从后台获取json数据,将内容填充到下拉列表,代码非常简单,具体过程请看下面代码. 需求:url:链接     par:ID       sel:下拉列表选择器 function BuildS ...

  6. iOS key value coding kvc在接收json数据与 model封装中的使用

    iOS key value coding  kvc在接收json数据与 model封装中的使用 使用 kvc 能够极大的简化代码工作,及以后的接口维护工作: 1:先创建MovieModel类.h和 . ...

  7. 后端接收json数据交互

    学习记录,后端接收json数据几种方式 1.直接接收或者通过HttpServletRequest接收 public void test(String userid, HttpServletReques ...

  8. Beego框架POST请求接收JSON数据

    原文: https://blog.csdn.net/Aaron_80726/article/details/83870563 ------------------------------------- ...

  9. .NET发送请求(get/post/http/https),携带json数据,接收json数据

    C#发送https请求有一点要注意: ServicePointManager.ServerCertificateValidationCallback = new RemoteCertificateVa ...

随机推荐

  1. Thymeleaf入门——入门与基本概述

    https://www.cnblogs.com/jiangbei/p/8462294.html 一.概述 1.是什么 简单说, Thymeleaf 是一个跟 Velocity.FreeMarker 类 ...

  2. ARC096E Everything on It 容斥原理

    题目传送门 https://atcoder.jp/contests/arc096/tasks/arc096_c 题解 考虑容斥,问题转化为求至少有 \(i\) 个数出现不高于 \(1\) 次. 那么我 ...

  3. Ubuntu用户权限管理(chown, chmod)

    改变文件所有权chown 例如 sudo chown username myfile myfile文件的所有权变为username. chown -R username /files/work 加入参 ...

  4. Session过期,如何跳出iframe框架页的问题

    跳出框架页,实际上是更改父页面地址.那么更改父页面地址很简单即: window.parent.location='/Login/loginindex'; 这里说session过期,那么浏览器端的任何请 ...

  5. 英语单词SYNOPSIS

    SYNOPSIS 来源——man帮助内容 BASH() General Commands Manual BASH() NAME bash - GNU Bourne-Again SHell SYNOPS ...

  6. Linux任务计划at

    Linux任务计划at 一Linux任务计划介绍 Linux任务计划.周期性任务执行at:未来的某时间点执行一次任务batch:系统自行选择空闲时间去执行此处指定的任务cron:周期性运行某任务 二a ...

  7. mybatis源码分析之02配置文件解析

    该篇正式开始学习mybatis的源码,本篇主要学习mybatis是如何加载配置文件mybatis-config.xml的, 先从测试代码入手. public class V1Test { public ...

  8. 如何隐藏一个让人很难发现的bug?

    程序员的日常三件事:写bug.改bug.背锅.连程序员都自我调侃道,为什么每天都在加班?因为我的眼里常含bug. 那么如何写出一个让(坑)人(王)很(之)难(王)发现的bug呢? - 1 - 新手开发 ...

  9. [CSP-S模拟测试]:randomwalking(DP)

    题目传送门(内部题59) 输入格式 第一行一个数$n$表示点数.第二行$n$个数$A_i$.接下来$n−1$行,每行两个数$u,v$表示$u$和$v$有边直接相连. 输出格式 一个数表示最小花费的起点 ...

  10. [CSP-S模拟测试]:折射(DP)

    题目描述 小$Y$十分喜爱光学相关的问题,一天他正在研究折射. 他在平面上放置了$n$个折射装置,希望利用这些装置画出美丽的折线. 折线将从某个装置出发,并且在经过一处装置时可以转向,若经过的装置坐标 ...