使用 jquery 加载带有表单的 django 模板

Question

自从我开始使用 jquery 和 ajax 以来，我已经被我的 django 网站淹没了。 我是 ajax 和 javascript 的新手，所以请在回复时记住这一点，如果我有点困惑，请见谅。

基本上我有一个模板，它有一个创建食谱的表格。我使用 jquery .load 将此模板加载到另一个页面上的弹出 div 中。表单似乎可以很好地加载到 div 中，但是当我尝试提交表单时，什么也没有发生（没有验证检查或任何事情 - 如果我将字段留空，它不会返回任何错误。）奇怪的是，当我访问实际页面时，我我正在使用 jquery 加载，表单完美运行。这让我陷入了相当多的困境，我很想继续前进，所以非常感谢任何帮助。

这里是加载脚本：

<script type="text/javascript">
$(document).ready(function(){
    $(".create").on("click", function(){
        $("#popupContact").load("/cookbook/createrecipe #createform");
    });
});
</script>

加载表单的页面模板：

{% block content %}
{% autopaginate recipe_list 6 %}
    <div id="recipe_cont">
            {% for recipe in recipe_list %}
        <div class="recipe">
            <div class="button">    
            <a href="{% url cookbook.views.userrecipe recipe.id %}" style="display: none;"></a>
            <h4>{{ recipe.name }}</h4>
            <h5>{{ recipe.author }}</h5>
            <h5>Prep Time: {{ recipe.prep_time }} minutes</h5>
            </div>
        </div>
    {% endfor %}
    </div>
    <div id="popupContact" class="popup">
         <a id="popupContactClose" style="cursor:pointer;float:right;">x</a>
         <p id="contactArea"></p>
    </div>
    <div id="backgroundPopup">
    </div>  
    <div id="col2-footer">
    {% paginate %}
    </div>
{% endblock %}

创建配方模板：

{% extends "cookbook/base.html" %}
    {% block content %}
    <div id="createform">
    <h1>Create New Recipe</h1>
        <form action="." method="POST">
            <table>
                {% csrf_token %}
                {{ form.as_table }}
            </table>
            <p><input type="submit" value="Submit"></p>
        </form>
    </div>
    {% endblock %}

创建配方视图：

def createrecipe(request):
    if not request.user.is_authenticated():
        return HttpResponseRedirect('/index/')
    else:
        if request.method == 'POST':
            print 1
            form = RecipeForm(request.POST)
            if form.is_valid():
                print 2
                recipe = form.save(commit=False)
                recipe.original_cookbook = request.user.cookbooks.all()[0]
                recipe.pub_date = datetime.datetime.now()
                recipe.save()
                user = request.user
                cookbooks = user.cookbooks
                cookbook = cookbooks.all()[0]
                cookbook.recipes.add(recipe)
                return HttpResponseRedirect('/account')
        else:
            form = RecipeForm()

        return render_to_response('cookbook/createrecipe.html',
                                    {'form':form},
                              context_instance=RequestContext(request))

jquery-form的javascript代码：

<script> 
    // wait for the DOM to be loaded 
    $(document).ready(function() { 
        var options ={
            target: '#popupContact',
            url: '{% url createrecipe %}',
            success: function() { 
            alert("Thank you for your comment!"); 
        }
    };
        $('#createrecipe').ajaxForm(options); 
    }); 
</script> 

谢谢， 小鱼

edit1：mark 指出我的表单操作是错误的，因此已解决。

Answer 1

创建表单的表单动作是当前页面'.'。如果您将其加载到创建页面 url 上，如您所述，它将正常工作。但是，如果您在列表页面上使用弹出窗口加载它，那么它会将表单提交到不正确的列表视图。设置action="{% url 'create-view' %}" 将更正此问题。 'create-view' 将被替换为创建视图模式的名称。