Python 如何在来自django模板的AJAX请求中返回django表单对象？

我试图通过Ajax调用从django模板调用我的视图

我希望表单对象作为视图的响应，这样我就可以通过div元素中的jquery呈现这个表单

可能吗？怎么做

这就是我所尝试的：

home.html

function get_edit_form(button, id)
  {
        $.ajax({
            url: "/manage/licenses/{{mls_signup_code}}/{{agent_id}}/" + id + "/",
            type: "get",
            data: {id: id},
            success: function(response) {
            console.log(response);
            $("#formdiv").html({{ response.as_p }});
            }
        })
  }

Views.py

elif request.method == "GET":
        owned_license_id = request.GET.get('id', '')
        form = OwnedLicenseForm(owned_license_id)
        return form

---

我知道您正在尝试做什么，但您不能以这种方式呈现html表单：

$("#formdiv").html({{ response.as_p }});

我认为您混淆了服务器端渲染（Django模板）和客户端渲染。服务器端渲染发生在服务器处理请求时，它无法渲染浏览器中运行的javascript生成的对象

因为

response

是一个javascript对象，由jquery向url发送Ajax请求获得。此时，页面已经由Django的模板引擎呈现，并发送到浏览器。Django模板甚至无法意识到这个

响应

我知道您想要使用as_p（）方法来呈现表单，您可以这样做：

function get_edit_form(button, id)
{
        $.ajax({
            url: "/manage/licenses/{{mls_signup_code}}/{{agent_id}}/" + id + "/",
            type: "get",
            data: {id: id},
            success: function(response) {
              console.log(response);
              // response is form in html format
              $("#formdiv").html(response);
            }
        })
  }

# Views.py
elif request.method == "GET":
        owned_license_id = request.GET.get('id', '')
        form = OwnedLicenseForm(owned_license_id)
        return HttpResponse(form.as_p()) # return a html str

---

我知道您正在尝试做什么，但您不能以这种方式呈现html表单：

$("#formdiv").html({{ response.as_p }});

我认为您混淆了服务器端渲染（Django模板）和客户端渲染。服务器端渲染发生在服务器处理请求时，它无法渲染浏览器中运行的javascript生成的对象

因为

response

是一个javascript对象，由jquery向url发送Ajax请求获得。此时，页面已经由Django的模板引擎呈现，并发送到浏览器。Django模板甚至无法意识到这个

响应

我知道您想要使用as_p（）方法来呈现表单，您可以这样做：

function get_edit_form(button, id)
{
        $.ajax({
            url: "/manage/licenses/{{mls_signup_code}}/{{agent_id}}/" + id + "/",
            type: "get",
            data: {id: id},
            success: function(response) {
              console.log(response);
              // response is form in html format
              $("#formdiv").html(response);
            }
        })
  }

# Views.py
elif request.method == "GET":
        owned_license_id = request.GET.get('id', '')
        form = OwnedLicenseForm(owned_license_id)
        return HttpResponse(form.as_p()) # return a html str

---

您可以通过Django和JQuery的组合来实现这一点

步骤1：从_ajax.html模板创建超简单表单

模板可以像

