*Django中的Ajax jq的书写样式1

这篇具有很好参考价值的文章主要介绍了*Django中的Ajax jq的书写样式1。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

导入插件,导入jquery,json是添加的json文件

*Django中的Ajax jq的书写样式1,django,python,后端

Ajax的get请求与post请求

urls.py

path('in3/',views.in3),

views.py

def in3(request):
    return render(request,'07.html')

要返回数据的path没有写,html就是下面图片中控制台的内容,记得传递参数

07.html【get请求】

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="{% static 'jquery-3.6.0.min.js' %}"></script>
</head>
<body>
    用户名:<input type="text"><br>
    密码:<input type="password">
    <button>send</button>
    <script>
        $('button').click(function (){
            $.ajax({
                url:'/p2/',
                method:'get',
                data: {
                    name:$('input[type=text]').val(),
                    pwd:$('input[type=password]').val(),
                },
                // 上面的data是传入数据,下面的data是返回的数据
                success:function (data){
                    console.log(data)
                },
                error:function (xhr, status, error){
                    console.log(error)
                }
            })
        })
    </script>
</body>
</html>

07.html【post请求】

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {% csrf_token %}
    <script src="{% static 'jquery-3.6.0.min.js' %}"></script>
</head>
<body>
    用户名:<input type="text"><br>
    密码:<input type="password">
    <button>send</button>
    <script>
        function getCookie(name) {
            var cookieValue = null;
            if (document.cookie && document.cookie !== '') {
                var cookies = document.cookie.split(';');
                for (var i = 0; i < cookies.length; i++) {
                    var cookie = jQuery.trim(cookies[i]);
                    // Does this cookie string begin with the name we want?
                    if (cookie.substring(0, name.length + 1) === (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }
        $(function (){
            $('button').click(function (){
                $.ajax({
                    url:'/p2/',
                    method:"post",
                    data: {
                        name:$('input[type=text]').val(),
                        pwd:$('input[type=password]').val(),
                    },
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader("X-CSRFToken", getCookie("csrftoken"));
                    },
                    success:function (data){
                        console.log(data)
                    }
                })
            })
        })
    </script>
</body>
</html>

*Django中的Ajax jq的书写样式1,django,python,后端

post请求比get请求要多一个csrf请求头,不写报404错误

绝大多数情况使用get,传递密码这些用post,post只是相对于get安全点

edge浏览器

*Django中的Ajax jq的书写样式1,django,python,后端

Google浏览器

*Django中的Ajax jq的书写样式1,django,python,后端

请求头,返回数据都是一样的,有报错的话,还是使用谷歌浏览器,Edge浏览器有些报错信息写的不详细 

Json文件

json文件要放在static文件下才会识别到

data.json

{
  "total": 4,
  "data": [
    {
      "name": "三国演义",
      "category": "文学",
      "desc": "一个军阀混战的年代"
    },{
      "name": "三国演义2",
      "category": "文学2",
      "desc": "一个军阀混战的年代2"
    }
  ],
  "obj": {"adf": "adf"}
}

urls.py 

#获取json数据
path('in4/',views.in4)

#json数据
path('gjson/', views.Jsond, name='gjson'),

 views.py

def Jsond(request):#JsonResponse(json文件)
    with open('static/data.json', 'r') as json_file:
        data = json.load(json_file)
    response = JsonResponse(data)

    # 设置X-Content-Type-Options头部
    response['X-Content-Type-Options'] = 'nosniff'

    return response


def in4(request):
    return render(request,'08.html')

json也可以写为这样,不过要导入JsonResponse

from django.http import JsonResponse

def Jsond(request):#JsonResponse(json文件)
    with open('static/data.json', 'r') as json_file:
        data = json.load(json_file)

    return JsonResponse(data)

 08.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="{% static 'jquery-3.6.0.min.js' %}"></script>
    <style>
        h3{
            color:darkorange;
        }
    </style>
</head>
<body>
    <button>click</button>
    <hr>
    <ul>
        <!-- 存放ul -->
    </ul>
<script>
    $(function (){
        $('button').click(function (){
            $.ajax({
                url:'/static/data.json',
                method:'get',
                cache: false,
                success:function (da){
                    {#console.log(da)//直接就是json格式#}
                    arr=da.data
                    str=''
                    for(var i=0;i<arr.length;i++){
                        {#网络不稳定时会报错但不影响使用#}
                        str+=`<li>
                                        <h3>书名:${arr[i].name}</h3>
                                        <h6>类别:${arr[i].name}</h6>
                                        <p>简介:${ arr[i].desc}</p>
                                    </li>`;
                    }
                    $('ul').html(str)
                },
                error:function (xhr,status,error){
                    console.log(error)
                }
            })
        })
    })
</script>
</body>
</html>

这里多了cashe,默认为true,缓存请求的数据至浏览器,以减少下次请求时间,【改变json文件后,需要改为false或关闭浏览器重新启动服务器,用以清除缓存好的数据】

点击click后

*Django中的Ajax jq的书写样式1,django,python,后端文章来源地址https://www.toymoban.com/news/detail-714066.html

到了这里,关于*Django中的Ajax jq的书写样式1的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 浅谈Python中的Django框架

    Django框架在Python开发很重要,Django框架是一个web框架,且是一个后端框架程序,它不是服务器,需要注意Django框架帮我们封装了很多的组件,帮助我们实现各种功能,具有很强的扩展性。 Django是Python社区两大受欢迎的Web框架之一。 凭借功能强大的脚手架和诸多开箱即用的组件,用

    2024年02月07日
    浏览(44)
  • django中使用ajax发送请求

    浏览器向网站发送请求时 是以URL和表单的形式提交的post 或get 请求,特点是:页面刷新 除此之外,也可以基于ajax向后台发送请求(异步) 依赖jQuery 编写ajax代码 1、在django 中使用ajax发送post请求,通过下面方法免除csrf_token 2、想要去数据库中获取数据时:可以是对象也可以

    2024年02月13日
    浏览(45)
  • django Ajax--前后端数据交互

    Django的Ajax和JavaScript的Ajax实质上是指同一种技术,即异步JavaScript和XML(Asynchronous JavaScript and XML)。它允许在不刷新整个页面的情况下,通过前后端之间的异步交互来获取或发送数据。 区别在于角色和层次: Django的Ajax: Django的Ajax通常是指在Django框架中使用Ajax技术的方式。

    2024年02月14日
    浏览(50)
  • Python智能家居系统后端源码,基于Django+MQTT+ESP8266的智能家居系统源码

    代码下载地址:Python智能家居系统后端源码 服务器硬件环境: 处理器:Intel® Xeon® CPU E5-2680 v4 @ 2.40GHz 1核 内存:2GB 硬盘空间:60GB 单片机环境: 单片机:ESP8266-12E NodeMCU 开发环境:Arduino IDE(1.8.19) 软件环境: 操作系统:Ubuntu 18.04 LTS 编程语言:Python(3.7.9) Web后端框架:

    2024年02月02日
    浏览(62)
  • 前端知识笔记(二)———Django与Ajax

    特点:         异步提交         局部刷新 例子:github注册 动态获取用户名实时的跟后端确认并实时的展示到前端(局部刷新)  朝后端发送请求的方式         1.浏览器地址栏直接输入url回车 -----》get请求         2.a标签的href属性  -----》get请求         3.form表单 --

    2024年02月05日
    浏览(41)
  • Django之ORM的锁,开启事务,Ajax

    select_for_update中的两个参数了解即可,因为在MySQL中压根不支持开启它们 一般情况下如果其他事务锁定了相关行,那么本查询将被阻塞,直到锁被释放。 如果这不想要使查询阻塞 的话,使用select_for_update(nowait=True)。 如果其它事务持有冲突的锁,互斥锁, 那么查询将引发 Data

    2024年02月12日
    浏览(40)
  • Django高级扩展之静态文件和ajax使用

    目录 使用静态文件 创建静态文件目录 Settings.py配置 创建css文件 路由与视图 设置路由 视图 模板使用静态文件 调用css 调用js 调用图片 优化路径 加载标签 修改文件路径 修改图片路径 修改js路径 修改css路径 使用Ajax 应用场景 示例 路由 视图 模板 Javascript 总结 css、js、图片、

    2024年02月09日
    浏览(52)
  • Django_静态资源配置和ajax(九)

    目录 一、静态资源配置  二、AJAX ajax作用 使用ajax 1、环境配置  2、创建html模板文件 3、编写视图函数并添加路由 4、运行django开发服务器进行验证 源码等资料获取方法 静态资源的相关配置都在项目目录下的 settings.py 文件中进行配置。配置参数如下:  注意:django查找静态

    2024年02月15日
    浏览(40)
  • Django后端开发——Django应用及分布式路由

    B站网课:点击蓝色字体跳转 或者复制链接在浏览器打开:https://www.bilibili.com/video/BV1vK4y1o7jH?p=14vd_source=597e21cf34ffcdce468ba00be2177e8a 终端: 在settings.py的INSTALLED_APPS中添加应用名即可 news开头的交由news管理 music开头的交由music管理 Step1 - 主路由中调用include函数 语法:include(‘app名

    2024年02月19日
    浏览(61)
  • 【后端】Django与Django REST Framework的结合使用

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 随着开发语言及人工智能工具的普及,使得越来越多的人会主动学习使用一些开发语言,本文主要介绍Django与Django REST Framework的结合使用。 创建Django项目通常包括以下步骤: 安装Django : 首先,确保你的

    2024年04月26日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包