• ＊Django中的Ajax jq的书写样式1

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

    Ajax的get请求与post请求

    urls.py

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

    views.py

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

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

    07.html【get请求】

    1. {% load static %}
    2. html>
    3. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>Titletitle>
    7.     <script src="{% static 'jquery-3.6.0.min.js' %}">script>
    8. head>
    9. <body>
    10.     用户名：<input type="text"><br>
    11.     密码：<input type="password">
    12.     <button>sendbutton>
    13.     <script>
    14.         $('button').click(function (){
    15.             $.ajax({
    16.                 url:'/p2/',
    17.                 method:'get',
    18.                 data: {
    19.                     name:$('input[type=text]').val(),
    20.                     pwd:$('input[type=password]').val(),
    21.                 },
    22.                 // 上面的data是传入数据，下面的data是返回的数据
    23.                 success:function (data){
    24.                     console.log(data)
    25.                 },
    26.                 error:function (xhr, status, error){
    27.                     console.log(error)
    28.                 }
    29.             })
    30.         })
    31.     script>
    32. body>
    33. html>

    07.html【post请求】

    1. {% load static %}
    2. html>
    3. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>Titletitle>
    7.     {% csrf_token %}
    8.     <script src="{% static 'jquery-3.6.0.min.js' %}">script>
    9. head>
    10. <body>
    11.     用户名：<input type="text"><br>
    12.     密码：<input type="password">
    13.     <button>sendbutton>
    14.     <script>
    15.         function getCookie(name) {
    16.             var cookieValue = null;
    17.             if (document.cookie && document.cookie !== '') {
    18.                 var cookies = document.cookie.split(';');
    19.                 for (var i = 0; i < cookies.length; i++) {
    20.                     var cookie = jQuery.trim(cookies[i]);
    21.                     // Does this cookie string begin with the name we want?
    22.                     if (cookie.substring(0, name.length + 1) === (name + '=')) {
    23.                         cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
    24.                         break;
    25.                     }
    26.                 }
    27.             }
    28.             return cookieValue;
    29.         }
    30.         $(function (){
    31.             $('button').click(function (){
    32.                 $.ajax({
    33.                     url:'/p2/',
    34.                     method:"post",
    35.                     data: {
    36.                         name:$('input[type=text]').val(),
    37.                         pwd:$('input[type=password]').val(),
    38.                     },
    39.                     beforeSend: function (xhr) {
    40.                         xhr.setRequestHeader("X-CSRFToken", getCookie("csrftoken"));
    41.                     },
    42.                     success:function (data){
    43.                         console.log(data)
    44.                     }
    45.                 })
    46.             })
    47.         })
    48.     script>
    49. body>
    50. html>

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

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

    edge浏览器

    Google浏览器

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

    Json文件

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

    data.json

    1. {
    2.   "total": 4,
    3.   "data": [
    4.     {
    5.       "name": "三国演义",
    6.       "category": "文学",
    7.       "desc": "一个军阀混战的年代"
    8.     },{
    9.       "name": "三国演义2",
    10.       "category": "文学2",
    11.       "desc": "一个军阀混战的年代2"
    12.     }
    13.   ],
    14.   "obj": {"adf": "adf"}
    15. }

    urls.py 

    1. #获取json数据
    2. path('in4/',views.in4)
    3.  
    4. #json数据
    5. path('gjson/', views.Jsond, name='gjson'),

     views.py

    1. def Jsond(request):#JsonResponse(json文件)
    2.     with open('static/data.json', 'r') as json_file:
    3.         data = json.load(json_file)
    4.     response = JsonResponse(data)
    5.  
    6.     # 设置X-Content-Type-Options头部
    7.     response['X-Content-Type-Options'] = 'nosniff'
    8.  
    9.     return response
    10.  
    11.  
    12. def in4(request):
    13.     return render(request,'08.html')

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

    1. from django.http import JsonResponse
    2.  
    3. def Jsond(request):#JsonResponse(json文件)
    4.     with open('static/data.json', 'r') as json_file:
    5.         data = json.load(json_file)
    6.  
    7.     return JsonResponse(data)

     08.html

    1. {% load static %}
    2. html>
    3. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>Titletitle>
    7.     <script src="{% static 'jquery-3.6.0.min.js' %}">script>
    8.     <style>
    9.         h3{
    10.             color:darkorange;
    11.         }
    12.     style>
    13. head>
    14. <body>
    15.     <button>clickbutton>
    16.     <hr>
    17.     <ul>
    18.         
    19.     ul>
    20. <script>
    21.     $(function (){
    22.         $('button').click(function (){
    23.             $.ajax({
    24.                 url:'/static/data.json',
    25.                 method:'get',
    26.                 cache: false,
    27.                 success:function (da){
    28.                     {#console.log(da)//直接就是json格式#}
    29.                     arr=da.data
    30.                     str=''
    31.                     for(var i=0;i
    32.                         {#网络不稳定时会报错但不影响使用#}
    33.                         str+=`<li>
    34.                                         <h3>书名：${arr[i].name}h3>
    35.                                         <h6>类别：${arr[i].name}h6>
    36.                                         <p>简介：${ arr[i].desc}p>
    37.                                     li>`;
    38.                     }
    39.                     $('ul').html(str)
    40.                 },
    41.                 error:function (xhr,status,error){
    42.                     console.log(error)
    43.                 }
    44.             })
    45.         })
    46.     })
    47. script>
    48. body>
    49. html>

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

    点击click后

  • 相关阅读:
    深度测评FL Studio性能，多年Fl Studio使用感受分享
    怎么在 OJ 上用 JavaScript 写算法题，赶快学起来~
    《数字图像处理-OpenCV/Python》连载（22）绘制直线与线段
    记首次参加网络安全比赛（初赛-知识竞赛，决赛-CTF夺旗赛-解题模式）
    Thread 类的基本用法
    【软考】__集成_考前20问
    算法金 | 10 大必知的自动化机器学习库（Python）
    字符串和内存函数
    软件项目管理（第二版 宁涛）问答题（个人背诵）
    Android AMS——进程优先级更新（十八）
  • 原文地址：https://blog.csdn.net/m0_62836433/article/details/134034370