AJAX/jQuery表單提交吼吼箱

我正在做一個簡單的吼吼箱，用戶通過jQuery AJAX請求提交一個表單並傳遞給PHP，他們的評論顯示在牆上。AJAX/jQuery表單提交吼吼箱

PHP/SQLite部分工作正常，但我遇到了AJAX格式的問題。當我點擊提交（POST），它正確處理PHP在shout.php但導航窗口也躍過到shout.php時，應保持原有的網頁...

HTML表單：

<form id="newPost" action="shout.php" method="post"> 

Name: <input type="text" id="name" name="name" /> 

Message: <textarea name="message" id="message"></textarea> 

<input type="submit" id="submit" value="Submit" /> 

</form>

而且jQuery的：

$("#newPost").submit(function() { 


var name = $("#name").val(); 
var message = $("#message").val(); 
var data = 'name='+ name +'&message='+ message; 


$.ajax({ 
    type: "POST", 
    url: "shout.php", 
    data: data, 
    success: function(html) { 

     console.log(html); 

      refresh_shoutbox(); 
    } 
    }); 
return false; 
});

來源

2012-01-09 alyx

這裏是我的一個更好的可維護性建議：

$(document).ready(function() { 
    $("#newPost").submit(function(e) { 
    $.post({ 
     $('#newPost').attr('action') 
     , $('#newPost').serialize() 
     , function(html) { 
      console.log(html); 
      refresh_shoutbox(); 
     } 
    }); 
    e.preventDefault(); 
    }); 
});

來源

2012-01-09 07:32:25

它仍然有同樣的問題:( – alyx 2012-01-09 07:44:55

你使用'e.preventDefault（）;'？不要忘記回調函數中的'e'參數 – 2012-01-09 07:46:48

是的，嘗試過了，你的代碼有道理，但我認爲jquery和表單之間的通信存在問題。 .. – alyx 2012-01-09 07:52:37

嘗試的形式沒有「動作」 - 因爲目前你在本質上是通過AJAX提交，並通過它的動作屬性通常在提交表格：

<form id="newPost" action="" method="post">

來源

2012-01-09 07:27:42 Nethy

我已經試過了，但它不會發布到PHP文件由於某些原因瓦特/動作那裏...它不」 t似乎註冊jQuery的所有 – alyx 2012-01-09 07:30:24

你的refresh_shoutbox（）做什麼？ – Nethy 2012-01-09 07:48:53

變化

<input type="submit" id="submit" value="Submit" />

到

<input type="button" id="submit" value="Submit" />

，然後改變

$("#newPost").submit(function()

到

$("#newPost").click(function()

輸入提交類型實際上會通過一個新的http請求提交表單，這就是爲什麼你的頁面將在「shout.php」之後。

來源

2012-01-09 07:30:19 gdub

$("#newPost").submit(function(e) { 

    e.preventDefault(); //just add this 

    // your rest code 
    var name = $("#name").val(); 
    var message = $("#message").val(); 
    var data = 'name='+ name +'&message='+ message; 


    $.ajax({ 
     type: "POST", 
     url: "shout.php", 
     data: data, 
     success: function(html) { 

      console.log(html); 

       refresh_shoutbox(); 
     } 
     }); 
    return false; 


    });

這將防止默認提交事件，因此導航窗口保持在同一頁面上。

來源

2012-01-09 07:30:26 srbhbarot

我讀了類似的東西，但它仍然做同樣的事情...我認爲可能有一個問題與表格和jQuery本身之間的溝通 – alyx 2012-01-09 07:45:57

AJAX/jQuery表單提交吼吼箱

回答

相關問題