使用Javascript onClick执行PHP函数而不刷新页面

Question

我的研究将我指向 Ajax 和/或 JQuery，但我想问一下以确保我理解并朝着正确的方向前进。

我一直在寻找使用 javascript onclick 函数来创建一个弹出窗口（警报），要求确认我要继续并显示我将要进行的更改。

我希望我可以使用 PHP $_POST 或 GET 来响应弹出/警报窗口中的更改。但是，如果没有页面刷新，我似乎无法执行此操作，但需要确认？我应该寻找 Ajax 来做到这一点吗？任何想法/建议都可能让我领先一步，因为 php/ajax 对我来说有点陌生。

示例代码：

<script>     
function clicked() {
    if (confirm('Do you want to submit? <?php if(isset($_POST['city'])){$city = $_POST['city'];echo $city;}?>')) 
    {
        yourformelement.submit();
    } else {
        return false;
    }
}
</script>
</head>
<form action="output.php" method="post">
  <input name="city">

<input type="submit" onclick="clicked();" value="Button" />
 </form>

</html>

Answer 1

提交前可以用jQuery获取输入值：

<form action="output.php" method="post" id="form">
    <input name="city" id="city_input">
    <input type="submit" value="Button" />
</form>
<script>     
    $('#form').submit(function(e) {
        e.preventDefault();
        let cityInputVal = $('#city_input').val();
        if (confirm('Do you want to submit ' + cityInputVal + '?')) 
        {
            this.submit();
        } else {
            return false;
        }
    });
</script>

preventDefault() 函数停止表单提交，因此页面刷新。