如何在帕格模板中发送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请求

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

Answer 2

此处您的哈巴狗模板没有问题（可能只是您可以在()后删除#payment-form()，因为它是空的并且它不是混合物。但是使用你的JS，你立即发送AJAX请求，你应该将它绑定到一个事件（点击按钮，按键输入等）。然后，您必须确保将lib jquery.js放在可以使用scripts/jquery.js从浏览器访问的目录中。如果在此更改后仍然无法正常工作，请更准确地报告您的错误（打开控制台以获取消息，获取您期望的行为以及您获得的行为）。