使用 Ajax 处理 json HttpResponse答案

【问题标题】：Processing a json HttpResponse using Ajax使用 Ajax 处理 json HttpResponse
【发布时间】：2020-11-15 05:49:24
【问题描述】：

我已经从views.py 发送了一个HttpResponse 到一个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 %}

【问题讨论】：

您是否尝试过从<form method="POST" action="#" id="trackerForm"> 标记中删除method 和action 属性并将其保留为<form id="trackerForm">？
从您的 tracker.html 从表单中删除操作属性并将按钮类型更改为按钮而不是提交，而不是 $('#trackerForm').submit，执行 $('#trackerForm').click 或简单地在您的提交处理程序中尝试 event.preventDefault()应该能解决问题
我试过删除 action 属性，它对我的情况不起作用。由于在views.py 文件中引用了method 属性，因此无法删除它。 @PrathapReddy
我尝试按照您的建议修改了按钮类型并使用了$('#trackerForm').click，但效果不佳，单击按钮没有任何结果。与event.preventDefault() 相关，它已经存在于代码中。 @Suryan
我不熟悉python/django代码。我相信问题可能存在于if 块内的 return HttpResponse(response) 行。您可能需要返回html 页面。 Contol 永远不会到达 return render(request, 'shop/tracker.html') 行。如果我错误地解释了您的代码，请忽略此评论。

标签： javascript json django ajax httpresponse

【解决方案1】：

将 event.preventDefault() 放在执行 Ajax 请求之前。

当您的 Ajax 请求返回 httpresponse 时，提交按钮的默认操作被触发到 Dom 已经更改，然后您才能告诉 Dom 不要更改。

【讨论】：