Django 基于 jquery 的 ajax
<1> $.ajax的两种写法:
$.ajax("url",{})
$.ajax({})
<2> $.ajax的基本使用
$.ajax({
url:"//",
data:{a:1,b:2},
type:"GET",
success:function(){}
})
$.get() 方法
创建一个 static 文件夹,用来存储 jquery.min.js
配置 settings.py, 在最后添加
STATICFILES_DIRS=(
os.path.join(BASE_DIR, "static"),
)
添加一个 ajax_jquery.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="func1()">ajax提交</button>
<script src="/static/jquery.min.js"></script>
<script>
function func1() {
Test()
}
function Test() {
$.get("/jquery_get/",{name:"klvchen"});
}
</script>
</body>
</html>
修改 views.py
def jquery_test(req):
return render(req, "ajax_jquery.html")
def jquery_get(req):
print(req.GET)
return HttpResponse("ok")
添加 urls.py
path('jquery_test/', views.jquery_test),
path('jquery_get/', views.jquery_get),
使用自定义 js
修改 ajax_jquery.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="/static/jquery.min.js"></script>
<script>
$.getScript("/static/test.js",function () {
alert(add(1,2))
})
</script>
</body>
</html>
在 static 文件夹下添加 test.js 文件
function add(s,y) {
return s+y
}
$.ajax POST 方法
修改 ajax_jquery.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="/static/jquery.min.js"></script>
<script>
$.ajax({
url:"/jquery_get/",
type:"POST",
data:{a:1,b:2},
})
</script>
</body>
</html>
修改 urls.py
from django.contrib import admin
from django.urls import path
from app01 import views
urlpatterns = [
path('jquery_test/', views.jquery_test),
path('jquery_get/', views.jquery_get),
]
traditional 选项 为false会对数据进行深层次迭代;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="/static/jquery.min.js"></script>
<script>
$.ajax({
url:"/jquery_get/",
type:"POST",
data:{a:1,b:[2,3]},
traditional: true,
})
</script>
</body>
</html>
有 traditional 选项
没有 traditional 选项
ajax 传递 json 格式
修改 ajax_jquery.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="/static/jquery.min.js"></script>
<script>
$.post("/jquery_get/",function (data) {
console.log(data)
console.log(typeof data)
data=JSON.parse(data)
console.log(data["name"])
})
</script>
</body>
</html>
修改 views.py
def jquery_test(req):
return render(req, "ajax_jquery.html")
import json
def jquery_get(req):
print(req.POST)
dic={"name":"lucy"}
return HttpResponse(json.dumps(dic))
ajax 回调函数
修改 ajax_jquery.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="/static/jquery.min.js"></script>
<script>
$.ajax({
url:"/jquery_get/",
type:"POST",
data:{a:1,b:[3,4]},
traditional:true,
dataType:"json",
success: function (data) {
console.log(data)
},
error: function (data) {
console.log(arguments)
alert(data)
}
})
</script>
</body>
</html>
修改 views.py
def jquery_test(req):
return render(req, "ajax_jquery.html")
import json
def jquery_get(req):
print(req.POST)
dic={"name":"lucy"}
return HttpResponse(json.dumps(dic))
Django 基于 jquery 的 ajax的更多相关文章
- Python Django 之 基于JQUERY的AJAX 登录页面
一.基于Jquery的Ajax的实现 1.url 2.vews 3.templates
- 基于jQuery的ajax对WebApi和OData的封装
基于jQuery的ajax对WebApi和OData的封装 WebApi 的使用带来了一个显著的特点,对type有一定的要求.一般ajax的type无非就是两种,GET和POST.如果用JSONP来跨 ...
- 源码来袭!!!基于jquery的ajax分页插件(demo+源码)
前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客 ...
- 基于JS的ajax的实现,JSON和JSONP,基于JQuery的ajax的实现
基于JS的ajax的实现,JSON和JSONP,基于JQuery的ajax的实现1.基于JS的ajax的实现 step1: var xmlhttp = XMLHttprequest() #实例化一个对 ...
- 份-城市,基于jQuery的AJAX二级联动,用Struts2整合AJAX【非数据库版】
package loaderman.provincecity; import java.io.IOException; import java.util.LinkedHashSet; import j ...
- 基于jQuery的AJAX和JSON的实例
通过jQuery内置的AJAX功能,直接访问后台获得JSON格式的数据,然后通过jQuer把数据绑定到事先设计好的html模板上,直接在页面上显示. 我们先来看一下html模板: ...
- 基于jQuery的ajax系列之用FormData实现页面无刷新上传
接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方 ...
- Asp.Net下,基于Jquery的Ajax二级联动
最近做一个项目,要求实现二级联动效果.背景为:通过学院的选择,联动出专业选项.起初想直接用微软的控件实现Ajax效果,但是DropDownList控件会自动触发PostBack,在后台根本就不好控制, ...
- Python学习---基于JQuery的Ajax实现[快捷+底层$.ajax]
快捷API <1>$.get(url, [data], [callback], [type]) <2>$.post(url, [data], [callback], [type ...
随机推荐
- vue--实现跑马灯效果
<div id="app"> <input type="button" value="开始" @click="l ...
- 201871010113-刘兴瑞《面向对象程序设计(java)》第四周学习总结
项目 内容 这个作业属于哪个课程 <任课教师博客主页链接>https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接地址>http ...
- 鲜贝7.3--postman安装
Postman电脑客户端安装: Postman的安装非常简单,在windows系统只需要双击安装包,然后什么都不需要操作,它直接就自己完成了,如下图.如果是mac 也是跟普通软件的安装方法相同.在初次 ...
- JAVA 中加载属性文件的4种方法
小总结 : 这个集合属性可以反序列化, 把持久化数据读出来, 输入流中放入要操作的文件! p.load加载这个输入流! p.getProperty( key) 根据这个键获得值! 补充 : web工程 ...
- 安装oracle 11g及初次链接使用, 解锁及常用命令
1. 安装方法参考原创: https://blog.csdn.net/projectNo/article/details/76533921 2.初次链接数据库时,注意以下: 1. window + r ...
- 洛谷P2508 [HAOI2008]圆上的整点
题目描述 求一个给定的圆$ (x^2+y^2=r^2) $,在圆周上有多少个点的坐标是整数. 输入格式 \(r\) 输出格式 整点个数 输入输出样例 输入 4 输出 4 说明/提示 \(n\le 20 ...
- P3十进制转换为二进制
#include<stdio.h>int main () { int n; scanf("%d",&n); int a[8]; fo ...
- Deepin安装与配置
前言 今年参加CSP-S时仍不太习惯系统,深究其原因,我之前一直是一种应试的心态去学习Linux,学习的大多操作只是为了应试,而非为了"生存"下来,只有能完全摆脱Windows,在 ...
- 网易云信技术分享:IM中的万人群聊技术方案实践总结
本文来自网易云信团队的技术分享,原创发表于网易云信公众号,原文链接:mp.weixin.qq.com/s/LT2dASI7QVpcOVxDAsMeVg,收录时有改动. 1.引言 在不了解IM技术的人眼 ...
- C# 匿名回调方法在循环体中使用的注意事项
今天在做AVG工具的选择分支功能时发现了一个问题,先把代码贴上来: private void SelectionParse(string value) { string[] ss = value.Sp ...