简单的PHP AJAX脚本

I have 2 scripts, submit.php and display.php.

I want to be able to load submit.php, click the submit button & the result div to display 123.

Right now, it just reloads my page. I'm not getting anything from my Console so stuck how to debug.

Can someone take a look and provide assistance?

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>

display.php:

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

It submits or reloads the page. You need to prevent the default action. Change the first two lines:

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

You may change to type="button", but not sure if it will be effective.

solved your issue please

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

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