提交PHP的形式使用Ajax

Question

腳本在我的文檔的頭：

<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> 

我的HTML表格（注意，這是一個PHP回聲內）：

<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> 

這裏是位於腳本在/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); 
?> 

當任何「視頻明星」的點擊提交表單，表單是運行prope rly，但它會重定向到ratevideo_vibrary.php並且不會在同一頁面上運行。這是我第一次使用AJAX來解決這個問題，所以我確定我在這裏丟失了一些明顯的東西。另請注意：此表單會在頁面上多次顯示（適用於多個視頻）。

Answer 1

移動preventDefault()的AJAX腳本之前和刪除的操作事件（您沒有使用在所有的行動網址，而不是您所提交表單時執行一個javascript）。

更新：

更改事件類型的jQuery提交：

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

Answer 2

變化這一行

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

到

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

然後改變

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

到

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

或

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