UpdateView和jQuery.ajax（）

Question

在我的Django项目中，我有一个只有几个领域的模型。 但是有很多相关的对象：日期，地点，评论等。 但它的DetailView显示了很多东西。所以，我决定通过ajax更新模型。 Django的UpdateView使用重定向到success_url。这似乎是所有麻烦的根源。

我用过这个： https://docs.djangoproject.com/en/1.10/topics/class-based-views/generic-editing/#ajax-example

我在浏览器中手动检查了更新表单。

通过ajax，数据也会在服务器上更新。但是我无法通过ajax捕获结果。

在调试js的Chrome开发工具中，我发生了失败功能。 并且jqXHR.status = 0，textStatus =＆＃34;错误＆＃34;，errorThrown =＆＃34;＆＃34;。

当我从Sources选项卡切换到Console时，我可以阅读：

POST http://localhost:8000/frame/2/ 405（方法不允许）

你能帮我解决这个问题吗？

views.py

class FrameUpdate(AjaxableResponseMixin, UpdateView):
    model = Frame
    form_class = FrameUpdateForm
    template_name = "general/ajax/ajax_form.html"

    def get_success_url(self):
        success_url = reverse_lazy("frame:frame_detail_ajax",
                                   kwargs={"pk":self.object.id})
        return success_url

frame.js

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

function post(){
    $.ajax({
        method: "POST",
        url: "http://localhost:8000/frame/2/update/",
        data: $("#frame_form").serialize(),
        success: show_post,
        error: fail
        });
}

稍后添加

photoarchive / urls.py

url(r'^frame/', include('frame.urls', namespace='frame')),

帧/ urls.py

url(r'^(?P<pk>\d+)/$', FrameDetailView.as_view(), name="frame_detail"),
url(r'^(?P<pk>\d+)/ajax/$', FrameDetailAjax.as_view(), name="frame_detail_ajax"),
url(r'^(?P<pk>\d+)/update/$', FrameUpdate.as_view(), name="frame_update"),

frame.js

function show_post(data){
    debugger;
    var frame_form = $("#frame_form");
    frame_form.replaceWith(data);
    show_controls();
}

general.js

function show_controls(){
    var controls = $(".control");
    controls.addClass( "show" );
    controls.removeClass( "hidden" );
}

稍后添加

我决定从头开始制作模拟器。结果让我吃惊。

如果我加载DetailView，则按AjaxEdit链接，然后不工作。

但如果我点击编辑链接，在没有ajax的情况下编辑一次，那么AjaxEdit就会开始工作。

顺便说一句，如果我从视图中删除了form_valid的重新定义，那么根本就没有任何作用（即没有ajax的编辑，请不要帮助）。

你能对此发表评论吗？

这是模拟器https://Kifsif@bitbucket.org/Kifsif/ajax_update.git

的链接

views.py

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})

models.py

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

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

urls.py

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>

general_detail.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>