Python 使用ajax删除在django中无法正常工作_Python_Ajax_Django

Python 使用ajax删除在django中无法正常工作

python ajax django

Python 使用ajax删除在django中无法正常工作,python,ajax,django,Python,Ajax,Django,我试图在django中构建一个待办事项列表。我希望只使用AJAX来添加新任务和删除已完成的任务。添加功能工作正常，但当我从底部删除列表时，我的AJAX工作不正常，有时在重新加载页面后，我可以看到isJSON数据，有时我会看到您通过POST调用了此URL，但URL没有以斜杠结尾此错误。当我从顶部删除列表时，其工作正常..thanx 这是我的密码型号.py class todoModel(models.Model): title = models.CharField(max_leng

我试图在

django

中构建一个待办事项列表。我希望只使用AJAX来添加新任务和删除已完成的任务。添加功能工作正常，但当我从底部删除列表时，我的

AJAX

工作不正常，有时在重新加载页面后，我可以看到is

JSON

数据，有时我会看到

您通过POST调用了此URL，但URL没有以斜杠结尾

此错误。当我从顶部删除列表时，其工作正常..thanx

这是我的密码

型号.py

class todoModel(models.Model):
    title = models.CharField(max_length=100)
    added = models.DateTimeField(auto_now_add=True)
    updated = models.DateTimeField(auto_now=True)

    def __str__(self):
        return self.title
forms.py

from django.forms import ModelForm
from todoApp.models import todoModel
from django import forms

class todoModelForm(forms.ModelForm):
    class Meta:
        model=todoModel

# Create your views here.
import json
from django.shortcuts import render_to_response,HttpResponse,redirect
from django.template import RequestContext
from django.shortcuts import render,get_object_or_404
from django.forms import ModelForm
from .forms import todoModelForm
from todoApp.models import todoModel
from django.contrib import messages
from django.core import serializers


def home(request):
    todo=todoModel.objects.all()
    form = todoModelForm()
    return render(request,'index.html',{'form':form,'todo':todo})

def todoPost(request):
    if request.method == 'POST' and request.is_ajax():  #if the form has been submitted
        form = todoModelForm(request.POST)
        if form.is_valid():
            form.save()
        todo_json = serializers.serialize('json',todoModel.objects.all())
        return HttpResponse(json.dumps(todo_json),content_type="application/json")
    return HttpResponse("status")


def delete(request,id):
    if request.method == "POST" and request.is_ajax:
        del_object = get_object_or_404(todoModel ,pk = id)
        del_object.delete()
        todo_json = serializers.serialize('json',todoModel.objects.all())
        return HttpResponse(json.dumps(todo_json),content_type="application/json")
    return HttpResponse("status")

视图.py

class todoModel(models.Model):
    title = models.CharField(max_length=100)
    added = models.DateTimeField(auto_now_add=True)
    updated = models.DateTimeField(auto_now=True)

    def __str__(self):
        return self.title
forms.py

from django.forms import ModelForm
from todoApp.models import todoModel
from django import forms

class todoModelForm(forms.ModelForm):
    class Meta:
        model=todoModel

# Create your views here.
import json
from django.shortcuts import render_to_response,HttpResponse,redirect
from django.template import RequestContext
from django.shortcuts import render,get_object_or_404
from django.forms import ModelForm
from .forms import todoModelForm
from todoApp.models import todoModel
from django.contrib import messages
from django.core import serializers


def home(request):
    todo=todoModel.objects.all()
    form = todoModelForm()
    return render(request,'index.html',{'form':form,'todo':todo})

def todoPost(request):
    if request.method == 'POST' and request.is_ajax():  #if the form has been submitted
        form = todoModelForm(request.POST)
        if form.is_valid():
            form.save()
        todo_json = serializers.serialize('json',todoModel.objects.all())
        return HttpResponse(json.dumps(todo_json),content_type="application/json")
    return HttpResponse("status")


def delete(request,id):
    if request.method == "POST" and request.is_ajax:
        del_object = get_object_or_404(todoModel ,pk = id)
        del_object.delete()
        todo_json = serializers.serialize('json',todoModel.objects.all())
        return HttpResponse(json.dumps(todo_json),content_type="application/json")
    return HttpResponse("status")

index.html

<form method="post" id="form_id" action="/post/">
    {% csrf_token %} {{form.as_p}}

    <input type="submit" value="submit" />
</form>

<ul class="todo-div">
    {% for i in todo %}
    <form method="POST" action="delete/{{i.id}}/" id="delForm">
        {% csrf_token %}
        <li>{{i.title}}
            <br/> Created at {{i.added}}
            <br/>Last updated {{i.updated}}</li>
        <input type="submit" value="delete">
        <br/>
        <br/>
    </form>
    {% endfor %}
</ul>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
    $(document).ready(function() {
        $("#form_id").submit(function(e) {
            alert("sad");
            e.preventDefault();
            $.ajax({
                data: $(this).serialize(),
                type: $(this).attr('method'),
                url: $(this).attr('action'),
                dataType: 'json',
                success: function(json) {
                    var jsonData = $.parseJSON(json);
                    var content = "";
                    for (i = 0; i < jsonData.length; i++) {
                        var id = jsonData[i].pk;
                        var title = jsonData[i].fields.title;
                        var added = jsonData[i].fields.added;
                        var updated = jsonData[i].fields.updated;
                        content += "<form method='POST' action='delete/" + id + "'/ id='delForm'>{% csrf_token %}<li><br/>" + title + "<br/>Created at" + added + "<br/>Last updated" + updated + "</li><input type ='submit' value='delete'></form>";
                    }

                    $(".todo-div").empty().append(content);
                },
                error: function(e, x, r) {
                    console.log(e);
                },
            });
        });
    });
</script>
<script>
    $(document).ready(function() {
        $("#delForm").submit(function() {
            event.preventDefault();
            $.ajax({
                data: $(this).serialize(),
                type: $(this).attr('method'),
                url: $(this).attr('action'),
                dataType: 'json',
                success: function(json) {
                    $(".todo-div").empty();
                    var jsonData = $.parseJSON(json);
                    var content = "";
                    for (i = 0; i < jsonData.length; i++) {
                        var id = jsonData[i].pk;
                        var title = jsonData[i].fields.title;
                        var added = jsonData[i].fields.added;
                        var updated = jsonData[i].fields.updated;
                        content += "<form method='POST' action='delete/" + id + "/' id='delForm'>{% csrf_token %}<li><br/>" + title + "<br/>Created at" + added + "<br/>Last updated" + updated + "</li><input type ='submit' value='delete'></form>";
                    }

                    $(".todo-div").append(content);
                },
                error: function(e, x, r) {
                    console.log(e);
                },
            });
        });
    });
</script>

</body>


{%csrf_token%}{{form.as_p}}

{todo%中的i的%s}
{%csrf_令牌%}
{{i.title}}

在{{i.added}创建

上次更新的{{i.updated}




{%endfor%}

$（文档）.ready（函数（）{
$（“#表格id”）。提交（功能（e）{
警惕（“悲伤”）；
e、 预防默认值（）；
$.ajax({
数据：$（this）.serialize（），
类型：$（this.attr（'method'），
url:$（this.attr（'action'），
数据类型：“json”，
成功：函数（json）{
var jsonData=$.parseJSON（json）；
var-content=“”；
对于（i=0；i
“+title+”
创建于“+added+”
上次更新的“+updated+””；
}
$（“.todo div”）.empty（）.append（内容）；
},
错误：函数（e、x、r）{
控制台日志（e）；
},
});
});
});
$（文档）.ready（函数（）{
$（“#delForm”）.submit（函数（）{
event.preventDefault（）；
$.ajax({
数据：$（this）.serialize（），
类型：$（this.attr（'method'），
url:$（this.attr（'action'），
数据类型：“json”，
成功：函数（json）{
$（“.todo div”）.empty（）；
var jsonData=$.parseJSON（json）；
var-content=“”；
对于（i=0；i
“+title+”
创建于“+added+”
上次更新的“+updated+””；
}
$（“.todo div”）。追加（内容）；
},
错误：函数（e、x、r）{
控制台日志（e）；
},
});
});
});

