php - 使用 AJAX 提交表单不起作用

Question

PHP/Ajax 新手在这里...我正在尝试通过 Ajax 将 textarea 的内容保存到 MySQL 中。虽然数据被正确保存，但 Ajax 并不能正常工作。基本上，与 Ajax 不同，页面在数据保存后会“重新加载/刷新”。你能告诉我我做错了什么吗？

索引.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');
    });
});

保存.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

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

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

删除您已经在 ajax 中声明您的网址的操作

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

Answer 2

如果您只是将表单用于 ajax 提交，我建议您从 HTML 中完全删除表单并使用 click 事件。我已将 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');
    });
});

Answer 3

添加一个return false;到论坛提交，以便取消表单提交：

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

    return false;
});

Answer 4

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

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