简单的PHP AJAX脚本

我有两个脚本，

submit.php

和

display.php

我希望能够加载

submit.php

，单击submit按钮和

result

div以显示

123

现在，它只是重新加载我的页面。我没有从我的控制台中得到任何东西，因此无法调试

有人能看一下并提供帮助吗

submit.php:

<form>

  <input type="submit" value="Submit" name="display" id="display">

</form>

<div id="result">&nbsp;</div>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$("#display").click(function() {                

    $.ajax({
      url: 'display.php',
      type: 'GET',          
      dataType: "html",
      data: {
         "id": "123",
      }, 
      success: function(data) {
      //called when successful
      $('#result').html(data);
      },
      error: function(e) {
      //called when there is an error
      //console.log(e.message);
      }
    });

});
</script>

<?php
$id = $_GET['id'];
echo $id;
?>

$（“#显示”）。单击（函数（）{
$.ajax({
url:'display.php'，
键入：“GET”，
数据类型：“html”，
数据：{
“id”：“123”，
}, 
成功：功能（数据）{
//成功时调用
$（'#result'）.html（数据）；
},
错误：函数（e）{
//发生错误时调用
//控制台日志（e.message）；
}
});
});

display.php:

<form>

  <input type="submit" value="Submit" name="display" id="display">

</form>

<div id="result">&nbsp;</div>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$("#display").click(function() {                

    $.ajax({
      url: 'display.php',
      type: 'GET',          
      dataType: "html",
      data: {
         "id": "123",
      }, 
      success: function(data) {
      //called when successful
      $('#result').html(data);
      },
      error: function(e) {
      //called when there is an error
      //console.log(e.message);
      }
    });

});
</script>

<?php
$id = $_GET['id'];
echo $id;
?>

---

它提交或重新加载页面。您需要阻止默认操作。更改前两行：

$("#display").click(function(e) { // Add e (event) parameter.
  e.preventDefault();             // Prevent the default action for this event.

---

您可以更改为

type=“button”

，但不确定是否有效。

请解决您的问题

  replace
 <input type="submit" value="Submit" name="display" id="display">
    by 

    <button type="button" name="display" id="display">Submit</button>

替换
通过
提交

将

type=“submit”

更改为

type=“button”

。您只需提交表单并重新加载页面。您需要防止表单被提交。@j08691我相信它会重新加载表单。@PraveenKumar如果输入不是提交按钮，为什么会重新加载表单？@j08691哇。那很容易。谢谢你的帮助@j08691不确定。我对此也有意见<代码>：（“您可以更改为type=“button”，但不确定它是否有效。”-我确定它会；-）它确实是-刚刚测试过：）@michaelmcgurk LoL。感谢您的确认<代码>：）我自己在实现它时遇到了问题。我应该搞乱了一些东西或者遗漏了一些东西。输入倾向于刷新/加载，而不是JS中带有提交类型的按钮。我不是一个JS大师，但知道那么多LOL@PraveenKumar@PraveenKumar如有疑问，请同时尝试这两种方法；-）