第一块javascript代码中有一个错误：

<script>
    $(document).ready(function() {
        $("#form_id").submit(function(e) {
            alert("sad");
            e.preventDefault();
            $.ajax({
                data: $(this).serialize(),
                type: $(this).attr('method'),
                url: $(this).attr('action'),
                dataType: 'json',
                success: function(json) {
                    var jsonData = $.parseJSON(json);
                    var content = "";
                    for (i = 0; i < jsonData.length; i++) {
                        var id = jsonData[i].pk;
                        var title = jsonData[i].fields.title;
                        var added = jsonData[i].fields.added;
                        var updated = jsonData[i].fields.updated;
                        content += "<form method='POST' action='delete/" + id + "'/ id='delForm'>{% csrf_token %}<li><br/>" + title + "<br/>Created at" + added + "<br/>Last updated" + updated + "</li><input type ='submit' value='delete'></form>";
                        ---single quote before slash--->--->--->--->-------------^
                    }

                    $(".todo-div").empty().append(content);
                },
                error: function(e, x, r) {
                    console.log(e);
                },
            });
        });
    });
</script>


$（文档）.ready（函数（）{
$（“#表格id”）。提交（功能（e）{
警惕（“悲伤”）；
e、 预防默认值（）；
$.ajax({
数据：$（this）.serialize（），
类型：$（this.attr（'method'），
url:$（this.attr（'action'），
数据类型：“json”，
成功：函数（json）{
var jsonData=$.parseJSON（json）；
var-content=“”；
对于（i=0；i
“+title+”
创建于“+added+”
上次更新的“+updated+””；
---斜杠前的单引号-->-->-->-->-------------^
}
$（“.todo div”）.empty（）.append（内容）；
},
错误：函数（e、x、r）{
控制台日志（e）；
},
});
});
});

