如何在 django 中使用没有表单封闭标签的 onclick 事件发送 ajax 请求

Question

this is image that i want to do实际上我有一个 div 内容，当用户单击该 div 时，我已在该 div 上应用 onclick 事件，这些标签之间的文本应发送到服务器，然后也显示在表格中。我做了一些事情指导我实际错误在哪里，因为$.ajax 不工作它会引发错误

例如：$.ajax 不是函数

players.html

                         <div class="selectize-control single">
                         <div class="selectize-input items has-options not-full">
                         <input type="text" autocomplete="off" tabindex="" 
                    id="select_player" style="width: 146.75px; opacity: 1; position: 
                         relative; left: 0px;" placeholder="Adauga jucator la echipa">
                         </div>

                         <div class="selectize-dropdown single liststyle" id="listitems" 
                      style="display: None; width: 987px; top: 29px; left: 0px; visibility: 
                        visible;">

                             <div class="selectize-dropdown-content">
                                     {% block listplayers %}
                                          {% if player is not None %}
                                              {% for p in player %}
                                 <div class="option selected curserstyle sp" id="{{p.id}}" data-selectable="" data-value="{{p.YourName}}">{{p.YourName}}1</div>
                                 <div class="option selected curserstyle sp" id="49" data-selectable="" data-value="{{p.YourName}}">{{p.YourName}}2</div>

                                 {% endfor %}
                                          {% else %}
                                 <div class="text-center">
                                              List is Empty
                                 </div>
                                          {% endif %}
                                 {% endblock %}
                     </div>
                     </div>
                     </div>

javascript

                 $("#listitems").on('click',function(e){

    // preventing from page reload and default actions
    e.preventDefault();
    // serialize the data for sending the form data.
    var serializedData = $(this).serialize();
    // make POST ajax call

    $.ajax({
    type:'get',
    url:"/templates/dashboard/players",
    data:serializedData,
    success:function(responce){

                            // on successfull creating object
                            // 1. clear the form.

                            $("#listitems").trigger('reset');

                            // 2. focus to nickname input

                            $(".sp").focus();
                            // display the newly friend to table.
                            var instance = JSON.parse(response["instance"]);
                            var fields = instance[0]["fields"];
                             var x = document.getElementById(user_id).textContent;


                            $("#playername").append('<div class="row list-row player-row " id="targetdel'+i+'"><div class="col-md-6 title"><a id="playername" href="#">'+x+'</a></div><div class="col-md-2 company text-center has-checkbox"><label class="green checkbox-box"><input type="checkbox" class="checkbox_entity checkbox_captain" id="captain"  data-entity_id="17270" data-entity_type="captain" data-url_ajax="update_team_player"><span class="checkmark"></span></label></div> <div class="col-md-2 company text-center has-checkbox"> <label class="green checkbox-box "><input type="checkbox" class=" checkbox_entity checkbox_observer " id="cd_btn" data-entity_id="'+i+'" data-entity_type="observer" data-url_ajax="update_team_player style="background-color:black;" "> <span class="checkmark"></span> </label></div><div class="col-md-2 actions company text-right"><a href="" class="remove_entity_data" data-entity_id="17270" data-entity_type="team_player" > </a><button id = "'+i+'" class="btn del" style="text-transform: none;background-color: #ed143d00;padding: 0px 9px;border: none;color: #a2a2a2;">x</button></div></div>');
                            i++;
                },
                    error: function (response) {
                    // alert the error if any error occured
                    alert("this one is error");
                    alert(response["responseJSON"]["error"]);
                    },
    })


    })

Answer 1

当你有function(responce)时，除了你在ajax的success中使用response之外，你可能正在使用Jquery的苗条版本。

您应该确保您使用的是完整版的 Jquery，因为由于某种原因，瘦版本没有包含 ajax。

一种简单的检查方法是转到您定义脚本的位置，查看您的脚本中是否包含slim。

我相信这是最新的完整版 jquery。这是你应该拥有的。

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

不是这个

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>