onclick表单通过ajax发送没有页面刷新

I've been racking my brains for days looking at examples and trying out different things to try and get my form to submit with Ajax without a page refresh. And Its not even sending the data now.. I don't know what I'm doing wrong..Can someone run through my ajax and form please.

我一直在绞尽脑汁看了几天的例子并尝试了不同的东西来尝试让我的表单在没有页面刷新的情况下使用Ajax提交。它现在甚至没有发送数据..我不知道我做错了什么..可以通过我的ajax和形式请一个人。

Toid is the users id and newmsg is the text in which the user submits. The two values get sent to the insert.php page.

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

I would really appreate the help. I'm new to Ajax, and I look at some of it and don't have a clue. If I finally got it working, It may help me realize what I've done wrong. I am looking up tutorials and watching videos..but it can be very time consuming for something that would be simple to someone in the know on here. It maybe that I've got the wrong idea on the ajax and it makes no sense at all, sorry about that.

我真的会帮助你。我是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']);

7 个解决方案

#1

Try using firebug to identify bugs in your code. It's a really good companion for developing javascript. Nearly all of your bugs led to error messages in the firebug console.

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

You had several errors in your code, here is the corrected version:

您的代码中有几个错误,这是更正的版本:

$(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');}
        });
    });
});

And here the corrected html:

在这里纠正的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>

#2

change the form to this

将表单更改为此

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

you don't need the onsubmit attribute on the submit button, but on the form element instead

您不需要提交按钮上的onsubmit属性,而是需要在表单元素上

homestatus might be out of scope

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(){
           }
    });
}

#3

This isn't tested, but try this (I annotated some stuff using comments)

这没有经过测试,但试试这个(我用注释注释了一些东西)

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

#4

It's a lot easier to let .serialize() do the work of serializing the form data.

让.serialize()完成序列化表单数据的工作要容易得多。

The submit handler also needs event as a formal parameter, otherwise an error will be thrown (event will be undefined).

提交处理程序还需要将事件作为形式参数,否则将抛出错误(事件将是未定义的)。

With a few other changes, here is the whole thing:

通过一些其他更改,以下是整个事情:

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

#5

Actually onsubmit event has to be used with form so instead of

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

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

it could be

它可能是

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

and return the true or false from the function/handler, i.e.

并从函数/处理程序返回true或false,即

function homestatus()
{
    //...
    if(condition==true) return true;
    else return false;
}

Since you are using jQuery it's better to use as follows

由于您使用的是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
        }
    });

});

In this case your form should be as follows

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

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

and input fields should have a valid type and value attribute, Html form and Input.

和输入字段应具有有效的类型和值属性,Html表单和输入。

I think you should read more about jQuery.

我想你应该阅读更多关于jQuery的内容。

Reference : jQuery val and jQuery Ajax.

参考:jQuery val和jQuery Ajax。

#6

Unless you are omitting some of your code, the problem is this line:

除非你省略了一些代码,否则问题是这一行:

homestatus()

You never defined this function, so the submit throws an error.

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

#7

-3

You may want to take a look at jQuery (www.jquery.com) or another js framework. Such frameworks do most of the stuff you normally have to do by hand. There are also a bunch of nice helper functions for sending form data or modifying html elements

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

#1