使用 AJAX 创建一个对象，然后出现在下拉框中

Question

您好，我遇到了一个问题，我正在尝试制作它，以便在单击按钮时可以制作一个对象。我无法让它工作，因为由于某种原因它不会验证，但是如果我更改输入类型以提交它工作正常。

但问题是当我使用它作为提交页面重定向时，这违背了使用 AJAX 的目的。

我似乎找不到我想做的好教程，任何帮助或链接将不胜感激！

模型

class MemberRole(models.Model,get_fields):
    name = models.CharField(max_length = 20)

表格

class MemberRoleForm(forms.ModelForm):
    class Meta:
        model = MemberRole

观看次数 此视图为成员角色模型构建表单

def add_member(request):
    model_url = 'member-add'
    rform = MemberRoleForm(instance=MemberRole())
    return render_to_response('create_model.html', {'role_form': rform,'model_url': model_url,},context_instance=RequestContext(request))

这个ajax叫做view

@require_POST
def ajax(request):
    data = request.POST.get("rolename","")
    if request.method == 'POST':
        rform = MemberRoleForm(request.POST, instance=MemberRole())
        if rform.is_valid():
            new_role = rform.save()
            new_role.name = data
            return HttpResponse("SuccessFully Saved")
        else:
            return HttpResponse("Error in saving")

模板

    <div id="addRoleOnMemberForm">
        <form id = "addrole" onsubmit= "return false;" method="POST">
        {% csrf_token %}
        {% for field in role_form %}
                {{ field.errors }}
                {{ field.label_tag }} {{ field }} //#id_name is in here
        {% endfor %}
        <input id="addrolebutton" type="button" onclick = "createit()" value="Add New Role"/>
    </div>
    {% for x in role_list %}

    <div>
        <p> This shows a role was made </p>
    </div>
    {% endfor %}

脚本

<script>
    function createit(){
    $.ajax({
    type: "POST",
    url:"ajax",
dataType:"json",
async: true,
data: {
    csrfmiddlewaretoken: '{{ csrf_token }}',
rolename: $('#id_name').val()
},

});
}
</script>

Answer 1

我终于设法让它工作了。 :)

我有一个 add_member 视图，如果它在 member.role 下拉字段中不可用，则允许创建 memberrole 对象。创建时的 memberrole 对象将在不重新加载页面的情况下添加到下拉字段中，因此可以立即选择。

我不完全确定这是否是正确的编码方式，我已经包含了所有源代码，希望它可以帮助像我这样的人。评论将不胜感激！

模型

class MemberRole(models.Model,get_fields):
    name = models.CharField(max_length = 20)

class Member(models.Model,get_fields):
    first_name = models.CharField(max_length = 20)
    last_name = models.CharField(max_length = 20)
    role = models.ForeignKey(MemberRole, null = True, blank = True)

表格

class MemberForm(forms.ModelForm):
    class Meta:
         model = Member

脚本

<script>
        function createit(){
                $.ajax({
                    type: "POST",
                    url:"addrole",
                    dataType:"json",
                    async: true,
                    data: {
                        csrfmiddlewaretoken: '{{ csrf_token }}',
                        rolename: $('#role_name').val()
                    },
                    success: function (json,rolename){
                        $('#output').html(json.message); // Prints a message to say that the MemberRole object was created
                        $('#roleExistsMemberForm').load(document.URL + ' #roleExistsMemberForm'); //Refreshes the dropdown box so that the newly created MemberRole can be selected
                    }
                });
            }
    </script>

观看次数

def add_role(request):
    model_url = 'role-add'
    new_role = request.POST.get("rolename","")
    role_list = MemberRole.objects.all()
    response_data= {}

    if new_role:
        x = MemberRole()
        x.name = new_role
        x.save()
        response_data['message'] = new_role + " was created"
    else:
        response_data['message'] = 'Nothing created'

    return HttpResponse(json.dumps(response_data),content_type="application/json")

def add_member(request):
    model_url = 'member-add'

    if request.method == "POST":
        mform = MemberForm(request.POST, instance=Member())
        if mform.is_valid():
        new_member = mform.save(commit=False)
        new_member.save()
        return HttpResponseRedirect('members')
    else:
        mform = MemberForm(instance=Member())
    return render_to_response('create_model.html', {'member_form': mform, 'model_url': model_url,},context_instance=RequestContext(request))

create_model.html

{% for field in member_form %}
{% if field.label == 'Role' %}
<div id="roleExistsMemberForm">
            {{ field.errors }}
            {{ field.label_tag }} {{ field }}
        </div>
        {% else %}
        <div class="fieldWrapper">
            {{ field.errors }}
            {{ field.label_tag }} {{ field }}
        </div>
    {% endif %}
    {% endfor %}
        <div id="addRoleOnMemberForm">
        <form onsubmit="return false;">
        {% csrf_token %}
        <input id= "role_name" type="text"/>
        <input id="addrolebut" type="button" onclick = "createit()" value="Add New Role"/>
    </div>
    <div id="output">
    <p>Nothing here</p>
</div>