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代码中看到。

Answer 1

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

我不是100％确定你想要什么，但你可以返回404。

<强> views.py

@Override
protected void configure(HttpSecurity http) throws Exception {
    http.httpBasic().and()
        .authorizeRequests()
        .antMatchers("/login.html", "/index.html", "/").permitAll()
        .antMatchers("/yes").hasAuthority("10001")
        .antMatchers("/no").hasAuthority("00000")
        .anyRequest()
        .authenticated().and()
        .addFilterAfter(new CSRFHeaderFilter(), CsrfFilter.class)
        .csrf().csrfTokenRepository(csrfTokenRepository());
}

<强>模板

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

Answer 2

感谢您们提出这个问题的时间。我已经解决了。我在模板文件中构建了一个逻辑，如下所示：

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

感谢。：）

如何使用AJAX＆amp; amp;获取空白回报jQuery的？

2 个答案: