Jquery Ajax post to a php script on the same page as the html

Jquery Ajax post to a php script on the same page as the html

I am building an admin page for my wordpress theme and i thought of posting my form content to a php script that is on my html page.The php script is used to insert and help in editing my form.Here is the script.

  1. <?php echo date('H:i:s'); ?>
  2. <html><title>Ajax Example</title>
  3. <head>
  4. <script type="text/javascript"
  5. src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
  6. </script>
  7. <script type="text/javascript">
  8. $(document).ready(function() {
  9. $("#main").on ("click", "#login", function(event){
  10.     event.preventDefault();
  11. {
  12. $.ajax({
  13. type: "POST",
  14.  url: "jp.php",
  15.  data: $("#main").serialize(),
  16.  success: function(){
  17.  alert('lorem ipsum');
  18.  }
  19. });
  20. }
  21. });
  22. });
  23. </script>
  24. </head>
  25. <body>
  26. <form method="post" action="" class="ajax" id="main">
  27. <input type="text" name="city" value="hello world"  />
  28. <input type="submit" id="login" />
  29. </form>
  30. </body>
  31. </html>
Is it possible to post to self like so?.