的onclick形式通过AJAX无刷新页面发送(onclick form send via ajax

2019-07-30 13:09发布

站内文章 / 前端开发

10 0

叼着烟拽天下

女 | 书童

私信

我一直在绞尽脑汁几天看例子，尝试不同的东西，试图让我的形式使用Ajax提交不需要刷新页面。与连现在发送数据。我不知道我在做什么wrong..Can有人贯穿我的Ajax和表格请。

风湿是用户ID和newmsg是在用户提交的文本。这两个值被发送到insert.php页面。

我真的appreate帮助。我是新来的Ajax，和我看一些，并没有一个线索。如果我终于得到了它的工作，它可以帮助我意识到我做了什么错。我找了教程和看videos..but它可以是非常耗时的事情，这将是简单的人在知道就在这里。这也许是我已经得到了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']);

Answer 1:

尝试使用萤火识别代码中的错误。这是发展的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>

Answer 2:

其实onsubmit event必须与使用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>

和input字段应具有有效的type和value属性， HTML表单和输入 。

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

参考： jQuery的VAL和jQuery的阿贾克斯 。

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

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>

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>