<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. ssh-copy-id 实现ssh无密码登录 openssh putty

    ssh-keygen 生成公私钥对 $ssh-keygen ssh-copy-id将本机的公钥复制到远程机器 ssh-copy-id -i .ssh/id_rsa.pub(公钥路径) 用户名字@192 ...

  2. 用户和组的权限管理/特殊权限和ACL（个人笔记）

    个人学习笔记总结 内容包括解释Linux的安全模型解释用户帐号和组群帐号的目的用户和组管理命令理解并设置文件权限默认权限特殊权限ACL介绍安全3A资源分派:Authentication:认证Auth ...

  3. fetchone函数和fetchall函数返回值的区别

     fetchone函数和fetchall函数返回值的区别 1.fetchone() 返回单个的元组,也就是一条记录(row),如果没有结果,则python返回 None 有结果时,如图: 没结果时,如 ...

  4. Jmeter Question 之“集成Ant+Jenkins自动化”

    首先介绍一下Ant.Apache Ant,是一个将软件编译.测试.部署等步骤联系在一起加以自动化的一个工具,大多用于Java环境中的软件开发.由Apache软件基金会所提供. 是的.还是Apache家 ...

  5. DRF视图功能介绍(2)

    本帖最后由 杰哥,我就服你 于 2018-12-20 13:22 编辑 Django rest framework(DRF) D:是一个用于构建Web API强大又灵活的框架,基于Django框架二次 ...

  6. c# WF 第6节 MDI窗体

    本节内容: 1:SDI 窗体是什么 2: MDI 窗体是什么 3:如何创建MDI窗体 1:SDI 窗体是什么 SDI 窗体 : single-document interface 单一的窗体:上篇的启 ...

  7. c# 第38节 接口的实现

    本节内容: 1:接口的两种实现是什么 2:隐式实现接口的说明 3:为什么有显式 以及显式声明格式 4:实现显式接口 1:接口的两种实现是什么 隐式实现接口:(当继承的父类直接没有相同的方法时) 即可用 ...

  8. 201871010113-刘兴瑞《面向对象程序设计（java）》第六-七周学习总结

    项目 内容 这个作业属于哪个课程 <任课教师博客主页链接> https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接地址>htt ...

  9. selenium定位元素的八种方法

    web driver提供了八种元素定位的方法: id, name, class name, tag name, link text, partial link text, xpath, css sel ...

  10. zz《分布式服务架构 原理、设计与实战》综合

    这书以分布式微服务系统为主线,讲解了微服务架构设计.分布式一致性.性能优化等内容,并介绍了与微服务系统紧密联系的日志系统.全局调用链.容器化等. 还是一样,每一章摘抄一些自己觉得有用的内容,归纳整理, ...