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

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

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

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

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不会向下执行,而是原地等待服务器返回数据,并完成相应的回调函数后,再向下执行
举例:【后端代码见最下方】

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

笔者推荐大家用这种写法,虽然比$.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:服务器返回数据的格式
举例:

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

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

$.get()

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

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

举例:

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

$.getJSON()

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

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

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

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

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

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

import json
from flask import Flask, request, render_template as rt @app.route('/greet', methods=['GET', 'POST'])
def greet(): # GET上传的数据用request.args获取,POST上传的数据用request.form获取
if request.method == 'GET':
name = request.args.get('name')
ret = {'result': 'hi, %s' % name}
else:
name = request.form.get('name')
ret = {'result': 'hello, %s' % name} 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. smbrun - smbd和外部程序间的接口程序。

    总览 SYNOPSIS smbrun shell-command 描述 DESCRIPTION 此程序是samba套件的一部分. smbrun是个非常小的“粘合”程序,用于为smbd守护程序smbd( ...

  2. vue,一路走来(15)--简单投票系统

    今天记录一下简单的投票系统,主要实现选中至少五张作品,并提交投票. 思路:选中作品,将作品id存入到数组里. 取消投票,则从数组中移除该作品id. 如图效果: <li v-for="( ...

  3. 二、RabbitMQ操作

    1.RabbitMQ发送与接收. 2.RabbitMQ发送与接收. 3.RabbitMQ发送与接收.

  4. Linux 脚本运维总结之Shell script

    1. 本地变量和环境变量 变量类型 定义形式 声明位置 显示命令 作用域 本地变量 VARNAME=value 命令行或shell脚本 set (显示所有变量) 本用户,本进程 环境变量 export ...

  5. Vue 侦听属性

    Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性 <!DOCTYPE html> <html> <head> <meta cha ...

  6. Linux系统常用知识(centos7)

    一.查看系统版本 1.查看linux内核版本 #cat /etc/redhat-release 二.主机名 2.1定义: 静态的(Static hostname):“静态”主机名也称为内核主机名,是系 ...

  7. mysql中文乱码解决办法

    Windows 在C:\Program Files\MySQL\MySQL Server 5.5\bin目录下 MySQLInstanceConfig.exe执行 重新配置character_set_ ...

  8. 注解@requestBody自动封装复杂对象 (成功,自己的例子封装的不是一个复杂对象,只是一个简单的User对象,将jsp页面的name转成json字符串,再用JSON.stringify()传参就行了)

    注意:ajax向后台传值的时候,必须加上contentType:"application/json"; springmvc的注解@requestBody可以通过页面提交json来自 ...

  9. python3 内置函数enumerate

    一.简介: 该函数在字面上是枚举.列举的意思,用于将一个可遍历的数据对象(如列表.元组或字符串)组合为一个索引序列, 同时列出数据和数据下标,一般用在 for 循环当中,可同时得到数据对象的值及对应的 ...

  10. Dataphin数据服务系列之--API 配置、管理和消费

    研发小哥哥还在为公司里大量 API 只上不下,不可查不可用, 想找的 API 找不到而苦恼吗?业务方小姐姐还在为 API 开发时间长,业务相应不及时而抱怨吐槽吗? 铛铛铛,Dataphin 数据服务 ...