通过点击，在不刷新页面的情况下使用Ajax发送表单。

Question

我已经努力研究了很多示例，并尝试了不同的方法，以使我的表单在无需刷新页面的情况下使用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>

INSERT.PHP

$user1_id=$_SESSION['id'];
if(isset($_POST['toid'])){

if($_POST['toid']==""){$_POST['toid']=$_SESSION['id'];}

if(isset($_POST['newmsg'])&isset($_POST['toid'])){
if($_POST['toid']==$_SESSION['id']){
rawfeeds_user_core::create_streamitem("1",$_SESSION['id'],$_POST['newmsg'],"1",$_POST['toid']);
}else{
rawfeeds_user_core::create_streamitem("3",$_SESSION['id'],$_POST['newmsg'],"1",$_POST['toid']);

- dave

---

你的 homestatus() 函数在什么地方？ - The Alpha

Answer 1

尝试使用Firebug来识别代码中的错误。它是JavaScript开发的非常好的伙伴。几乎所有的错误都可以在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>

- stefreak

---

你的代码给了我成功的信息，但是用户反馈没有更新或发送到我的数据库。我的原始表单没有使用ajax提交到insert.php，但是通过操作按钮可以正常提交。所以问题肯定出在ajax上。 - dave

那么ajax调用肯定起作用了，你的insert.php被调用。也许你在服务器端还有另一个错误。 - stefreak

实际上，它正在工作，但是除非我刷新页面，否则它不会添加新状态。 - dave

我不知道，试着调试一下。Firebug也可以帮助你，在Firebug中你可以看到后台发生的ajax请求和服务器的响应。尝试安装Firebug，然后使用print_r来调试你的php代码。 - stefreak

它正在工作，只是页面没有添加新评论。我必须刷新才能看到它。如果不更新，Ajax就毫无意义。我该如何纠正这个问题？ - dave

Answer 2

实际上，onsubmit 事件必须与form 表单一起使用，因此应该这样写：

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

它可能是

<form id="myform"  method="POST"  class="form_statusinput" onsubmit="homestatus();">

从函数/处理程序中返回true或false。

function homestatus()
{
    //...
    if(condition==true) return true;
    else 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>

在HTML表单中，input字段应该有有效的type和value属性，详情请参考Html form and Input。

我认为您应该多了解一下jQuery。

参考资料：jQuery val和jQuery Ajax。

- The Alpha

Answer 3

将表单更改为以下形式。

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

您不需要在提交按钮上使用onsubmit属性，而是应该在表单元素上使用。

homestatus可能超出了范围。

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

- Ibu

---

还是一样的情况...刷新后并没有将数据提交到数据库和用户反馈中。 - dave

现在它根本没有提交。当我点击按钮时，什么也不会发生。我需要在头部添加任何jquery链接吗？ - dave

你有检查控制台吗？你可能会收到一个错误，而且你的Ajax在完成后没有做太多事情。 - Ibu

我得到了这些错误：toid=undefined&newmsg=undefined。它还在字段列表中显示为未定义。 - dave

Answer 4

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

<script type="text/javascript">

$(document).ready(function(){    
    $("form#myform").submit(function(event) {
        // not sure what this does, so let's take it out of the equation for now, it may be causing errors
        //homestatus()      
        // needed to declare event as a param to the callback function
        event.preventDefault(); 
        // I think you want the value of these fields
        var toid = $("#toid").val(); 
        var content = $("#newmsg").val();

        $.ajax({
            type: "POST",
            url: "insert.php",
            data: "toid="+toid +"&newmsg="+ content,
            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" / >
</div>
</form>

- JeremyWeir

---

谢谢你的时间，Jeremy。就像我说的一样，我没有什么知识...但是我正在努力学习...就像其他任何事情一样，我们都必须从某个地方开始。我还记得曾经我对PHP毫无头绪，但现在我正在逐渐掌握它。 - dave

它什么也不做，我会把我的insert.php发布到问题中。 - dave

不，那不是问题所在。再试一次，我没有注意到您的提交按钮上有一个onsubmit，将其删除。 - JeremyWeir

仍然没有成功。我想我可能需要花更多时间来研究一下。一定是我做错了什么。 - dave

Answer 5

让.serialize()来完成表单数据的序列化工作会更容易。

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

经过一些其他更改，这就是整个过程：

<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>

- Beetroot-Beetroot

Answer 6

除非您省略了一些代码，否则问题就在这行：

homestatus()

你没有定义这个函数，所以提交会抛出一个错误。

- twiz

---

例如，我需要这样的函数homestatus(content)： $.post("insert.php", { newmsg: content } ); - dave

不需要，你已经有了ajax请求的代码。你只需要删除所有对homestatus()的引用即可。 - twiz

Answer 7

你可能想要看一下jQuery（www.jquery.com）或其他JavaScript框架。 这些框架可以自动完成大部分通常需要手动完成的工作。 此外，它们还提供了许多有用的辅助函数，例如发送表单数据或修改HTML元素。

- Sascha Ludwig