Ajax URL 未在 views.py 中执行正确的功能，如 urls.py 中所定义

Posted 2023-02-24

【中文标题】Ajax URL 未在 views.py 中执行正确的功能，如 urls.py 中所定义

【英文标题】：Ajax URL Not Executing The Correct Function in views.py As Defined in urls.py

【发布时间】：2022-01-11 10:06:49

【问题描述】：

我将 Ajax 用于一些饼图，但 data-ajax-url 没有按预期工作（或按我的想法）。根据 urls.py，reptibase:item-update 应该在我的 views.py 文件中执行 item_update 函数。 item_update 永远不会被执行，而是再次执行与当前页面 url 关联的相同函数。

目前，由于返回的是 html 而不是 json，因此出现解析错误。 json 是从我的 item_update 函数返回的。

item.js

window.onload = function () 
        console.log("Child: ", document.getElementById("piee"))
        var ctx = document.getElementById("piee").getContext('2d');

        var rep_name = $("#pie1").attr("data-rep-name")
        var ajax_url = $("#pie1").attr('data-ajax-url')
        var _data = []
        var _labels = []

        // Using the core $.ajax() method
        $.ajax(

            // The URL for the request
            url: ajax_url,

            // The data to send (will be converted to a query string)
            data: 
                name: rep_name
            ,

            // Whether this is a POST or GET request
            type: "POST",

            // The type of data we expect back
            dataType: "json",

            headers: 'X-CSRFToken': csrftoken,

            context: this
        )
            // Code to run if the request succeeds (is done);
            // The response is passed to the function
            .done(function (json) 

                if (json.success == 'success') 
                    var newMale = json.malePerc
                    var newFemale = json.femalePerc
                    console.log(newMale, newFemale)
                    _labels.push("male", "female")
                    _data.push(parseFloat(newMale), parseFloat(newFemale))
                    window.myPie.update()
                    var newUVB = json.uvbPerc
                    var newSize = json.specSize

                 else 
                    alert("Error: " + json.error);
                
            )
            // Code to run if the request fails; the raw request and
            // status codes are passed to the function
            .fail(function (xhr, status, errorThrown) 
                alert("Sorry, there was a problem!");
                console.log("Error: " + errorThrown);
                console.log("Status: " + status);
                console.dir(xhr);
                console.warn(xhr.responseText)
            )
            // Code to run regardless of success or failure;
            .always(function (xhr, status) 
                //alert("The request is complete!");
            );

        var config = 
            type: 'pie',
            data: 
                datasets: [
                    data: _data,
                    backgroundColor: ['#ff0000', "#0000ff"],
                    label: "Temp"
                ],
                labels: _labels,
            ,
            options: 
                responsive: true
            
        ;

        console.log("data", _data);
        console.log("config", config)
        window.myPie = new Chart(ctx, config);
        console.log("window", window.myPie)
    

urls.py

app_name = 'reptibase'
urlpatterns = [
    path('', views.index, name='home'),
    path('search', views.reptile_search, name='search'),
    path('add', views.reptile_add, name='add'),
    path('list', views.reptile_list, name='list'),
    path('listD', views.reptile_listDelete, name='listDelete'),
    #path('<int:rep_id>', views.reptile_item, name='item'),
    path('<str:scientific>', views.reptile_itemAlt, name='itemAlt'),
    path('<int:rep_id>,<int:specific_id>', views.reptile_itemAlt_Edit, name='itemAltEdit'),
    path('<str:reptile>,<int:id>', views.comments, name='comments'),
    path('update', views.item_update, name='item-update'),
    path('edit', views.reptile_edit, name='edit'),
]

itemAlt.html

<div class="pie-chart" id="pie1" data-rep-name=" reptile.scientific "
     data-ajax-url="% url "reptibase:item-update" %">
    <canvas id="piee"></canvas>
    <div class="graph-popout">
        <div class="data">
            <p> femalePerc % Female,  malePerc % Male.  size  Individuals</p>
        </div>
        <p><a href="#">Report Issue</a></p>
        <p><a href="#" class="share">Share</a></p>
    </div>
    <h3>Sex</h3>
    <div class="background"></div>
    <div id="slice1" class="pie-slice">
        <div class="pie"></div>
    </div>
    <div id="slice2" class="pie-slice">
        <div class="pie"></div>
    </div>
    <div id="slice3" class="pie-slice">
        <div class="pie"></div>
    </div>
</div>

【问题讨论】：

“HTML 回来了，而不是 json”这看起来是不是一个错误页面？

尝试不使用reptibase直接使用item-update。

@16350436 导致错误。

@Sumithran 添加了一张图片作为对该错误的编辑。底部是返回的 HTML，也是 Ajax 代码连接的页面。

你的views.py中的函数是什么？

【参考方案1】：

path('<str:scientific>', views.reptile_itemAlt, name='itemAlt'),

很可能会与您要访问的请求相匹配：

path('update', views.item_update, name='item-update'),

以及下面的编辑端点！

将 'item-update'(reptibase/update) 和 'edit'(repitbase/edit) 移到 'itemAlt' 上方以说明它们各自的路径，然后所有其他请求都应通过这些路径并被正确的视图捕获。

请参阅此处标题为“我们面前的道路”的部分，它很好地解释了这种现象：

https://www.mattlayman.com/understand-django/urls-lead-way/

【讨论】：

救命稻草。谢谢！