用ajax提交php表单

script in my the document's head:

<script>
  $(function () {
    $('form#ratingsform').on('submit', function (e) {
      $.ajax({
        type: 'post',
        url: '/dev/scripts/ratevideo_vibrary.php',
        data: $(this).serialize(),
        success: function () {
          alert('form was submitted');
        }
      });
      e.preventDefault();
    });
  });
</script>

My html form (note, this is inside of a PHP echo):

<form id="ratingsform" action="/dev/scripts/ratevideo_vibrary.php" method="post">
    <input type="hidden" name="video_id" value="' . $friend_video_upload_id . '" />
    <input type="hidden" name="peep_id" value="' . $friend_id . '" />
    <input type="hidden" name="page" value="' . $_GET['page'] . '" />
    <div class="video-stars"><input id="imgstar" type="image" src="/dev/images/rate_video_icon.png" name="rating" value="1" border="0" /></div>
    <div class="video-stars"><input id="imgstar" type="image" src="/dev/images/rate_video_icon.png" name="rating" value="2" border="0" /></div>
    <div class="video-stars"><input id="imgstar" type="image" src="/dev/images/rate_video_icon.png" name="rating" value="3" border="0" /></div>
</form>

And here is the script located in /dev/scripts/ratevideo_vibrary.php:

<?php
require('password.php');
require('config.php');
require('checklogin.php');
$mysqlicon = mysqli_connect($db_host, $db_username, $db_password, $db_name);
//identify the user by comparing tokens
$find_user_id = mysqli_query($mysqlicon, "SELECT * FROM logins WHERE token='$storedtoken'");

//grab the user's UUID
while ($row = mysqli_fetch_array($find_user_id)) {
    $uuid = $row['user'];
}

$videoID = $_POST['video_id'];
$peep_id = $_POST['peep_id'];
$page = $_POST['page'];
$rating = $_POST['rating'];

//check if the user already rated this video
$find_if_user_rated_video = mysqli_query($mysqlicon, "SELECT ID FROM videoRatings WHERE videoID = '$videoID' AND raterID = '$uuid'");
if (mysqli_num_rows($find_if_user_rated_video) > 0) {
    header ('Location: /dev/vibrary/vibrary_iseeyou_alleyes.php');
    mysqli_close($mysqlicon);
    exit();
}

//add the rating
mysqli_query($mysqlicon, "INSERT INTO videoRatings VALUES ('', '$videoID', '$uuid', '$rating')");

mysqli_close($mysqlicon);
?>

When clicking on any of the "video-stars" to submit the form, the form is running properly, but it's redirecting to ratevideo_vibrary.php and not running on the same page. This is my first run at using AJAX for this problem, so I'm sure I'm missing something obvious here. Also note: this form appears multiple times on the page (for multiple videos).

change this line

 $('form#ratingsform').on('submit', function (e) {

to

 $('#ratingsform').on('submit', function (e) {

then change

<form id="ratingsform" action="/dev/scripts/ratevideo_vibrary.php" method="post">

to

<form id="ratingsform" action="javascript:void(0)">

or

<form id="ratingsform" action="#">

Move preventDefault() before the ajax script and remove the action event (You are not using at all the action url, instead you are executing a javascript when submitting a form).

Update:

Change the event type to jquery submit:

$('#ratingsform').submit(function (e) {
  e.preventDefault();
  $.ajax({
    type: 'post',
    url: '/dev/scripts/ratevideo_vibrary.php',
    data: $(this).serialize(),
    success: function () {
      alert('form was submitted');
    }
  });
})