Django-Ajax“未捕获的引用错误：FOO 未定义”

Question

我是 AJAX 新手。 A 想要调用 django 视图来更新商品数量并更改页面上的编号。 我有模板

...
{% for item in items %}
  <div id="quantity">{{ item.quantity }}</div>
  <button onclick="updateQuantity('parts/quotes/ajax/increase-item/')">+</button>
...
<script>
  function docReady(fn) {
    if (document.readyState === "complete" || document.readyState === "interactive") {
      setTimeout(fn, 1);
    } else {
      document.addEventListener("DOMContentLoaded", fn);
    };
  };

  docReady(function() {

    function updateQuantity(url) {
      fetch(url, {
        method: "GET",
        headers: {
          "X-Requested-With": "XMLHttpRequest",
        }
      })
      .then(response => response.json())
      .then(data => {
        document.getElementById("quantity").innerHTML = data;
      });
    }

  });
</script>

还有一个观点：

def increase_quote_item_ajax(request):
    is_ajax = request.headers.get('X-Requested-With') == 'XMLHttpRequest'
    if is_ajax:
        if request.method == 'GET':
            item = QuoteItem.objects.get(id=pk)
            item.quantity += 1
            item.save(update_fields=['quantity'])
            return JsonResponse({'data': item.quantity})
        return JsonResponse({'status': 'Invalid request'}, status=400)
    else:
        return HttpResponseBadRequest('Invalid request')

但是当我点击+按钮时我得到了

Uncaught ReferenceError: updateQuantity is not defined

为什么我的函数没有注册？

Answer 1

updateQuantity

不在全局（窗口）范围内定义，仅在特定函数中定义。所以

<button>

不能像这样直接调用它。

一种方法是将

updateQuantity

函数移出匿名函数并移至全局范围：

<script>
  function updateQuantity(url) {
    //...
  }
</script>

由于这一切都是 define 一个函数，那么它不需要等待

DOMContentLoaded

事件。如果您想要/需要等待该事件，您可以手动将函数分配给window

对象：

<script>
  docReady(function() {
    window.updateQuantity = function (url) {
      //...
    };
  });
</script>

或者，根本不直接在

<button>

 标记中调用函数，而是在定义函数的位置分配一个单击处理程序。例如，如果您给 

<button>

 一个 

id

：

<button id="update-button">+</button> 然后在定义函数时，您可以使用

id

 （或您喜欢的任何选择器，这只是示例）将单击处理程序附加到按钮：

<script>
  docReady(function() {
    const url = 'parts/quotes/ajax/increase-item/';

    function updateQuantity() {
      //...
    }

    document.querySelector('#update-button').addEventListener('click', updateQuantity);
  });
</script>