简单的 AJAX 按钮单击（服务器是本地的）不起作用答案

【问题标题】：Simple AJAX button click (server is local) doesn't work简单的 AJAX 按钮单击（服务器是本地的）不起作用
【发布时间】：2020-05-15 03:51:19
【问题描述】：

我是 AJAX 的新手，我尝试过最简单的方法之一（我认为），加载 HTML 网页，单击按钮并显示警告框。由于某种原因，我尝试过的所有示例（使用 GET、POST、不同的语法……）都不起作用。我的网络服务器是本地的，我使用 node js、express 和 ejs。在互联网上似乎有很多点击这个按钮的例子，但是本地服务器没有任何效果。我测试的浏览器是谷歌浏览器。

<script type="text/javascript">
$(document).ready(function(){
    $('btn').on('click', function(){
        $.ajax({
            'url': '/gebruikerpagina',
            'type': 'POST',
            succes: function(st){
              if(st === "succes"){
                alert('Clicked');
              }  
            }
        })
    }); 
}); 
</script>

<button type="button" id="btn">Change Content</button>

这是在我的 HTML 文件中（头部也导入了 jquery），接下来的代码在我的 js 中：

app.post('/gebruikerpagina', function(req,res){
    res.render('../gebruikerpagina')
});

【问题讨论】：

你打错了：succes 应该是success。
我不敢相信我错过了，谢谢！但是还是不行……
第二个错字，btn 应该是 #btn 对于选择器
检查控制台是否有错误
你说得对，不知道我为什么这样做，但仍然没有警告框。

标签： javascript jquery node.js ajax localhost

【解决方案1】：

考虑下面的代码。

$(function() {
  $('#btn').click(function() {
    $.ajax({
      url: "./gebruikerpagina",
      type: "POST",
      succes: function(st) {
        console.log(st);
        if (st === "success") {
          console.log("Success");
        }
      },
      error: function(x, e, t) {
        console.log(e, t);
      }
    })
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="btn">Change Content</button>

这种性质的代码将为控制台提供更多反馈，并且更易于诊断。此代码还使用了正确的选择器。

更多：https://api.jquery.com/jquery.ajax/

【讨论】：