使用AJAX提交表单不起作用 - Form submit using AJAX is not working

Form submit using AJAX is not working

PHP/Ajax新手在这里。。。我正试图通过Ajax将文本区域的内容保存到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-启动

更改<form action="save.php" method="post" id="source-form">

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

删除已在ajax 中声明url的操作

删除header('Location: index.html');，因为您不应该重定向，因为您正在使用ajax。请记住，如果您使用ajax，则不需要刷新页面，只需让它接收到结果成功的确认即可

在论坛提交中添加return false;，以便取消表单提交：

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

您必须停止提交按钮的默认行为（表单发布）。否则表单将再次提交，您将看到页面再次加载。您使用preventDefault功能

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

如果您只使用该表单进行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');
    });
});