Jquery的$.ajax、$.get、$.post发送、接收JSON数据及回调函数用法
平时研究代码时,经常会遇到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数据及回调函数用法的更多相关文章
- android发送/接收json数据
客户端向服务器端发送数据,这里用到了两种,一种是在url中带参数,一种是json数据发送方式: url带参数的写法: url+/?r=m/calendar/contact_list&uid=3 ...
- 类型:JQuery;问题:ajax调用ashx文件;结果:ashx文件怎么获取$.ajax()方法发送的json数据
ashx文件怎么获取$.ajax()方法发送的json数据 作者:careful 和ajax相关 新浪微博QQ空间QQ微博百度搜藏腾讯朋友QQ收藏百度空间人人网开心网0 $.ajax({ t ...
- ThinkPHP中使用ajax接收json数据的方法
本文实例讲述了ThinkPHP中使用ajax接收json数据的方法.分享给大家供大家参考.具体分析如下: 这里通过ThinkPHP+jquery实现ajax,扩展了下,写了个查询,前台代码如下: 首先 ...
- AJAX如何接收JSON数据
简介 在我们了解如何使用AJAX返回JSON数据的时候要先明白下列几点 1. JSON如何来表示对象的 2. JSON如何来表示数组的 var object = { "labId" ...
- jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
对于问题从后台获取json数据,将内容填充到下拉列表,代码非常简单,具体过程请看下面代码. 需求:url:链接 par:ID sel:下拉列表选择器 function BuildS ...
- iOS key value coding kvc在接收json数据与 model封装中的使用
iOS key value coding kvc在接收json数据与 model封装中的使用 使用 kvc 能够极大的简化代码工作,及以后的接口维护工作: 1:先创建MovieModel类.h和 . ...
- 后端接收json数据交互
学习记录,后端接收json数据几种方式 1.直接接收或者通过HttpServletRequest接收 public void test(String userid, HttpServletReques ...
- Beego框架POST请求接收JSON数据
原文: https://blog.csdn.net/Aaron_80726/article/details/83870563 ------------------------------------- ...
- .NET发送请求(get/post/http/https),携带json数据,接收json数据
C#发送https请求有一点要注意: ServicePointManager.ServerCertificateValidationCallback = new RemoteCertificateVa ...
随机推荐
- vue,一路走来(13)--vue微信分享
vue微信分享 今天记录一下vue微信分享. 1.先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”.这个不多说,见文档,只有绑定了才能进行下一步的动作 2.需要引入js文件 ...
- 解释ARP协议和RARP协议
解释ARP(地址解析协议) 首先,每个主机都会在自己的ARP缓冲区中建立一个ARP列表,以表示IP地址和MAC地址之间的对应关系. 当源主机要发送数据时,首先检查ARP列表中是否有对应IP地址的目的主 ...
- github托管代码
安装git客户端 github是服务端,要想在自己电脑上使用git我们还需要一个git客户端, windows用户请下载 http://msysgit.github.com/ mac用户请下载 htt ...
- 【串线篇】sql注入问题
一.什么是SQL注入?? 二.mybatis是如何避免这种情况的呐? 这就得益于mybatis在底层实现时使用预编译语句.数据库在执行该语句时,直接使用预编译的语句,然后用传入的userId替换占位符 ...
- 安装RabbitMQ服务器及基本配置
RabbitMQ是一个在AMQP协议标准基础上完整的,可复用的企业消息系统.它遵循Mozilla Public License开源协议,采用 Erlang 实现的工业级的消息队列(MQ)服务器,Rab ...
- nuget cli 打包发包
微软官网打包说明:https://docs.microsoft.com/zh-cn/nuget/quickstart/create-and-publish-a-package-using-visual ...
- 初识java-1.Java跨平台的原理
计算机只认识二进制的机器指令,而且不同的平台的计算机的机器指令不同.Java中将程序员编写的源码文件编译成字节码文件,在不同的计算机平台上安装不同的虚拟机,虚拟机将同一份字节码文件解释为不同的机器指令 ...
- linux学习-常用文本处理命令
1.文本处理命令 (1) tr 转换或删除字符 tr [OPTION]...SET1 SET2 选项: -c 取SET1字符串的补集 -d 删除属于SET1中的字符 -s 把连续重复出现的字符以单独一 ...
- 如何在某个apps包下面中创建APP
- Delphi Base64编码/解码
Uses CnBase64: CnBase64.Base64Encode(Edit1.Text, Psw64);