如何在pug模板中发送Ajax请求？

Question

我希望您能在pug模板文件中发送Ajax请求。

form#payment-form()
  section
    label(for="amount")
      input#amount(name="amount" type="tel" min="1" placeholder="Amount"                         value="10")
script(src="scripts/jquery.js")
script.
  (function () {
    var amount = $('#amount').val();
     $.ajax({
      type: "POST",
      url: "/posturl",
      data: {'amount':amount},
      success: function(){},
      dataType: 'json'
    });
  })()

但是它没有起作用，该怎么办？ 我想知道如何在pug文件的嵌入式JavaScript中发送ajax请求

- Nomura Nori

Answer 1

对我来说，似乎有两个问题

1. 您在 (function(){ 下的函数中放置了不必要的制表符。
2. 您需要使用 document.ready 来确保 HTML 内容已经准备好。如果您在获得响应后不真正关心 DOM，则可以避免这一点。

下面是一个有效示例：

doctype html
html
  head
    script(src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js')
    script.
      $(document).ready(function(){
      $.ajax({url: "demo_test.txt", success: function(result){
      $("#div1").html(result);
      }});
      });
  body
    #div1
      h2 Let jQuery AJAX Change This Text

- S4beR

Answer 2

这里您的Pug模板没有问题（也许只需删除()在#payment-form()之后，因为它是空的，不是mixin）。但是，在您的JS中，您立即发送了AJAX请求，您应该将其绑定到事件（单击按钮、输入键等）。然后，请确保您将您的库jquery.js放在一个您可以通过scripts/jquery.js从浏览器访问的目录中。如果在此更改后仍然无法工作，请更准确地报告您的错误（打开控制台以获取消息，获取您期望的行为和实际获得的行为）。

- KyleK