我可以从/edit使用ajax，但不能从/detail使用ajax

Question

Django 1.10。

在DetailView中，我想通过ajax更新模型对象。嗯，模型对象被更新了。但是ajax成功函数无法从post方法中获取数据。我在失败函数中发生。

换句话说，在UpdateView中的Django中，我可以在form_valid的断点处停止，控制它返回一个带有代码200的Http响应。稍后，如果我用详细信息刷新页面，我可以看到模型对象已经改变。

但在Chrome开发工具，而调试js我发生在失败函数。和jqXHR. state=0，文本状态="错误"，错误抛出=""。

我准备了一份真实情况的模拟：https://Kifsif@比特桶。org/Kifsif/ajax\u更新。吉特

有一点不同：此UpdateView呈现一般的_细节。html。在现实生活中，它应该呈现局部细节。html。这是ajax，我们不需要重新加载整个页面。

因此，此模拟呈现整个页面。这是什么意思？这意味着：

1） 如果我在http://localhost:8000/1/detail，按AjaxEdit链接会导致故障。不工作。在Chrome开发者工具中，我出现在失败函数中。

2） 我回到http://localhost:8000/1/detail，按编辑。我出现在http://localhost:8000/1/edit。这是没有ajax的普通编辑。但是视图是有组织的，以便在不重定向的情况下呈现响应。因此，我保存模型并停留在http://localhost:8000/1/edit。我可以看到整个细节，就好像我在看一个合适的细节视图的结果一样。有两个控制链接：编辑和AjaxEdit。现在AjaxEdit开始工作。

换句话说，athttp://localhost:8000/1/editajax在http://localhost:8000/1/detail它没有。

我刚刚开始学习ajax。我应付不了这个。我想说的是，重定向可能会影响。但没有重定向。

通过ajax我地址到视图的get方法，并获得适当的数据。和帖子相比有什么区别。

你能评论一下，帮我突破吗？

意见。派克

class GeneralUpdate(UpdateView):
    model = General
    fields = ['char']

    def form_valid(self, form):
        self.object = form.save()
        return render(self.request, 'general/general_detail.html', {"object": self.object})

模型。派克

class General(models.Model):
    char = models.CharField(max_length=100)

    def get_absolute_url(self):
        return reverse("detail", kwargs={"pk": self.id})

网址。派克

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^create$', GeneralCreate.as_view(), name="create"),
    url(r'^(?P<pk>\d+)/detail$', GeneralDetailView.as_view(), name="detail"),
    url(r'^(?P<pk>\d+)/edit$', GeneralUpdate.as_view(), name="edit"),
]

general_form.html

<form id="form" action="" method="post">{% csrf_token %}
    {{ form.as_p }}
    <input id="submit" type="submit" value="Save" />
</form>

一般细节。html

<p id="char">{{ object.char }}</p>

<a href="{% url "edit" object.id %}">Edit</a>
<a id="ajax_edit" href="javascript:void(0)">AjaxEdit</a>


<script   src="https://code.jquery.com/jquery-3.1.0.min.js"   integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="   crossorigin="anonymous"></script>
<script>
    $( document ).ready(function() {
    var ajax_edit = $("#ajax_edit");
    var char = $("#char");

    function show_get(data){
        $(data).insertAfter(char);
        var submit_link = $("#submit");
        submit_link.click(post);
    }

    function show_post(data){
        debugger;
    }

    function failure(jqXHR, textStatus, errorThrown){
        debugger;
    }

    function post(){
        $.ajax({
                method: "post",
                data: $("form").serialize(),
                url: 'http://localhost:8000/2/edit',
                success: show_post,
                error: failure,
                }
        )
    }

    function get(){
        $.ajax({
                method: "get",
                url: 'http://localhost:8000/2/edit',
                success: show_get,
                }
        )
    }

    ajax_edit.click(get);

    });
</script>

Answer 1

如果我理解正确。。。

1. 单击AjaxEdit-它从UpdateView获取响应，并将其直接加载到您的/细节页面。从技术上讲，你现在仍然在细节页面上。
2. 您在chrome dev中检查您的表单，并看到表单action属性指向空。
3. 您单击保存，您的ajax请求将按计划更新数据。
4. 然后默认提交发生，您的POST请求转到/细节url，因为从技术上讲，您仍然在细节页面上。
5. Django的DetailView禁止POST请求，并用405 HTTP状态踢它（方法不允许），在chrome检查器中检查它。

所以这是主要原因。

作为修复，您可以通过添加

$("#form").submit(function(event){
      event.preventDefault();
});

在提交链接之前。点击（发布）