Django AJAX JSON响应在浏览器中显示为原始文本 [英] Django AJAX JSON response appears as raw text in browser
问题描述
我正在Pinax框架内使用Django（1.4.2）开发一个Stripe webapp，并且具有以下功能：
I'm developing a Stripe webapp using Django (1.4.2) inside a Pinax framework and with:
- django-stripe-付款
- eldarion-ajax
除了ajax响应，我有一切工作JSON格式）似乎不被任何ajax回调处理，因此在浏览器中显示为原始JSON数据：
I've got everything working except the ajax response (in JSON format) doesn't appear to be processed by any ajax callbacks, and hence appears as raw JSON data in the browser:
{"html": "\n\n<div class=\"change-card\">\n <h2>Current Card</h2>\n <p class=\"lead\">\n \n Current card on file is a <strong>Visa</strong>\n ending in the digits <strong>4242</strong>.\n \n </p>\n \n \n \n <form action=\"/payments/a/change/card/\" data-stripe-key=\"\" class=\"form ajax\" data-replace-closest=\".change-card\" method=\"POST\">\n <div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='<>' /></div>\n <input name=\"stripe_token\" type=\"hidden\" />\n <a href=\"\" class=\"btn btn-primary change-card\">Change Card</a>\n </form>\n</div>\n"}
这个SO问题似乎是相似的，但没有正式的答案，提交者似乎已经弄清楚了（通过评论），但建议对我来说不起作用。
This SO question seems to be similar, but there is no official answer, and the submitter seems to have figured it out (going by the comments), but the suggestions don't work for me.
详细信息：
我在Chrome和Firefox中使用 python manage.py runserver 测试。
I'm using python manage.py runserver within both Chrome and Firefox to test.
我刚刚开始使用条纹应用程序，并刚刚使用django-strip中的示例电子支付在我根据具体需求量身定制之前要进行。
I'm just getting started with the stripe app, and have just used the examples from django-stripe-payments to get going before I tailor for my specific needs.
我正在运行的测试用例涉及到使用django-stripe-payment中的标准ajax表单更改存储的信用卡：
My test case that I'm running involves using the standard ajax form from django-stripe-payments to change the stored credit card:
<form action="{% url 'payments_ajax_change_card' %}" data-stripe-key="{{ STRIPE_PUBLIC_KEY }}" class="form ajax" data-replace-closest=".change-card" method="POST">
{% csrf_token %}
<input name="stripe_token" type="hidden" />
<a href="" class="btn btn-primary change-card">{% if request.user.customer.card_kind %}Change{% else %}Add{% endif %} Card</a>
</form>
我的基本模板中有一些javascript被调用，并显示从条带形式输入卡详细信息 - 选择更换卡按钮时。我不认为这是错的 - 我直接从这里。
There is some javascript in my base template that gets called and displays the form from stripe to enter the card details - when the "change card" button is selected. I don't think this is at fault - I took it straight from here.
我在上面有以下功能：
<script src="{% static "js/jquery-1.9.1.min.js" %}"></script>
<script src="//checkout.stripe.com/v2/checkout.js"></script>
此下面
<script src="{% static "js/eldarion-ajax.min.js" %}"></script>
在令牌返回（和后续的表单提交事件）之后，执行以下视图代码：
Following the return of the token (and the subsequent form submit event) the following view code is executed:
@require_POST
@login_required
def change_card(request):
try:
customer = request.user.customer
send_invoice = customer.card_fingerprint == ""
customer.update_card(
request.POST.get("stripe_token")
)
if send_invoice:
customer.send_invoice()
customer.retry_unpaid_invoices()
data = {}
except stripe.CardError, e:
data = {"error": e.message}
return _ajax_response(request, "payments/_change_card_form.html", **data)
再次...这是现成的django-stripe-payment代码。接下来发生的是如上所述的原始JSON。
Again... this is out-of-the-box django-stripe-payment code. The next thing that happens is the raw JSON as mentioned above.
推荐答案
好的，我解决了。原来，这确实是一个jQuery的问题。我在我的应用程序中引用了两个jQuery文件。当我删除第二个，并卡住了上面提到的一个，它的工作！我的信用卡详细信息按预期在页面上更新（虽然缓慢）。
Ok, I solved it. It turned out it was indeed a jQuery problem. I was referencing two jQuery files in my application. When I removed the second one, and stuck with the one mentioned in the question above, it worked! My credit card details updated as expected on the page (albeit slowly).
由于我使用pinax框架，它自动附带了一个jQuery引用。至少需要Django调试工具栏。这包含在base.html文件里面：
Because I am using the pinax framework, it comes with a jquery reference automatically. It's required for the Django debug toolbar at least.This is included in the "base.html" file inside:
{% block script_base %}{% endblock %}
（base.html位于这里：pinax_theme_bootstrap / templates / theme_bootstrap）
("base.html" is located here: pinax_theme_bootstrap/templates/theme_bootstrap)
幸运的是，base.html提供了一个名为jquery_src的可重复的块，所以在我的应用程序的site_base.html文件中，我刚刚进入在底部之后：
Fortunately base.html provides an over-ridable block called "jquery_src", so in my "site_base.html" file in my app, I just entered the following towards the bottom:
{% block jquery_src %}{% endblock %}
这删除了第二个jQuery库。
This removed the second jQuery library.
我也试过使用jQuery v1.11.0被认为在我之前提到的这个问题的错误它也有效。
I also tried using jQuery v1.11.0 which was thought to be at fault in this SO question I mentioned earlier and it also worked.
这篇关于Django AJAX JSON响应在浏览器中显示为原始文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
