Php onclick表单通过ajax发送无页面刷新

我已经绞尽脑汁看了好几天的例子，尝试了不同的东西，试图让我的表单在不刷新页面的情况下用Ajax提交。现在甚至都不发送数据。。我不知道我做错了什么……有人能检查一下我的ajax和表单吗

Toid是用户id，newmsg是用户提交的文本。这两个值被发送到insert.php页面

我非常感谢你的帮助。我对Ajax还不熟悉，我看了其中的一些，却一点也不知道。如果我最终让它工作起来，它可能会帮助我意识到我做错了什么。我正在查找教程和观看视频。但是，对于熟悉这里的人来说，做一些简单的事情可能非常耗时。也许我对ajax有错误的想法，这毫无意义，对此我深表歉意

<script type="text/javascript">

$(document).ready(function(){

    $("form#myform").submit(function() {
homestatus()      
event.preventDefault();
var toid = $("#toid").attr("toid");
var content = $("#newmsg").attr("content");

    $.ajax({
        type: "POST",
        url: "insert.php",
        data: "toid="+content+"&newmsg="+ newmsg,
        success: function(){
           }
    });
    });
return false;
});
</script>


<form id="myform"  method="POST"  class="form_statusinput">
<input type="hidden"  name="toid" id="toid" value="<?php echo $user1_id ?>">
<input class="input" name="newmsg" id="newmsg" placeholder="Say something" autocomplete="off">
<div id="button_block">
<input type="submit" id="button" value="Feed" onsubmit="homestatus(); return false" >
</div>
</form>

---

把表格改成这个

<form id="myform" ... onsubmit="homestatus(); return false">

---

这没有经过测试，但是试试这个（我用注释注释了一些东西）

$（文档）.ready（函数（）{
$（“表单#我的表单”）.submit（函数（事件）{
//不确定这是怎么回事，所以现在让我们把它从方程中去掉，它可能会导致错误
//宅基地（）
//需要将事件声明为回调函数的参数
event.preventDefault（）；
//我想你需要这些字段的值
var toid=$（“#toid”）.val（）；
var content=$（“#newmsg”）.val（）；
$.ajax({
类型：“POST”，
url:“insert.php”，
数据：“toid=“+toid+”&newmsg=“+content，
成功：函数（）{
}
});
返回false；
});
});
除非您省略了一些代码，否则问题是这一行：

homestatus()

您从未定义过此函数，因此submit会抛出一个错误。
您可能想看看jQuery（）或其他js框架。
这种框架完成了您通常必须手工完成的大部分工作。
还有一系列很好的帮助函数用于发送表单数据或修改html元素
尝试使用firebug来识别代码中的错误。它是开发javascript的一个很好的伙伴。几乎所有的bug都会导致firebug控制台中出现错误消息

您的代码中有几个错误，以下是更正的版本：

$(document).ready(function(){
    $("form#myform").submit(function(event) {
        event.preventDefault();
        var toid = $("#toid").val();
        var newmsg = $("#newmsg").val();

        $.ajax({
            type: "POST",
            url: "insert.php",
            data: "toid=" + content + "&newmsg=" + newmsg,
            success: function(){alert('success');}
        });
    });
});

下面是更正后的html：

<form id="myform"  method="POST"  class="form_statusinput">
<input type="hidden"  name="toid" id="toid" value="<?php echo $user1_id; ?>">
<input class="input" name="newmsg" id="newmsg" placeholder="Say something" autocomplete="off">
<div id="button_block">
<input type="submit" id="button" value="Feed">
</div>
</form>


实际上，
onsubmit事件
必须与
form
一起使用，而不是

<input type="submit" id="button" value="Feed" onsubmit="homestatus(); return false" >

因为您使用的是
jQuery
，所以最好按如下方式使用

$("form#myform").on('submit', function(event){
    event.preventDefault();
    var toid = $("#toid").val(); // get value
    var content = $("#newmsg").val(); // get value
    $.ajax({
        type: "POST",
        url: "insert.php",
        data: "toid=" + toid + "&newmsg=" + content,
        success: function(data){
            // do something with data
        }
    });

});

<form id="myform"  method="POST"  class="form_statusinput">
    ...
</form>

在这种情况下，您的表格应如下所示

$("form#myform").on('submit', function(event){
    event.preventDefault();
    var toid = $("#toid").val(); // get value
    var content = $("#newmsg").val(); // get value
    $.ajax({
        type: "POST",
        url: "insert.php",
        data: "toid=" + toid + "&newmsg=" + content,
        success: function(data){
            // do something with data
        }
    });

});

