无法使用ajax加载表单

I have created a simple blog website using php mvc pattern and i am trying to add a post to the database using ajax but its giving me an error respond that i cant resolve

I have Defined the URLROOT as define('URLROOT', 'http://localhost/shareposts');

view/add.php

<h2>Add Post</h2>
<p>Create a post with this form</p>

<form action="<?php echo URLROOT; ?>/posts/add" method="post">
    <div class="form-group">
        <label for="title">Title: <sup>*</sup></label>
        <input type="text" name="name" class="form-control form-control-lg">
    </div>

    <div class="form-group">
        <label for="body">Body: <sup>*</sup></label>
        <textarea name="body" class="form-control form-control-lg "> </textarea>
    </div>

    <input type="submit" class="btn btn-success" value="Submit">
</form>
</div>

<script>
var url = "<?php echo URLROOT; ?>"
    $.ajax({
        url: url + '/posts/add',
        type: 'POST',
        dataType: 'json',
        data: form,
        beforeSend: function() {
            //do something here like load a loading spinner etc. 
        },
 })
 </script>

I have created an add method in the post controller

controller/post.php

<?php
class Posts extends Controller 
{
    public function add()
    {
        $response = array();
        $message = '';

        if(empty($_POST['name'])) {
            $message .= "Name required <br />";
        }

        if(empty($_POST['body'])) {
            $message .= "Description required <br />";
        }

        if($message) {
            $response['success'] = false;
            $response['message'] = $message;
        } else {
            $name = filter_var($_POST['name'], FILTER_SANITIZE_STRING);
            $body = filter_var($_POST['body'], FILTER_SANITIZE_STRING);
            $data = [
                'name' => $name,
                'body' => $body,
                'user_id' =>$_SESSION['user_id'],
            ];

            if($this->postModel->addPost($data)) {
                $response['success'] = true;
                $response['message'] = "Success";
            } else {
                $response['success'] = false;
                $response['message'] = "Something went wrong. Try again later.";
            } 
        }

        echo json_encode($response);
    }
}

so once i load the add page i get a json error message which says name is required

Output i get

{
    "success":false,
    "message":"Name required Description required"
}

As your output suggests, the $_POST elements are empty. To fix this you must assign variables to the individual elements of your form.

I also agree with Magnus Eriksson about triggering the js code only when you submit the form.

<script>
  var url = "<?php echo URLROOT; ?>"
  var name = $("input[name=name]").val();
  var body = $("input[name=body]").val();

  $.ajax({
    url: url + '/posts/add',
    type: 'POST',
    dataType: 'json',
    data: {'name' : name, 'body' : body},
    beforeSend: function() {
        //do something here like load a loading spinner etc. 
    },
   })
 </script>

Update

Here is one way to submit your form using JQuery's .click()

HTML:

<div class="your-form">
  <div class="form-group">
    <label for="title">Title: <sup>*</sup></label>
    <input type="text" name="name" class="form-control form-control-lg">
  </div>

  <div class="form-group">
    <label for="body">Body: <sup>*</sup></label>
    <textarea name="body" class="form-control form-control-lg "> </textarea>
  </div>

<button id="submit-btn" class="btn btn-success">
</div>

JS:

$("#submit-btn").click(function() {
  var url = "<?php echo URLROOT; ?>"
  var name = $("input[name=name]").val();
  var body = $("input[name=body]").val();

  $.ajax({
   url: url + '/posts/add',
   type: 'POST',
   dataType: 'json',
   data: {'name' : name, 'body' : body},
   beforeSend: function() {
    //do something here like load a loading spinner etc. 
   },
  })
  .done(function() { 
    location.reload(); //add this if you want to reload the page after completion
  })
});

You have to pass form data with ajax.

$("#formID").submit(function(e) {

        e.preventDefault();
        var form = $(this);
        var URL= form.attr('action');

        $.ajax({
        type: "POST",
        url: URL,
        data: form.serialize(), 
        success: function(data)
        {
            console.log(data);
        }
        });
});