如何将表单响应更改为ajax响应？

I have a form, that uses a php file. The form lets the user: -input 3 text fields for Title/Price/Description -Select an image for his product -Choose a table from the dropdown list (options are the table values)

As you see on my code after the user press the submit button, the browser redirects to another page, saying that "1 records was adder successfully".

I want it to be like after the user clicks the submit button on the form, a (javascript/ajax) messagewill appear letting him know that the records was added successfully.

Sorry for long coding, I think you might need everything. OPEN TO ANY SUGGESTIONS

form

<div id="addForm">
     <div id="formHeading"><h2>Add Product</h2></div><p>

    <form id = "additems" action="../cms/insert.php" enctype="multipart/form-data" method="post"/>
      <label for="title">Title: </label><input type="text" name="title"/>
      <label for="description">Desc: </label><input type="text" name="description"/>
      <label for="price">Price: </label><input type="text" name="price" />
      <label for="stock">Quan: </label><input type="text" name="stock" />
      <p>
<small>Upload your image <input type="file" name="photoimg" id="photoimg" /></small>

<div id='preview'>
</div>

     <select name="categories">
              <option value="mens">Mens</option>
              <option value="baby_books">Baby Books</option>
              <option value="comics">Comics</option>
              <option value="cooking">Cooking</option>
              <option value="games">Games</option>
              <option value="garden">Garden</option>
              <option value="infants">Infants</option>
              <option value="kids">Kids</option>
              <option value="moviestv">Movies-TV</option>
              <option value="music">Music</option>
              <option value="women">Women</option>
    </select>

           <input type="submit" name="Submit" value="Add new item">
          </form>
  </div>

insert.php (used on the form)

session_start();
$session_id='1'; //$session id
$path = "../cms/uploads/";

    $valid_formats = array("jpg", "png", "gif", "bmp");
    if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
        {
            $name = $_FILES['photoimg']['name'];
            $size = $_FILES['photoimg']['size'];

            if(strlen($name))
                {
                    list($txt, $ext) = explode(".", $name);
                    if(in_array($ext,$valid_formats))
                    {
                    if($size<(1024*1024))
                        {
                            $actual_image_name = time().substr(str_replace(" ", "_", $txt), 5).".".$ext;
                            $tmp = $_FILES['photoimg']['tmp_name'];
                            if(move_uploaded_file($tmp, $path.$actual_image_name))
                                {

$table = $_POST['categories'];
$title = $_POST['title'];
$des = $_POST['description'];
$price = $_POST['price'];
$stock = $_POST['stock'];
    $sql="INSERT INTO $table (title, description, price, image, stock)
    VALUES
    ('$title','$des','$price','$path$actual_image_name','$stock')";

    if (!mysqli_query($con,$sql))
    {
        die('Error: ' . mysqli_error($con));
    }
    echo "<h1>1 record added into the $table table</h1>";
    echo '<button onclick="goBack()">Go Back</button>';

with jquery its quite simple:

Just do the following: 1st thing, remove the type="submit" in your input and give it a unique identifier like this:

<input id="submit_form" name="Submit" value="Add new item">

2nd thing, in your javascript file, do:

$(document).ready(function(){
    $('input#submit_form').on('click', function() {
        $.ajax({
            url: 'addnew.php',// TARGET PHP SCRIPT
            type: 'post'      // HTTP METHOD
            data: {
                'title' : $('input[name="title"]').val()
            },
            success: function(data){
                alert(data); // WILL SHOW THE MESSAGE THAT YOU SHOWED IN YOUR PHP SCRIPT.
            }
        });
    });
})

3nd thing, in you php file: Do the same thing but just do:

die("1 record added into the $table table")