<form id="myform"  method="POST"  class="form_statusinput">
    ...
</form>


...

和
输入
字段应具有有效的
类型
和
值
属性

我认为您应该阅读更多关于
jQuery

参考：和。
让
.serialize（）
完成表单数据的序列化工作要容易得多

提交处理程序还需要
事件
作为正式参数，否则将抛出错误（事件将未定义）

除此之外，还有一些其他变化，以下是整个过程：

<script type="text/javascript">
$(document).ready(function(){
    $("form#myform").submit(function(event) {
        event.preventDefault();
        homestatus();
        var formData = $(this).serialize();
        $.ajax({
            type: "POST",
            url: "insert.php",
            data: formData,
            success: function(data) {
                //...
            }
        });
    });
});
</script>

<form id="myform" class="form_statusinput">
    <input type="hidden" name="toid" id="toid" value="<?php echo $user1_id ?>">
    <input class="input" name="newmsg" id="newmsg" placeholder="Say something" autocomplete="off">
    <div id="button_block">
        <input type="submit" id="button" value="Feed" >
    </div>
</form>


$（文档）.ready（函数（）{
$（“表单#我的表单”）.submit（函数（事件）{
event.preventDefault（）；
家园（）；
var formData=$（this.serialize（）；
$.ajax({
类型：“POST”，
url:“insert.php”，
数据：formData，
成功：功能（数据）{
//...
}
});
});
});
你的
homestatus（）
函数是什么/在哪里？它仍然是一样的..它刷新并没有将数据提交到数据库和用户提要中。它现在根本没有提交。当点击我的按钮时，它什么也不做。我需要在我的标题中添加任何jquery链接吗？你检查控制台了吗，你可能会得到一个错误，而且你的ajax在完成后没有做很多事情。我得到这些错误toid=undefined&newmsg=undefined。它在字段列表中也说undefined谢谢你的时间Jeremy。就像我说的。我不知道，但我正在努力，就像其他任何事情一样。我们都必须从某个地方开始。我记得有一次我对php毫无希望。但我已经做到了。它没有任何作用，我会把我的insert.php发布到问题中。不，这不是问题所在。再试一次，我没有注意到你的提交按钮上有一个onsubmit，请删除它。仍然没有运气。我想我可能会花点时间进一步调查。一定是我做错了什么。例如，我需要类似函数homestatus（content）{$.post（“insert.php”，{newmsg:content}）；不，您已经有ajax请求的代码。您只需要删除对homestatus（）的所有引用您的代码向我发送了成功消息，但用户提要没有更新indo或将indo发送到我的数据库。我的原始表单（没有ajax）提交到insert.php，操作按钮很好。因此它一定是ajax。然后ajax调用肯定起作用，并且您的insert.php被调用。也许您在服务器端有另一个bug。实际上/。它是正在工作..但除非我刷新页面，否则它不会添加新状态。我不知道，请尝试调试它。Firebug也在帮助您，使用Firebug，您可以看到发生在后台的ajax请求和服务器的答案。尝试安装Firebug，然后使用
print\r
调试您的php。正在工作..只是页面没有添加新的评论。我必须刷新它才能看到它。如果它不更新，Ajax是没有意义的。我如何纠正这个问题。
$("form#myform").on('submit', function(event){
    event.preventDefault();
    var toid = $("#toid").val(); // get value
    var content = $("#newmsg").val(); // get value
    $.ajax({
        type: "POST",
        url: "insert.php",
        data: "toid=" + toid + "&newmsg=" + content,
        success: function(data){
            // do something with data
        }
    });

});

<form id="myform"  method="POST"  class="form_statusinput">
    ...
</form>

<script type="text/javascript">
$(document).ready(function(){
    $("form#myform").submit(function(event) {
        event.preventDefault();
        homestatus();
        var formData = $(this).serialize();
        $.ajax({
            type: "POST",
            url: "insert.php",
            data: formData,
            success: function(data) {
                //...
            }
        });
    });
});
</script>

<form id="myform" class="form_statusinput">
    <input type="hidden" name="toid" id="toid" value="<?php echo $user1_id ?>">
    <input class="input" name="newmsg" id="newmsg" placeholder="Say something" autocomplete="off">
    <div id="button_block">
        <input type="submit" id="button" value="Feed" >
    </div>
</form>