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表单提交吼吼箱

回答

相关问题