如何处理同一页面上的 jQuery Ajax 调用？答案

【问题标题】：How to handle jQuery Ajax call on the same page?如何处理同一页面上的 jQuery Ajax 调用？
【发布时间】：2020-10-13 11:50:07
【问题描述】：

我正在尝试使用 jQuery ajax 发出获取请求，希望在同一页面上获得响应。我试过这段代码...

   
    <p>This is a Ajax get request.</p>
    <button class='send'>click</button>
    <p id='pritam'></p>

    <?php
    if (isset($_GET['name'])) {
        echo $_GET['name'];
        exit;   
    }
    ?>

    <script>
    $(document).ready(function() {
        $(".send").click(function(){
            $.ajax({
                type: "GET",
                data: {name: 'praveen'},
                success: function(data) {
                    $("#pritam").html(data);
                }
            });
        });
    });
    </script>

但是我得到一个错误，当我点击包含按钮标签的按钮时，它会再次执行所有页面元素。

【问题讨论】：

如果您在问题中包含错误信息将会非常有用。
你最好把php代码放在最上面
@Mitya，我在同一页面上发出获取请求，所以我不认为，我必须指定 URL。
所以您实际上没有收到错误消息，但行为不是您想要的？这是两个不同的东西。 “当我点击包含按钮标签的按钮时，它会再次执行所有页面元素” - 是的，当然可以……如果你不想要，那么你需要将部分代码包装在 if/else 结构中，根据当前请求是 AJAX 请求还是“正常”请求来“执行”它的某些部分。 stackoverflow.com/questions/19794859/detect-ajax-in-php
@PraveenKumar 因为它上面的 HTML 将作为对您的 ajax 的响应而包含在内。这就是为什么你应该把它放在上面。所以你会有一个干净的回应

标签： javascript php jquery ajax

【解决方案1】：

你应该把你的 PHP 部分放在这个 php 文件的顶部。

编辑：

那是因为一个 PHP 文件是从上到下执行的。处理ajax请求时，会先输出PHP部分上面的内容。这将导致您获得的数据响应包含页面 html 标记。

【讨论】：

我看到你还没有 50 reps，但这实际上只是一个评论。这种类型的答案会吸引反对票或被标记为我没有 DV，如果发生这种情况，您将失去代表点并且需要更长的时间才能达到您需要评论的 50 个代表任何问题。在那之前，坚持那些问得好，因此无需澄清就能轻松回答的问题。 meta.stackexchange.com/questions/214173/…
嗨 lindowx，你可以进一步解释一下，:) 这个答案确实有帮助

【解决方案2】：

你可以这样做

  <?php
    if (isset($_GET['name'])) {
        echo $_GET['name'];
        exit;   
    }
 ?>

 <p>This is a Ajax get request.</p>
    <button class='send'>click</button>
    <p id='pritam'></p>

    

    <script>
    $(document).ready(function() {
        $(".send").click(function(){
            $.ajax({
                type: "GET",
                data: {name: 'praveen'},
                success: function(data) {
                    $("#pritam").html(data);
                }
            });
        });
    });
    </script>

【讨论】：