Javascript JQuery post-to-REST服务

我已经查看了堆栈上的一系列不同的Q/a，我似乎无法解决我的问题，因为为什么我的rest接口没有在按钮submit上被调用。如果你们能看看问题出在哪里，我将不胜感激

我们的目标是拥有一个表单输入值（目前它们是硬编码的，直到我让它工作为止），并通过REST调用提交以更改它们所在的数据库

编辑：点击按钮，控制台中没有错误，数据库中没有显示任何内容

<?php 

    $id = "123456";
    $auth = "XYZ123"; //this will change daily
    $url = "http://update/this/id/$id"; //this will change based on user

?>

<script >
    const URL = <?php echo json_encode($url);?>;
    const auth = <?php echo json_encode($auth);?>;
    const data = {
        "flag":"Y" //in the database flag has a value of N want to change to Y
    }

    $.ajaxSetup({
        headers: {
            'auth-key': '${auth}',
            'api-version': '1.0',
            'Content-Type': 'application/json',
            'Accepts': 'application/json',
            'Verbosity' : '4'
        }
    });
    $('.btn').click(function(){
        $.post(URL, data, function(data, status){
            console.log('${data} and status is ${status}')
        });
    })
</script>

<button type="submit" class="btn">Send it!</button>

常量URL=；
常量auth=；
常数数据={
“flag”：“Y”//数据库标志中的值为N，希望更改为Y
}
$.ajaxSetup({
标题：{
“身份验证密钥”：“${auth}”，
“api版本”：“1.0”，
“内容类型”：“应用程序/json”，
“接受”：“应用程序/json”，
“冗长”：“4”
}
});
$（'.btn'）。单击（函数（）{
$.post（URL、数据、函数（数据、状态）{
log（“${data}和状态为${status}”）
});
})
发送它！

JavaScript在加载DOM之前执行（

标记中断DOM解析器）。当脚本执行时，还没有

.btn

元素

或者

• 将脚本移动到正文末尾（或至少在提交按钮之后）
• 或者添加事件侦听器
• 或者使用全局事件侦听器

  $(document).on('click', '.btn', function() { ... }
  

---

在加载DOM之前执行JavaScript（

标记会中断DOM解析器）。当脚本执行时，还没有

.btn

元素

或者

• 将脚本移动到正文末尾（或至少在提交按钮之后）
• 或者添加事件侦听器
• 或者使用全局事件侦听器

  $(document).on('click', '.btn', function() { ... }
  

---

您应该使用type

按钮

。您是否测试了单击处理程序是否实际执行了？可能会添加一个

console.log（“helloworld”）在
$上方。post（…）
line@Kryptur我可以问一下为什么按钮类型多于提交类型吗？将脚本移到末尾似乎解决了这个问题，并导致了一个新的问题，正如下面Peter回答的那样，您应该使用type
按钮
。您是否测试了单击处理程序是否实际执行了？可能会添加一个
console.log（“helloworld”）在
$上方。post（…）
line@Kryptur我可以问一下为什么按钮类型多于提交类型吗？将脚本移到末尾似乎解决了这个问题，并导致了一个新的问题，正如下面的Peter回答的那样，这对我来说是有意义的，我尝试将脚本移到末尾，然后出现了一个新错误，即访问控制允许源代码，因此感谢您帮助我朝着正确的方向移动。那么您尝试从另一个URL访问API了吗？然后，您的API需要设置适当的访问控制允许源标题我是否将“访问控制允许源”放在ajaxSetup标题中：“url”？访问控制允许源是一个响应标题（服务器对浏览器说：“如果当前页面位于此源下，请求可以；否则，请拒绝它”）。有关详细信息，请参阅。这对我来说很有意义，我尝试将脚本移动到末尾，然后出现了一个新错误，即访问控制允许源代码，因此感谢您帮助我朝正确的方向移动。那么您尝试从另一个URL访问API了吗？然后，您的API需要设置适当的访问控制允许源标题我是否将“访问控制允许源”放在ajaxSetup标题中：“url”？访问控制允许源是一个响应标题（服务器对浏览器说：“如果当前页面位于此源下，请求可以；否则，请拒绝它”）。有关详细信息，请参阅。