使用AJAX表單提交不起作用

Question

PHP/Ajax newbie here ...我試圖通過Ajax將textarea的內容保存到MySQL中。儘管數據被正確保存，但Ajax並不能正常工作。基本上，保存數據後頁面「重新加載/刷新」，不像Ajax。你能告訴我我做錯了什麼嗎？

的index.html：

<form action="save.php" method="post" id="source-form"> 
<span><input type="submit" value="Save" /></span> 
<div> 
<textarea id="editor" name="editor" > 

</textarea> 
</div> 
</form> 

的javascript：

$(document).ready(function() { 

    $("#source-form").submit(function(){ 
    $.ajax({ 
     url:"save.php", 
     type:"post", 
     data:$(this).serialize(), 
     success: alert('saved'); 
    }); 
}); 

save.php

<?php 

// connect to the database 
include('connect-db.php'); 

// get form data, making sure it is valid 
$submit_date = date('Y-m-d H:i:s'); 
$content = mysql_real_escape_string(htmlspecialchars($_POST['editor'])); 

//build query 
mysql_query("INSERT source SET submit_date='$submit_date',content='$content'") 
or die(mysql_error()); 

header('Location: index.html'); 

?> 

任何幫助表示讚賞。謝謝。

編輯： 對於運行到同一問題或類似的東西......人們在這裏是從一個很好的解決方案： http://jquery.malsup.com/form/#getting-started

Answer 1

添加return false;到論壇進行提交，該表單提交被取消：

$("#source-form").submit(function(){ 
    $.ajax({ 
     url:"save.php", 
     type:"post", 
     data:$(this).serialize(), 
     success: alert('saved'); 
    }); 

    return false; 
}); 

Answer 2

您必須停止提交按鈕（表單發佈）的默認行爲。否則表單將再次提交，您將看到再次加載頁面。您可以使用preventDefault功能

$("#source-form").submit(function(e){ 
    e.preventDefault(); 
    $.ajax({ 
     url:"save.php", 
     type:"post", 
     data:$(this).serialize(), 
     success: alert('saved'); 
    }); 
}); 

Answer 3

改變你的<form action="save.php" method="post" id="source-form">

到<form method="post" id="source-form">

刪除您已經宣告您的網址在阿賈克斯行動

刪除header('Location: index.html');，因爲你不應該因爲你有重定向使用ajax。請記住，如果您使用的是ajax，則不需要刷新頁面，只需讓它收到確認結果已成功的確認

Answer 4

如果您只使用表單進行ajax提交，我會建議從完全使用HTML並使用點擊事件。我已經剝離下來的東西在HTML最低：

HTML

<input id="save-text" type="submit" value="Save" /> 
<textarea id="editor" name="editor" ></textarea> 

的JavaScript

$(document).ready(function() { 

    $("#save-text").click(function(){ 
    $.ajax({ 
     url:"save.php", 
     type:"post", 
     data: $("#editor").serialize(), 
     success: alert('saved'); 
    }); 
});