5

几天来，我一直在绞尽脑汁地查看示例并尝试不同的方法来尝试让我的表单在不刷新页面的情况下使用 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>

插入.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']);
4

7 回答 7

7

尝试使用 firebug 来识别代码中的错误。它是开发 javascript 的一个非常好的伴侣。几乎所有的错误都会导致萤火虫控制台中的错误消息。

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

$(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>
于 2012-07-21T00:43:45.757 回答
2

实际上onsubmit event必须与formso 一起使用而不是

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

它可能是

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

并从函数/处理程序返回trueor 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>

和input字段应该有一个有效的type和value属性，Html 表单和 Input。

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

参考： jQuery val和jQuery Ajax。

于 2012-07-21T00:52:24.353 回答
1

将表格更改为此

<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(){
           }
    });
}
于 2012-07-21T00:31:17.417 回答
1

这未经测试，但试试这个（我用注释注释了一些东西）

<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>
于 2012-07-21T00:34:43.233 回答
1

.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>
于 2012-07-21T00:55:06.153 回答
0

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

homestatus()

您从未定义过此函数，因此提交会引发错误。

于 2012-07-21T00:35:50.690 回答
-3

您可能想看看 jQuery ( www.jquery.com ) 或其他 js 框架。这样的框架可以完成您通常必须手动完成的大部分工作。还有一堆不错的辅助函数用于发送表单数据或修改 html 元素

于 2012-07-21T00:37:56.913 回答