如何使用AJAX捕获空白退货&；jQuery？

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

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

我已经想出了以下代码

url.py

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

...
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})
...

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})

模板

<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>

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

目前，在第一次访问页面时，整个表单处于启用状态且为空，如果我输入与数据库匹配的代码，表单将显示相关信息，并且某些字段将按照我的要求禁用。但是，如果我删除整个代码，表单不会返回到所有启用的字段，这些字段仍然是禁用的和空白的。此外，如果输入新代码，如何显示空白表单而不是半禁用表单

---

另外，我在一个文本框中输入UPC代码，该文本框不是本表格的一部分。文本框的ID为“upc”，而携带此表单的div的ID为“extra”，正如您在JS代码中看到的那样。

JS中的“error”事件不会命中，因为您的视图不会返回错误

我不是100%确定你想要什么，但你可以退回404

视图.py

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

...
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})
...

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})

模板

<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>

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

---

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

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

---

谢谢。：）

您可以调用

form

reset DOM方法，类似于：

if（！data）{$（'#extra form'）[0].reset（）；return；}

。也就是说，我不确定你的模板标记与你的问题有什么关系。看起来您最好在页面加载第一次启用所有字段的表单时发布MCVEFirst，但是，在我键入任何内容后，JS将加载半禁用的表单。我想这句话不会改变这一点。我把它添加到我的代码中，但它并没有解决问题。但是对于你发布的代码来说，很难获得你预期的行为。如果你想重新设置表单，再次调用itI上的

reset（）

方法。我已经在问题中添加了一个新段落，也许这会清除它。对不起，只有当我在文本框中留出空间时，错误函数才会弹出，只是它不会显示消息。所以我认为它不会起作用。当代码是唯一的并且与数据库中的任何数据都不匹配时，我需要一个新表单。谢谢，我通过在模板中获取逻辑解决了这个问题。我知道这不受欢迎，所以我会试试你的代码，然后回来。哦，没问题，我不介意。一如往常，同样的问题有更多的解决方案。