AJAX/PHP沒有工作

Question

所以我想提交一些數據（從表單）到服務器數據庫使用AJAX，但由於某種原因，它接縫，AJAX腳本根本不工作。當我提交表單時，PHP腳本執行沒有問題。我到處尋找答案，但迄今爲止沒有任何工作。這可能是愚蠢的，但我需要一些幫助。

的Jquery/AJAX腳本：

$(document).ready(function() { 
$('#InputForm').submit(function(){ 

    var that = $(this), 
     url = that.attr('action'), 
     type = that.attr('method'), 
     data = {}; 


    that.find('[name]').each(function(index, value){ 
     var that = $(this), 
      name = that.attr('name'), 
      value = that.val(); 

     data[name] = value;  
    }); 

    $.ajax({ 
     url: url, 
     async: true, 
     type: type, 
     data: data, 
     success: function(response){ 
      $(#Suc_Sub).fadeIn(800); 
     } 
    }); 
    return false; 
}); 

}）;

PHP和HTML腳本：

$url = ""; 
$email = ""; 
$comment = ""; 
$stage = ""; 

$url_error = ""; 
$email_error = ""; 
$comment_error = ""; 



if(!empty($_POST['websiteURL'])) 
{ 
    $url = $_POST['websiteURL']; 
    $regex = "/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i"; 
    if (!preg_match($regex, $url)) 
    { 
     $url_error = "Invalid Url"; 
    } 
} 
else 
{ 
    $url_error = "Url is blank"; 
} 



if(!empty($_POST['userEmail'])) 
{   
    $email = $_POST['userEmail']; 
    $email = fix_input($email); 
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) 
    { 
     $email_error = "Invalid email"; 
    } 
} 
else 
{ 
    $email_error = "Email is blank"; 
} 


if(!empty($_POST['userComment'])) 
{ 
    $comment = $_POST['userComment']; 
    $comment = fix_input($comment); 
    $regex = "/^[A-Za-z0-9 _]*[A-Za-z0-9][A-Za-z0-9 _]*$/"; 
    if (!preg_match($regex, $comment)) 
    { 
     $comment_error = "Invalid Comment"; 
    } 
} 
else 
{ 
    $comment_error = "Comment is blank"; 
} 


$stage = $_POST['websiteStage']; 


if(empty($email_error) && empty($url_error) && empty($comment_error)) 
{ 
    $date_parts = getdate(date("U")); 
    $post_date = "$date_parts[mday]-$date_parts[mon]-$date_parts[year] - $date_parts[hours]:$date_parts[minutes]:$date_parts[seconds]"; 
    mysqli_query($con,"INSERT INTO submit (URL,EMAIL,COMMENT,STAGE,Date) 
    VALUES ('$url','$email','$comment','$stage','$post_date')"); 
    die(); 
} 
else 
{ 
    die(); 
} 


<form method="post" id="InputForm" action="..\Scripts\sbt.php"> 
      <fieldset style="border:none"> 
       <ul style="list-style-type: none;"> 
        <li> 
         <label for="websiteURL"> <img src="..\Images\blank tick.png" id="Website_Image" height="50" width="60"> </label> <!--Dont forget about the label pics--> 
         <input size="25" autocomplete="off" title="Type your URL" type="url" id="websiteURL_Box" class="TextInput" name="websiteURL" required="required" placeholder="Your Website URL..." autofocus="autofocus" maxlength="100"/> 
         <div id="flyout_hidden_url" hidden></div> 
        </li><br> 

        <li> 
         <label for="userEmail"> <img src="..\Images\blank tick.png" id="Email_Image" height="50" width="60"> </label> <!--Dont forget about the label pics--> 
         <input size="25" autocomplete="off" title="Your Email plz" type="email" id="userEmail_Box" class="TextInput" name="userEmail" required="required"required="required" placeholder="Your Email..." autofocus="autofocus" maxlength="100"/> 
         <div id="flyout_hidden_email" hidden></div> 
        </li><br> 

        <li> 
         <label for="userComment"> <img src="..\Images\blank tick.png" id="Comment_Image" height="50" width="60"> </label> <!--Dont forget about the label pics--> 
         <input size="25" autocomplete="off" title="Your Comment" type="text" id="userComment_Box" class="TextInput" name="userComment" placeholder="Any comments...?" autofocus="autofocus" maxlength="100"/> 
         <div id="flyout_hidden_comment" hidden></div> 
        </li><br> 

        <li> 
         <label for="websiteStage"> </label> 
         <select name="websiteStage" class="custom"> 
          <option value="Alpha">Alpha Version</option> 
          <option value="Beta">Beta Version</option> 
          <option value="Finished">Finished</option> 
         </select> 
        </li><br> 

        <li> 
         <label id="botTest_Label" for="botQuestion">I am not a cyborg!</label> <!--Dont forget about the label pics--> 
         <input type="checkbox" required="required" value="botQ" id="botTest_Box" title="For Bot testing!"> 
        </li><br> 
        <input id="SubmitButton" type="submit" disabled value="Submit"> 
       </ul> 
      </fieldset> 
     </form> 

任何形式的幫助表示讚賞。非常感謝。

Answer 1

請改變Ajax的調用到以下幾點：

$.ajax({ 
    url: url, 
    method: type, 
    data: data 
}).done(function(){ 
    $('#Suc_Sub').fadeIn(800); 
}).fail(function(){ 
    alert('fail!'); 
}); 

重要：

• 使用引號'#Suc_Sub'（由@adeneo評論）。我認爲實際上有一些這個ID的元素？

其他說明：

• 的async paremeter是true默認。

• type參數是method的舊別名。

• 使用委託函數有助於更好地理解發生了什麼。如果響應的狀態不是200 OK（例如404 Not Found，因爲未找到該腳本），您仍然會看到該事件被觸發。

Answer 2

看起來這是您的jQuery不正確：

$(#Suc_Sub).fadeIn(800); 

應該

$('#Suc_Sub').fadeIn(800); 

OR

$("#Suc_Sub").fadeIn(800); 

如果這不是問題。我將開始在console.log中輸出一些特定值，並在控制檯中查看是否需要在ajax調用中使用這些值。如果AJAX調用失敗，你會得到一個警告

var formvalues = $.ajax({ 
    url: url, 
    async: true, 
    type: type, 
    data: data, 
}); 

formvalues.done(function(data) { 
     console.log('success =' + data); 
});       

formvalues.fail(function(ts) {   
    alert(ts.responseText); 
    }); 

，然後你也將得到一個線索是什麼您的問題：

console.log('url =' + url); 
console.log('type = ' + type); 
console.log(data); 

$.ajax({ 
     url: url, 
     async: true, 
     type: type, 
     data: data, 
     success: function(response){ 
      $(#Suc_Sub).fadeIn(800); 
     } 
    }); 

如果一切「正常」我會重寫你的代碼，因爲這是關於。