{{form.as_p}

一样简单。关键是要不要继承基本模板。您只需使用来自_ajax.html模板的表单来呈现表单的html

步骤2：创建一个带有slug参数的视图，该参数可帮助您获得正确的表单

def payment_method_ajax(request, method):  # method is your slug
    """Load a dynamic form based on the desired payment method"""

    options = {
        'ach': ECheckForm(),  # Dynamic form #1
        'credit-card': CreditCardForm(),  #  Dynamic form #2
    }

    if method in options.keys():
        context = {'form': options[method]}
    else:
        context = None

    template = 'your_app_name/form_from_ajax.html'
    return render(request, template, context)

步骤3：在url.py中定义AJAX url

[...
    path(
        'payment-method-ajax/<slug:method>/',  # notice the slug in the URL
        views.payment_method_ajax,
        name='payment-method-ajax'),
...]

步骤5：使用JQuery和按钮的onclick加载表单

<script>
    var ach = 'ACH';
    var creditCard = 'Credit Card';

    var form_urls ={
        ach : '{% url "payment-method-ajax" slugs.0 %}',
        creditCard : '{% url "payment-method-ajax" slugs.1 %}',
    }

    function load_payment_form(btn) {

        if(btn.innerText==ach) {
            get_url = form_urls['ach'];
            type = ach;
        }
        else if(btn.innerText==creditCard) {
            console.log('Load credit card form');
            get_url = form_urls['creditCard'];
            type = creditCard;
        }

        $.get({'url': get_url}).done(

               function(data) {
                document.getElementById('form-fields').innerHTML = data;})

        document.getElementById("id-form").style.display = "block";
    }
</script>
        

var ach='ach'；
var信用卡=‘信用卡’；
var form_url={
ach:“{%url”支付方法ajax“slugs.0%}”，
信用卡：“{%url”支付方式ajax“slugs.1%}”，
}
功能加载\付款\表格（btn）{
如果（btn.innerText==ach）{
get_url=form_url['ach']；
类型=乙酰胆碱；
}
else if（btn.innerText==信用卡）{
console.log（“加载信用卡表单”）；
get_url=表单_url[‘信用卡’]；
类型=信用卡；
}
$.get（{'url'：get\u url}）。完成(
功能（数据）{
document.getElementById（'form-fields'）。innerHTML=data；}）
document.getElementById（“id表单”）.style.display=“block”；
}

您可以通过Django和JQuery的组合来实现这一点

步骤1：从_ajax.html模板创建超简单表单

模板可以像

{{form.as_p}

一样简单。关键是要不要继承基本模板。您只需使用来自_ajax.html模板的表单来呈现表单的html

步骤2：创建一个带有slug参数的视图，该参数可帮助您获得正确的表单

def payment_method_ajax(request, method):  # method is your slug
    """Load a dynamic form based on the desired payment method"""

    options = {
        'ach': ECheckForm(),  # Dynamic form #1
        'credit-card': CreditCardForm(),  #  Dynamic form #2
    }

    if method in options.keys():
        context = {'form': options[method]}
    else:
        context = None

    template = 'your_app_name/form_from_ajax.html'
    return render(request, template, context)

步骤3：在url.py中定义AJAX url

[...
    path(
        'payment-method-ajax/<slug:method>/',  # notice the slug in the URL
        views.payment_method_ajax,
        name='payment-method-ajax'),
...]

步骤5：使用JQuery和按钮的onclick加载表单

<script>
    var ach = 'ACH';
    var creditCard = 'Credit Card';

    var form_urls ={
        ach : '{% url "payment-method-ajax" slugs.0 %}',
        creditCard : '{% url "payment-method-ajax" slugs.1 %}',
    }

    function load_payment_form(btn) {

        if(btn.innerText==ach) {
            get_url = form_urls['ach'];
            type = ach;
        }
        else if(btn.innerText==creditCard) {
            console.log('Load credit card form');
            get_url = form_urls['creditCard'];
            type = creditCard;
        }

        $.get({'url': get_url}).done(

               function(data) {
                document.getElementById('form-fields').innerHTML = data;})

        document.getElementById("id-form").style.display = "block";
    }
</script>
        

var ach='ach'；
var信用卡=‘信用卡’；
var form_url={
ach:“{%url”支付方法ajax“slugs.0%}”，
信用卡：“{%url”支付方式ajax“slugs.1%}”，
}
功能加载\付款\表格（btn）{
如果（btn.innerText==ach）{
get_url=form_url['ach']；
类型=乙酰胆碱；
}
else if（btn.innerText==信用卡）{
console.log（“加载信用卡表单”）；
get_url=表单_url[‘信用卡’]；
类型=信用卡；
}
$.get（{'url'：get\u url}）。完成(
功能（数据）{
document.getElementById（'form-fields'）。innerHTML=data；}）
document.getElementById（“id表单”）.style.display=“block”；
}

您尝试了什么吗？@Gocht:请检查，editedI猜测这会引发序列化错误，您应该返回一个json。为什么需要将表单作为对象传递？不，它不需要，它只在控制台中显示此错误。对象没有属性“status_code”，我理解这是为什么。我尝试了return HttpResponse（form），它可以正常工作，但我没有看到任何表单标签，它只呈现表单值您需要HttpResponse，您尝试了什么吗？@Gocht:请检查，editedI我猜这会引发序列化错误，您应该返回json。为什么需要将表单作为对象传递？不，它不需要，它只在控制台中显示此错误。对象没有属性“status_code”，我理解这是为什么。我试过使用return-HttpResponse（form），它可以正常工作，但我没有看到任何表单标签，它只显示表单值您需要HttpResponse，谢谢您的回答谢谢您的回答