Question

PHP / Ajax新手在这里......我试图通过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

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

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

删除您在ajax

中声明了您的网址的操作

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

Answer 2

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

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

    return false;
});

Answer 3

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

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

Answer 4

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

使用AJAX提交表单无效

4 个答案: