How to display json in modal window via AJAX?

Question

PHP

There is a modal window on the bootstrap, a form is hung on it, which receives the order number from the user and queries the database via php. The database gives the data, php translates them into json. It seems like everything was implemented) I want to make the data received from the database be displayed in the same modal window without reloading the page, here some questions begin. I am just starting to understand javascript and jquery, so the level is zero, but there is Google, and there is a solution to do it through AJAX. But not everything is as simple as we would like )) as if there is no js script with AJAX. I hope I explained clearly. Three days of googling and reading did not give any fruit, so I appeal to the esteemed community - how to implement this?

The modal window itself

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Проверить заказ</h4>
          </div>
          <div class="modal-body">
            <script src="./js/get_order.js"></script>
            <form action="./php/getorder.php" method="post" id="getOrderform" novalidate>
              <div class="control-group">
                      <div class="controls">
                      	<input type="text" class="form-control"
              placeholder="Номер заказа" id="num" name="num" required
              data-validation-required-message="Введите номер заказа" />
              <p class="help-block"></p>
              <button type="submit" class="btn btn-primary">Отправить запрос</button>
         			</div> 
          </div> 
          <div id="success"> </div>
        </form>
          </div>
        </div>
      </div>
</div>

PHP handler (getorder.php)

<?php
$databasehost = "localhost"; 
$databasename = "test"; 
$databasetable = "sample"; 
$databaseusername="test"; 
$databasepassword = ""; 
try {
    $pdo = new PDO("mysql:host=$databasehost;dbname=$databasename", 
        $databaseusername, $databasepassword,
        array(
            PDO::MYSQL_ATTR_LOCAL_INFILE => true,
            PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION
        )
    );
}
catch (PDOException $e) {
    die("database connection failed: ".$e->getMessage());
  }
$pdo->exec("set names utf8");
$num = $_POST['num'];
$stmt = $pdo->prepare('SELECT item, discription FROM sample WHERE num = :num');
$stmt->execute(array('num' => $num));
$row = $stmt->fetch(PDO::FETCH_ASSOC);
echo json_encode($row, JSON_UNESCAPED_UNICODE);
exit();
?>

JS AJAX (get_order.js)

$(function(){
$('#getOrderform').submit(function(e){
e.preventDefault();
var m_method=$(this).attr('method');
var m_action=$(this).attr('action');
var num = $("input#num").val();
$.ajax({
type: m_method,
url: m_action,
data: {num: num},
cache: false,
dataType: 'json',
success: function(data) {alert(data);}
});
};
};

Answer 1

You hang the handler before the element is rendered in the browser, you need to use $(document).ready()

Answer 2

1. If you are sending a request with Ajax, it is better to remove the action attribute in the form by adding it to the Ajax attributes.
2. The form must return false when submitted. Then there will be no transition to a new page.