HTML POST请求异常，无法触发Alert弹窗问题求助

我帮你梳理下代码里的几个关键问题，这就是为啥你点击按钮后没任何弹窗的原因：

• 错误的输入值获取方式：你用了$('#name').value()，但jQuery对象没有value()方法！正确的写法是$('#name').val()（jQuery专属方法），如果用原生JS的话是document.getElementById('name').value，这里你用了jQuery选择器，所以得用val()。

• 没添加AJAX成功回调：你的AJAX代码只发送了请求，但完全没写请求成功后要执行的逻辑——也就是你要的弹窗！得在$.ajax配置里加上success回调函数，用来处理API返回的结果并弹出提示。

• 额外建议：加上错误处理：为了调试方便，最好加上error回调，这样如果请求失败（比如跨域、API地址错误），你能快速知道哪里出问题。

下面是修正后的完整代码：

<!DOCTYPE html>
<html>
<body>
    <b>Enter name</b> <br>
    <input type="text" id="name"> <br>
    <button id="button1">Submit</button>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $('#button1').click(function(){
            $.ajax({
                type: "POST",
                url: "http://(api url)", // 替换成你的实际API地址
                data: {name: $('#name').val()}, // 修正val()方法
                success: function(response) {
                    // 请求成功时弹窗展示API返回结果
                    alert('API返回结果：' + JSON.stringify(response));
                },
                error: function(xhr, status, error) {
                    // 请求失败时弹窗提示错误信息
                    alert('请求出错：' + error);
                }
            });
        });
    </script>
</body>
</html>

简单解释下改动：

• 把value()改成了val()，正确获取输入框内容
• 添加了success回调，当API成功返回数据时，用alert展示结果（如果返回的是JSON对象，用JSON.stringify转成字符串更易读）
• 添加了error回调，方便排查请求失败的问题

另外还要注意，如果你的API地址和当前页面域名不同，可能会遇到跨域问题，这时候需要API端配置CORS，或者你用代理方式解决，但这是另一个问题了，先把上面的基础问题解决，应该就能看到弹窗了。

内容的提问来源于stack exchange，提问作者wozverine