如何通過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.'); 
      } 
     }); 
    }); 
}); 

目前，在頁面的第一次訪問整個表單啓用和空白，如果我輸入匹配數據庫中的代碼，形式顯示相關的信息和一些領域的獲取禁用就像我想要。但是，如果我刪除整個代碼，表單不會返回到所有已啓用的字段，則這些字段仍處於禁用狀態且爲空。另外，如果我輸入一個新的代碼，我該如何顯示一個空白表單而不是半禁用表單？

P.S.我在一個文本框中輸入UPC代碼，該代碼不是本表格的一部分。該文本框的ID爲'upc'，並且攜帶此表單的div的ID爲'extra'，您將在JS代碼中看到該ID。

Answer 1

您的JS中的'錯誤'事件不會命中，因爲您的視圖不會返回錯誤。

我不是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 %} 

謝謝。 :)