jquery使用ajax
前端jquery使用ajax的几种方法:
$.ajax使用:
$.ajax({
url:'/test_ajax', #发送url
data:{a:,b:,csrfmiddlewaretoken:'{{ csrf_token }}'}, #post方式在Django中需要使用令牌防止跨站请求伪造
type:"post", #请求方式,get, post...
dataType:"text", #返回的数据类型,text,json, xml...
success:function(data){ #成功返回后调用的回调函数
alert(data)
}
})
$.post使用:
$.post(
'/test_ajax', #url
{a:,b:,csrfmiddlewaretoken:'{{ csrf_token }}'}, #令牌
function(data){ #成功时的回调函数
alert(data)
},
'text' #设置返回的数类型
)
jQuery 1.12 中 jQuery.post支持对象参数,具体的参数可以参考 $.ajax():现在某些版本并不适用
$.post({
url:'/test_ajax',
data:{a:,b:,csrfmiddlewaretoken:'{{ csrf_token }}'},
dataType:"text",
success:function(data){
alert(data)
}
})
$.get使用:(同post,不需要令牌)
$.get(
'/test_ajax',
{a:,b:},
function(data){
alert(data)
},
'text'
)
补充:
$.getScript:即时加载--->通过 HTTP GET 请求载入并执行一个 JavaScript 文件。
jQuery 1.2 版本之前,getScript 只能调用同域 JS 文件。 1.2中,您可以跨域调用 JavaScript 文件。注意:Safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript 加入脚本,请加入延时函数。
html代码:
<input type="button" value="getscript" onclick="func();"/>
<input type="button" value="say" onclick="say();"/>
JavaScript代码:
function func() {
$.getScript("/static/test.js",function () { #第一个参数为加载的文件,第二个为成功加载后回调函数
alert("ok")
})
}
test.js文件:
function say(){
alert("hello")
}
先点击getscript按钮加载文件,再点击say可以执行test.js中的函数
$.getJSON使用:
html:
<input type="button" value="getjson" onclick="func_json();"/>
script:
function func_json(){
$.getJSON("/get_json",function (data) { #请求url(也可以直接载入json静态资源文件),和成功载入后的回调函数
alert(data.username)
})
}
#补充:javascript中将字符串转json对象 JSON.parse()
后台:
url(r"^get_json",views.get_json) def get_json(req):
data = {"username":"lsda","age":}
data = json.dumps(data)
return HttpResponse(data)
补充参数:statusCode
$.ajax({
statusCode: {: function() {
alert('page not found');
}
});
服务端设置状态码:
HttpResponse.status_code=""
更多请看:http://jquery.cuishifeng.cn/jQuery.Ajax.html官网
jquery使用ajax的更多相关文章
- jQuery之ajax实现篇
jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...
- 【原创经验分享】JQuery(Ajax)调用WCF服务
最近在学习这个WCF,由于刚开始学 不久,发现网上的一些WCF教程都比较简单,感觉功能跟WebService没什么特别大的区别,但是看网上的介绍,就说WCF比WebService牛逼多少多少,反正我刚 ...
- jQuery版AJAX简易封装
开发过程中,AJAX的应用应该说非常频繁,当然,jQuery的AJAX函数已经非常好用,但是小编还是稍微整理下,方便不同需求下,可以简化输入参数,下面是实例代码: $(function(){ /** ...
- JS原生ajax与Jquery插件ajax深入学习
序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...
- 重写jquery的ajax方法
//首先备份下jquery的ajax方法 var _ajax=$.ajax; //重写jquery的ajax方法 $.ajax=function(opt){ //备份opt中error和success ...
- Jquery通过Ajax方式来提交Form表单
今天刚好看到Jquery的ajax提交数据到服务器的方法,原文是: 保存数据到服务器,成功时显示信息. jQuery 代码: $.ajax({ type: "POST", url: ...
- 对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache
虽然jquery的较新的api已经很好用了, 但是在实际工作还是有做二次封装的必要,好处有:1,二次封装后的API更加简洁,更符合个人的使用习惯:2,可以对ajax操作做一些统一处理,比如追加随机数或 ...
- jquery管理ajax异步-deferred对象
今天跟大家分享一个jquery中的对象-deferred.其实早在jquery1.5.0版本中就已经引入这个对象了.不过可能在实际开发过程中用到的并不多,所以没有太在意. 这里先不说deferred的 ...
- Struts2 使用jQuery实现Ajax
在jQuery中将Ajax相关的操作进行封装,使用时只需在合适的地方调用Ajax相关的方法即可,相比而言,使用jQuery实现Ajax更加简洁,方便 1.$.Ajax()可以通过发送Http请求加载远 ...
- JQuery中Ajax的操作
JQuery Ajax异步操作的方式: $.ajax,$.post, $.get, $.getJSON. 一, $.ajax,这个是JQuery对ajax封装的最基础步,通过使用这个函数可以完成异 ...
随机推荐
- Nuxt 开发 - 项目初始化
Nuxt是基于Vue的一个应用框架,采用服务端渲染(SSR),可以让用户的Vue单页面应用(SPA)也可以有利于SEO. 项目初始化 参考:https://zh.nuxtjs.org/guide/in ...
- [LOJ#6033]. 「雅礼集训 2017 Day2」棋盘游戏[二分图博弈、匈牙利算法]
题意 题目链接 分析 二分图博弈经典模型,首先将棋盘二分图染色. 考虑在某个最大匹配中: 如果存在完美匹配则先手必败,因为先手选定的任何一个起点都在完美匹配中,而后手则只需要走这个点的匹配点,然后先手 ...
- [CF1083D]The Fair Nut’s getting crazy[单调栈+线段树]
题意 给定一个长度为 \(n\) 的序列 \(\{a_i\}\).你需要从该序列中选出两个非空的子段,这两个子段满足 两个子段非包含关系. 两个子段存在交. 位于两个子段交中的元素在每个子段中只能出现 ...
- 第二十九章 springboot + zipkin + mysql
zipkin的数据存储可以存在4个地方: 内存(仅用于测试,数据不会持久化,zipkin-server关掉,数据就没有了) 这也是之前使用的 mysql 可能是最熟悉的方式 es Cassandra ...
- JQ_插件开发
在开发过很多 jQuery 插件以后,我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模式.这样我就可以 copy & paste 大部分的代码结构,只要专注最主要的逻辑代码就行了. ...
- Final互评------《弹球学成语》---- 杨老师粉丝群
一.基于NABCD评论作品,及改进建议 1.根据(不限于)NABCD评论作品的选题; N(Need,需求):本产品面相青少年及小学生,基于这些用户数量再加上一些休闲玩家,需求量还是比较大的. A ...
- java实验报告三
实验三 敏捷开发与XP实践 一.实验内容 1. XP基础 2. XP核心实践 3. 相关工具 二.实验步骤 (一)敏捷开发与XP 软件工程是把系统的.有序的.可量化的方法应用到软件的开发.运营和维护上 ...
- Practice1小学四则运算(改进)
#include<stdio.h> #include<stdlib.h> #include<time.h> void srand(unsigned);//随机生成不 ...
- Winform设置托盘程序,托盘显示
1.拖一个NotifyIcon,一个ContextMenuStrip控件到主窗体中 2.设置notifyIcon1,一个contextMenuStrip1(如下图) Icon为托盘图标,Text托盘显 ...
- 组件 --BreadCrumb--面包屑
面包屑组件多用于导航栏,对于大型网站,做面包屑导航栏 .breadcrumb .breadcrumb-item .active:表示现在正处在该页面 效果截图: 代码: <nav> < ...