现在终于得到了答案，删除列表不起作用，因为有多个相同id的表单。这里是更新的html

<form method="post" id="form_id" action="/post/">
 {% csrf_token %} 
{{form.as_p}}

<input type="submit" value="submit"/>
</form>

<ul class="todo-div">
{% for i in todo %}
<form method="POST" action="/delete/{{i.id}}/" id="{{i.id}}">
{% csrf_token %}
<li>{{i.title}}
<br/>
Created at {{i.added}} 
<br/>Last updated {{i.updated}}</li> 
<input type ="submit" value="delete" class="deletebutton" onclick=delete_form({{i.id}})>
<br/><br/>
</form>
{% endfor %}
</ul>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>

  $("#form_id").submit(function(e)
  {

      e.preventDefault();
      $.ajax({
             data:$(this).serialize(),
             type:$(this).attr('method'),
             url:$(this).attr('action'),
             dataType:'json',
             success:function(json)
              {
              alert("List added Successfully");
              var jsonData=$.parseJSON(json);
              var content="";
              console.log(jsonData)
                for(i=0;i<jsonData.length;i++)
                {
                  var id=jsonData[i].pk;
                  var title = jsonData[i].fields.title;
                  var added = jsonData[i].fields.added;
                  var updated = jsonData[i].fields.updated;
                  content +="<form method='POST' action='/delete/" +id + "/' id="+id+">{% csrf_token %}<li><br/>"+title+"<br/>Created at"+ added  +"<br/>Last updated"+updated +"</li><input type ='submit' onclick=delete_form("+id+") class='deletebutton' value='delete'></form>";
                }

                 $(".todo-div").empty().append(content);
              },
            error:function(e,x,r)
             {
              console.log(e); 
             },
        });
  } );

</script>
<script>

  function delete_form(id){
  var id=id;
  var ele = document.getElementById(id)
  //var form = $(ele).serialize()
  //alert(form);
$(ele).submit(function(e)
  {

     event.preventDefault();

      $.ajax({
             data:$(ele).serialize(),
             type:$(ele).attr('method'),
             url:$(ele).attr('action'),
             dataType:'json',
             success:function(json)
              {
              alert("List removed Successfully");
              $(".todo-div").empty();
              var jsonData=$.parseJSON(json);
              var content="";
                for(i=0;i<jsonData.length;i++)
                {
                  var id=jsonData[i].pk;
                  var title = jsonData[i].fields.title;
                  var added = jsonData[i].fields.added;
                  var updated = jsonData[i].fields.updated;
                  content +="<form method='POST' action='/delete/" +id + "/' id="+id+">{% csrf_token %}<li><br/>"+title+"<br/>Created at"+ added  +"<br/>Last updated"+updated +"</li><input type ='submit' onclick=delete_form("+id+") class='deletebutton' value='delete'></form>";
                }

                 $(".todo-div").append(content);
              },
            error:function(e,x,r)
             {
              console.log(e); 
             },
        });
  });
  }
</script>


{%csrf_令牌%}
{{form.as_p}}

{todo%中的i的%s}
{%csrf_令牌%}
{{i.title}}


在{i.added}创建

上次更新的{{i.updated}



{%endfor%}

$（“#表格id”）。提交（功能（e）
{
e、 预防默认值（）；
$.ajax({
数据：$（this）.serialize（），
类型：$（this.attr（'method'），
url:$（this.attr（'action'），
数据类型：'json'，
成功：函数（json）
{
警报（“成功添加列表”）；
var jsonData=$.parseJSON（json）；
var-content=“”；
console.log（jsonData）
对于（i=0；ii）来说，我这样做是为了使表单操作类似于action=“delete/12”。仍然会出现错误。无论哪种方式，都不应该在单引号后加斜杠