onclick表單通過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']);

Answer 1

嘗試使用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>

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

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()完成序列化表單數據的工作要容易.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>

Answer 6

除非你省略了一些代碼，否則問題就出在這一行：

homestatus()

您從未定義此函數，因此提交會引發錯誤。

Answer 7

您可能想看看jQuery（ www.jquery.com ）或其他js框架。 這樣的框架可以完成您通常需要手工完成的大部分工作。 還有一堆很好的輔助函數用於發送表單數據或修改html元素