jquery ajax几种书写方式的总结
Ajax在前端的应用极其广泛,因此,我们有必要对其进行总结,以方便后期的使用。
AJAX优点:
可以异步请求服务器的数据,实现页面数据的实时动态加载, 在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
jquery在全局对象jquery(也就是$)绑定了ajax()函数,可以处理Ajax请求,ajax常用的配置选项有:
- async 是否异步执行,默认为True,千万不要指定为False
- method 发送的Method,缺省为“GET”,可指定为‘POST’,'PUT','DELETE', 单词字母必须大写
- contentType 发送POST请求的格式,默认值为'application/x-www-form-urlencoded; charset=UTF-8',也可以指定为‘text/plain’ 'application/json'
- data 发送给后端的数据,可以是字符串、数组或对象。如果是GET请求,data将被转换成query附加到url上;如果是POST请求,根据contentType把data序列化成合适的格式
- dataType 接收的数据格式,可以指定为'html' 'xml' 'json' 'text'等,缺省情况下根据响应的Content-Type猜测
- headers 发送的额外的HTTP请求头,必须是一个Object
语法一:$.ajax({name:value, name:value, ...})
# 登录js代码
$(".form-login").submit(function (e) {
e.preventDefault();
mobile = $("#mobile").val();
pwd = $("#password").val();
var data = {
mobile: mobile,
pwd: pwd
};
$.ajax({
url: "/api/***",
type: "POST",
data: JSON.stringify(data),
contentType: "application/json",
dataType: "json",
headers: {"X-CSRFToken": getCookie('csrf_token')},
success: function (resp) {
if (resp.error == 0){
// resp 是后端通过json.dumps()返回的json格式数据:res={"error":0, "errmsg":"登录失败"}
// resp = json.dumps(res)
// 请求成功,跳转页面
location.href = '/'
}
else {
alert(resp.errmsg)
}
}
})
})
$.ajax()
语法二:$.get(URL, params, function(resp, status_code){})
URL必需参数;
params可选参数,params={key:value...}, 会以?key=value&key=value...的方式自动添加到URL后面
function(resp, status_code) 可选参数,是请求成功后所执行的函数,resp是后台返回的数据; states_code是自动生成的响应状态码,可缺省
# 更新首页房源展示信息
var params = {
aid: 0,
sd: "2018-2-20",
ed: "2019-2-29",
page: 1
};
$.get("/api/v1_0/houses", params, function(resp){
if (resp.error == 0){
$(".house-list").html(template("house-list-tmpl", {houses:resp.data.houses}));
}
else {
$(".house-list").append(template("house-list-tmpl", {houses: resp.data.houses}));
}
})
$.get()
语法三:$.post(URL, data, function(resp, states_code){})
URL必选参数;
data 可选参数 连同请求发送的数据;
function(resp, status_code) 可选参数,是请求成功后所执行的函数,resp是后台返回的数据; states_code是自动生成的响应状态码,可缺省
$("button").click(function(){
$.post("/try/ajax/demo_test_post.php",
{
name:"mjy",
url:"https://cnblogs.com/We612/"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});
});
说明:
$.GET 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。
$.POST 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。
实际应用中多用到语法一 语法二, 语法三较少
jquery ajax几种书写方式的总结的更多相关文章
- Struts2框架(3)---Action类的3种书写方式
Action类的3种书写方式 本文主要写有关写Action类的3种书写方式: (1)第一种 Action可以是POJO (简单模型对象) 不需要继承任何父类 也不需要实现任何接口 (2)实现Acti ...
- jQuery中的Ajax几种请求方式
1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. url (String) : 请求的HTML页的URL地址. data (M ...
- ajax 几种提交方式
方式一: $.ajax({ type: 'POST', url: "/user/editPwd.htm", data: {"oldPassword":oldPa ...
- [jquery-ajax] jquery ajax 三种情况对比
<button class="btn1">async:false</button> <button class="btn2"> ...
- css的四种书写方式
优先级: 外部样式 < 内部样式表 < 内联样式表: 优先级,即:同名的选择器右边的会覆盖左边 1.内部样式表 <head> <style> /*内部样式表,一般用 ...
- ajax两种不同方式的不同结果
function upLoadAlterData(){ $("#form_main").ajaxSubmit({ url:"XX", cache:false, ...
- css的三种书写方式
一.内联样式 <p style="color: sienna; margin-left: 20px"> This is a paragraph </p> 二 ...
- JavaScript权威设计--jQuery,Ajax.animate,SVG(简要学习笔记二十)[完结篇]
1.$和jquery在全局命名空间中定义的唯一两个变量. 2.jquery是工厂函数,不是构造函数.他返回一个新创建的对象. 3.jquery的四种调用方式: <1>传递C ...
- mvc数组绑定-jquery ajax
var list=[];//数组 list[0]=1001; list[1]=1002; list[1]=1003; var json_data = { selected: list}; $.ajax ...
随机推荐
- 基于Log4Net本地日志服务简单实现
背景 项目开发中,我们或多或少会使用诸如NLog,Log4Net,Kafka+ELK等等日志套件: 基于关注点分离原则,业务开发的时候不应该关注日志具体实现:并且后续能方便切换其他日志套件: 这里先实 ...
- Java基础系列-Stream
原创作品,可以转载,但是请标注出处地址:https://www.cnblogs.com/V1haoge/p/10748817.html 一.概述 Stream操作简称流操作,这里的流与IO流毫无关系, ...
- docker run 之后执行多条命令
执行 ls docker run microsoft/dotnet ls && cd /root 执行 多条使用sh -c命令 在run后面加了一个sh -c命令,后面直接加多条语句即 ...
- 简简单单的Vue4(vue-cie@3.x,vue’Debug[调试],vue‘sHttp)
既然选择了远方,便只顾风雨兼程! __HANS许 系列:零基础搭建前后端分离项目 系列:零基础搭建前后端分离项目 vue-cli@3.x 创建项目 Vue的Debug(调试) Vue的Http请求 提 ...
- 戏说程序猿之cannot find the object
“别开玩笑了,程序员哪里需要对象!” 程序员难找对象原因无非如下: 1.工作时间长,恋爱时间少 2.性格偏于内向,不主动 3.不注意个人形象 程序员爱情观: 爱情就是死循环,一旦执行就陷进去了: 爱上 ...
- 升鲜宝V2.0_生鲜配送行业,对生鲜配送系统开发与实施的深度对比与思考_升鲜宝生鲜配送系统_15382353715_余东升
升鲜宝V2.0_生鲜配送行业,对生鲜配送系统开发与实施的深度对比与思考_升鲜宝生鲜配送系统_15382353715_余东升 笔者从事生鲜配送软件开发接近10年,前前后后研究了很多 ...
- 【Android】用Cubism 2制作自己的Live2D——初见!
前言- 现在很多手游的UI上都不约而同的放置一个Live2D模型,这仿佛已经成为了一个业界的潜规则之类的东西.作为一名深受手机游戏毒害的90后,我也没有忘记小时候励志当一名技术宅的梦想,也想试试自己做 ...
- 在react中实现打印功能
最近项目中,前端采用react+antd+dva的组合,已经完成了后头管理类系统产品的更新迭代工作. 今天有一个新需求,需要在后台管理系统中实现点击打印完成指定页面的打印功能. 之前也没接触过,只知道 ...
- 关于写作那些事之github告诉我构建失败,然后呢?
The page build failed for the master branch with the following error 问题描述 看到这封邮件,一脸懵逼,本地运行 gitbook 服 ...
- MATLAB 音响系统工具箱
音响系统工具箱 设计和测试音频处理系统 发行说明 pdf文档 音频系统工具箱™为音频处理系统的设计,仿真和桌面原型设计提供了算法和工具.它支持低延迟信号流式传输到音频接口,交互式参数调整以及数字音频工 ...