Javascript 使用Ajax处理json HttpResponse

我已将一个HttpResponse从views.py发送到一个HTML页面。但是，在加载定向页面时，它只显示JSON对象，而不显示包含详细信息的实际HTML页面

这是请求完成后页面的外观

这些是我对数据显示方式的期望

views.py

def tracker(request):
    if request.method == "POST":
        oid = request.POST.get('oid', '')
        email = request.POST.get('email', '')
        try:
            order = Orders.objects.filter(order_id = oid, email = email)
            if len(order)>0:
                update = OrderUpdate.objects.filter(order_id = oid)
                updates = []
                for item in update:
                    updates.append({'text': item.update_desc, 'time':item.timestamp})
                    response = json.dumps(updates, default = str)
                return HttpResponse(response)
            else:
                return HttpResponse({})
        except Exception as e:
            return HttpResponse({})

    return render(request, 'shop/tracker.html')

tracker.html

{% include 'shop/basic.html' %}
{% block body %}
<div class="container">
    <div class="col my-4">
        <h2>My Awesome Cart Tracker - Enter yuor Order ID and Email address to track your order</h2>
        <form method="POST" action="#" id="trackerForm">
            {% csrf_token %}
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="Oid">Order Id</label>
                    <input type="text" class="form-control" id="oid" name="oid" required="">
                </div>
                <div class="form-group col-md-6">
                    <label for="inputEmail4">Email</label>
                    <input type="email" class="form-control" id="inputEmail" name="email" required="">
                </div>
            </div>
            <button type="submit" class="btn btn-primary">Track Order</button>
        </form>
    </div>
    <div class="col my-4">
        <h2>Your Order Status</h2>
        <div id="items" class="my-4">
            <ul class="list-group my-4" id="items">
                Enter your order ID and Email and click Track Order to find details about your order!
            </ul>
        </div>
    </div>
    {% endblock %}

    {% block js %}
    <script>
        $('#trackerForm').submit(function (event) {
            $('#items').empty();
            var formData = {
                'orderId': $('input[name = oid]').val(),
                'email': $('input[name=email]').val(),
                'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val(),
            }
            $.ajax({
                type: 'POST',
                url: '/shop/tracker/',
                data: formData,
                encode: true
            })
                .done(function (data) {
                    updates = JSON.parse(data);
                    if (updates.length > 0 & updates != {}) {
                        for (i = 0; i < updates.length; i++) {
                            let text = updates[i]['text'];
                            let time = updates[i]['time'];
                            mystr = `<li class="list-group-item d-flex justify-content-between align-items-center">
                    ${text}
                    <span class="badge badge-primary badge-pill">${time}</span>
                </li>`
                            $('#items').append(mystr);
                        }
                    }
                    else {
                        mystr = `<li class="list-group-item d-flex justify-content-between align-items-center">
                    Sorry, we are not able to fetch this order ID and email. Kindly recheck the Order ID and email.</li>`
                        $('#items').append(mystr);
                    }

                });
            event.preventDefault();
        });
    </script>
    {% endblock %}

{%include'shop/basic.html%}
{%block body%}
我最棒的购物车跟踪器-输入您的订单ID和电子邮件地址以跟踪您的订单
{%csrf_令牌%}
订单号
电子邮件
轨道顺序
您的订单状态

输入您的订单ID和电子邮件，然后单击“跟踪订单”以查找有关您的订单的详细信息！

{%endblock%}
{%block js%}
$（“#trackperform”）.submit（函数（事件）{
$（'#items'）.empty（）；
var formData={
'orderId'：$（'input[name=oid]'）。val（），
'email'：$（'input[name=email]'）。val（），
'csrfmiddlewaretoken'：$（'input[name=csrfmiddlewaretoken]'）。val（），
}
$.ajax({
键入：“POST”，
url:“/shop/tracker/”，
数据：formData，
编码：正确
})
.完成（功能（数据）{
updates=JSON.parse（数据）；
if（updates.length>0&updates！={}）{
对于（i=0；i
${text}
${time}
`
$（'#items'）。追加（mystr）；
}
}
否则{
mystr=`

抱歉，我们无法获取此订单ID和电子邮件。请重新检查订单ID和电子邮件。
`
$（'#items'）。追加（mystr）；
}
});
event.preventDefault（）；
});
{%endblock%}

在执行Ajax请求之前放置event.preventDefault（）

---

当您的Ajax请求返回httpresponse时，向Dom触发的submit按钮默认操作在您告诉Dom不要更改之前已经更改。

您是否尝试从

标记中删除

方法

和

操作

属性，并将其作为

保留在tracker.html remove中将按钮类型从表单更改为按钮istead of submit，istead of

$（“#TrackPerform”）。提交

，执行

$（“#TrackPerform”）。单击

或在提交处理程序中尝试

事件。preventDefault（）

这应该可以解决问题。我已尝试删除操作属性，但对我的情况不起作用。无法删除方法属性，因为它已在views.py文件中引用@PrathapReddyI尝试按照您的建议修改按钮类型并使用

$（“#trackperform”）。单击

，但没有效果单击按钮没有任何结果。与

event.preventDefault（）

相关，它已经存在于代码中@SuryanI不熟悉python/django代码。我相信问题可能出现在

if

块中的行返回HttpResponse（response）中。您可能需要返回

html

页面。Contol永远不会到达返回渲染行（请求'shop/tracker.html'）。如果我错误地解释了您的代码，请忽略此注释。