<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的更多相关文章

  1. Python Django 之 基于JQUERY的AJAX 登录页面

    一.基于Jquery的Ajax的实现 1.url 2.vews 3.templates

  2. 基于jQuery的ajax对WebApi和OData的封装

    基于jQuery的ajax对WebApi和OData的封装 WebApi 的使用带来了一个显著的特点,对type有一定的要求.一般ajax的type无非就是两种,GET和POST.如果用JSONP来跨 ...

  3. 源码来袭!!!基于jquery的ajax分页插件(demo+源码)

    前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客 ...

  4. 基于JS的ajax的实现,JSON和JSONP,基于JQuery的ajax的实现

    基于JS的ajax的实现,JSON和JSONP,基于JQuery的ajax的实现1.基于JS的ajax的实现 step1: var xmlhttp = XMLHttprequest() #实例化一个对 ...

  5. 份-城市,基于jQuery的AJAX二级联动,用Struts2整合AJAX【非数据库版】

    package loaderman.provincecity; import java.io.IOException; import java.util.LinkedHashSet; import j ...

  6. 基于jQuery的AJAX和JSON的实例

    通过jQuery内置的AJAX功能,直接访问后台获得JSON格式的数据,然后通过jQuer把数据绑定到事先设计好的html模板上,直接在页面上显示. 我们先来看一下html模板:            ...

  7. 基于jQuery的ajax系列之用FormData实现页面无刷新上传

    接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方 ...

  8. Asp.Net下,基于Jquery的Ajax二级联动

    最近做一个项目,要求实现二级联动效果.背景为:通过学院的选择,联动出专业选项.起初想直接用微软的控件实现Ajax效果,但是DropDownList控件会自动触发PostBack,在后台根本就不好控制, ...

  9. Python学习---基于JQuery的Ajax实现[快捷+底层$.ajax]

    快捷API <1>$.get(url, [data], [callback], [type]) <2>$.post(url, [data], [callback], [type ...

随机推荐

  1. GPU驱动安装&cuda

    版权声明:本文为博主原创文章,支持原创,转载请附上原文出处链接和本声明.  本文链接地址:https://www.cnblogs.com/wannengachao/p/11947668.html 驱动 ...

  2. 矩阵补全(Matrix Completion)和缺失值预处理

    目录 1 常用的缺失值预处理方式 1.1 不处理 1.2 剔除 1.3 填充 2 利用矩阵分解补全缺失值 3 矩阵分解补全缺失值代码实现 4 通过矩阵分解补全矩阵的一些小问题 References 矩 ...

  3. 15.Java基础_初探对象

    package pack1; public class Phone { //成员变量 String brand; int price; //成员方法 public void call(){ Syste ...

  4. 【西北师大-2108Java】第二次作业成绩汇总

    2[西北师大-2108Java]第二次作业成绩汇总 以命令行方式或在Eclipse集成开发环境中编辑.编译.运行第3章示例程序3-1-3-5,结合程序运行结果理解程序代码,每个示例程序从语法.算法两个 ...

  5. day45_9_4前端(2)css

    一.css的三种css导入: 1.在标签中内部定义(不推荐). 2.在head中的style总定义样式. 3.使用link链接外部的css文件. <!DOCTYPE html> <h ...

  6. 求GCD(最大公约数)的两种方式

    求GCD(最大公约数)的两种方式 这篇随笔讲解C++语言程序设计与应用中求GCD(最大公约数,下文使用GCD代替)的两种常用方式:更相减损法和辗转相除法,前提要求是具有小学数学的基本素养,知道GCD是 ...

  7. C实现string字符串

    在C中实现string字符串,使用typedef将string定义为char *. #include <stdio.h> #include <stdlib.h> #includ ...

  8. paramiko简介

    一.什么是paramiko 要想明白什么是paramiko,要先明白ssh协议. 二.什么是ssh协议 ssh全称是Secure Shell (翻译:安全的外壳),根据字面意思就可以知道是和安全相关的 ...

  9. Uboot启动流程分析(二)

    1.前言 在前面的文章Uboot启动流程分析(一)中,链接如下: https://www.cnblogs.com/Cqlismy/p/12000889.html 已经简单地分析了low_level_i ...

  10. Exercises for IN1900

    Exercises for IN1900October 14, 2019PrefaceThis document contains a number of programming exercises ...