如何使用 AJAX 和 jQuery 捕获空白返回？

Question

我正在尝试在 Django 中创建一个表单，该表单接受代码并在数据库中搜索匹配的行。如果找到匹配项，它会在表单中显示相关数据，其中一些字段被禁用，一些字段被启用，因此只能更新某些字段。但是，如果没有找到匹配项，我需要显示表单并启用所有字段，以便可以进行新条目。

目前我的设计方式如下： 1）页面第一次加载，JS什么都不做，页面包含HTML表单。 2）当我在输入文本框（不是表单的一部分）上键入任何内容时，该值用于调用 JS 文件中指定的 URL。该 URL 返回一个禁用某些字段的表单。它还从数据库中获取与输入文本框的值匹配的行。 3) 如果该值与数据库中的任何行都不匹配，则用户正在输入新的 UPC 代码，这意味着他需要一个启用所有字段的表单。我的问题是表单仍然是半禁用的。 4）此外，如果用户从输入文本框中删除整个值，我需要表单具有所有启用的字段，就像第一页加载一样。但它仍然处于禁用状态。

我想出了以下代码。

urls.py

...
url(r'^get/product/(?P<upc>.*)/$', views.GetProduct, name='get-product'),
...

views.py

...
def GetProduct(request, upc):
    try:
        item = Item.objects.get(upc=upc)
    except Item.DoesNotExist:
        item = Item.objects.none()
    return render(request, "alpha/get-product.html", {'item': item})
...

模板

<div class="container">
    <form class="form-horizontal" role="form">
        <div class="form-group">
            <label class="control-label col-xs-2" for="name">Name:</label>
            <div class="col-xs-8">
                <input type="text" class="form-control" id="name" placeholder="{{ item.name }}" disabled>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-2" for="qty">Current Quantity:</label>
            <div class="col-xs-3">
                <input type="number" class="form-control" id="qty" placeholder="{{ item.qty }}" disabled>
            </div>
            <label class="control-label col-xs-2" for="dp">DP:</label>
            <div class="col-xs-3">
                <input type="text" class="form-control" id="dp" placeholder="{{ item.dp }}" disabled>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-2" for="qty">Add Quantity:</label>
            <div class="col-xs-3">
                <input type="number" class="form-control" id="qty" placeholder="Enter quantity to add to inventory">
            </div>
            <label class="control-label col-xs-2" for="mrp">MRP:</label>
            <div class="col-xs-3">
                <input type="text" class="form-control" id="mrp" placeholder="{{ item.mrp }}" disabled>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-2" for="reorder_qty">Reorder Quantity:</label>
            <div class="col-xs-3">
                <input type="number" class="form-control" id="reorder_qty" placeholder="{{ item.reorder_qty }}">
            </div>
        </div>

        <div class="form-group">
            <div class="col-xs-offset-2 col-xs-8">
                <button type="submit" class="form-control btn btn-primary">Submit</button>
            </div>
        </div>
    </form>
</div>

JS

$(function() {

    $('#upc').focus();

    $("#upc").keyup(function() {
        var upc = $(this).val();
        if (upc == '') {
            upc = 0;
        }

        $.ajax({
            type: "GET",
            url: '/get/product/' + upc,

            success: function(data) {
                $('#extra').html(data);
            },

            error: function() {
                $('#extra').html('Please enter valid UPC code.');
            }
        });
    });
});

目前，在第一次访问页面时，整个表单是启用的并且是空白的，如果我输入与数据库匹配的代码，表单会显示相关信息，并且某些字段会像我想要的那样被禁用。但是，如果我删除整个代码，表单不会返回到所有启用的字段，这些字段仍然是禁用的并且是空白的。另外，如果我输入新代码，如何显示空白表单而不是半禁用表单？

附：我在不属于此表单的文本框中输入 UPC 代码。文本框的 ID 为“upc”，带有此表单的 div 的 ID 为“extra”，您将在 JS 代码中看到。

Answer 1

你的 JS 中的 'error' 事件不会命中，因为你的视图没有返回错误。

我不能 100% 确定您想要什么，但您可以返回 404。

views.py

def GetProduct(request, upc):
    try:
        item = Item.objects.get(upc=upc)
    except Item.DoesNotExist:
        return HttpResponseNotFound()

    return render(request, "alpha/get-product.html", {'item': item})

模板

error: function() {
    $('#extra').html('Please enter valid UPC code.');
    $("input").removeAttr('disabled');
}

Answer 2

感谢你们花时间回答这个问题。我已经解决了。我在模板文件中构建了如下逻辑：

{% if item %}
    [ show form with some disabled fields ]
{% else %}
    [ show the same form with all fields enabled ]
{% endif %}

谢谢。 :)