Javascript php ajax表单动态提交

我不知道websocketforchat，我想使用phpajax进行表单提交聊天 我想在不重新加载的情况下动态地sumbit表单，但它得到了重新加载（我不想要）。 我创建了一个聊天室，php将信息发送到xml，并显示所有xml信息，当用户提交下面的表单时

<form action="action.php" method="post" id="formpost">
  <input type="text" id="input" value="php echo">
  <input type="submit" value="send">
</form>

$("#formpost").on('submit', function(event) {
    event.preventDefault();

    var form = $(this);
    var url = form.attr('action');

    $.ajax({
        type: "POST",
        url: "club.php",
        data: form.serialize() // serializes the form's elements.
    }).done(function(data) {
        var msg = $(data).find('#msg').html();

        alert(msg);
    });
});

这里有许多可能的问题-

首先，确保在运行jQuery脚本之前已加载DOM（HTML）。实现这一点的一种方法是将当前jQuery逻辑放在
$（function（）{..}）
中，如下所示。这保证了在运行表单/ajax设置逻辑之前，DOM将被加载并可供访问

也可以考虑使用jQuery提供的<代码> < /Cord>元素，使用更多的声明性方法。此外，jQuery允许您从提交处理程序函数返回
false
，以防止页面重新加载：

// You may need to wrap your form logic in a jquery context, in case the 
// script is run before your page DOM has loaded
$(function() {

    // also consider using the more declarative submit() method that is available 
    // on forms
    $("#formpost").submit(function() { 

        $.ajax({
               type: "POST",
               url: "club.php",
               data: $(this).serialize(),
               success: function(data)
               {
                   alert(data); // show response from the php script.
               }
             });

         return false; // Prevent the form submit from reloading the page
    });
})

这里有许多可能的问题-

首先，确保在运行jQuery脚本之前已加载DOM（HTML）。实现这一点的一种方法是将当前jQuery逻辑放在
$（function（）{..}）
中，如下所示。这保证了在运行表单/ajax设置逻辑之前，DOM将被加载并可供访问

也可以考虑使用jQuery提供的<代码> < /Cord>元素，使用更多的声明性方法。此外，jQuery允许您从提交处理程序函数返回
false
，以防止页面重新加载：

// You may need to wrap your form logic in a jquery context, in case the 
// script is run before your page DOM has loaded
$(function() {

    // also consider using the more declarative submit() method that is available 
    // on forms
    $("#formpost").submit(function() { 

        $.ajax({
               type: "POST",
               url: "club.php",
               data: $(this).serialize(),
               success: function(data)
               {
                   alert(data); // show response from the php script.
               }
             });

         return false; // Prevent the form submit from reloading the page
    });
})

也许我已经理解了你的问题：D

Html



该区域将显示消息


Javascript



我认为Ajax的响应将返回一个HTML页面（您可以通过访问“/club.php”的方式查看它，您在屏幕上看到的内容将得到响应

编辑：

更新我的答案

在JS

$（函数（）{
$（“#formpost”）.submit（函数（事件）{
event.preventDefault（）；
变量形式=$（此）；
var url=form.attr（'action'）；
$.ajax({
类型：“POST”，
url:url，
data:form.serialize（）//序列化表单的元素。
}).完成（功能（数据）{
var msg=$（数据）.find（'#msg'）.text（）；
警报（msg）；
});
});
});  
也许我理解了你的问题：D

Html



该区域将显示消息


Javascript



我认为Ajax的响应将返回一个HTML页面（您可以通过访问“/club.php”的方式查看它，您在屏幕上看到的内容将得到响应

编辑：

更新我的答案

在JS

$（函数（）{
$（“#formpost”）.submit（函数（事件）{
event.preventDefault（）；
变量形式=$（此）；
var url=form.attr（'action'）；
$.ajax({
类型：“POST”，
url:url，
data:form.serialize（）//序列化表单的元素。
}).完成（功能（数据）{
var msg=$（数据）.find（'#msg'）.text（）；
警报（msg）；
});
});
});  
脚本位于何处？（在html之后或之前？）为什么不将其包装在
$（文档）中。就绪（
？@Jeff即使在文档之后也不工作。就绪脚本位于何处？（在html之后或之前？）为什么不将其包装在
$（文档）中。就绪（
？@Jeff即使在document.ready之后也不工作此操作仍然无法显示警报（数据）和页面重新加载后的帖子脚本位于最后一个HTML中此操作仍然无法显示警报（数据）在页面重新加载脚本位于HTMLEAH的最后一个页面后，我必须再次刷新页面。可能是php需要重新加载页面。我认为重新加载页面取决于客户端（前端）。服务器只是呈现数据（HTML或JSON，XML…）当使用ajax时，它不需要重新加载页面。那么为什么这不起作用呢？在你的代码之前，有一个警报出现在正文中，但现在没有了。只需重新加载页面，消息就会显示出来…我如何发送消息你有什么选择吗？啊，我必须再次刷新页面。可能是php需要重新加载页面吗e页面我想重新加载一个依赖于客户端（前端）的页面。服务器只需呈现数据（HTML或JSON、XML…）和响应客户端进行显示。因此，在使用ajax时，它不需要重新加载页面。那么，为什么这不起作用呢？在您的代码之前，一个警报随正文出现，但现在它没有出现。只需重新加载页面并显示消息…我如何发送消息您有任何选择吗


$("#formpost").on('submit', function(event) {
    event.preventDefault();

    var form = $(this);
    var url = form.attr('action');

    $.ajax({
        type: "POST",
        url: "club.php",
        data: form.serialize() // serializes the form's elements.
    }).done(function(data) {
        var msg = $(data).find('#msg').html();

        alert(msg);
    });
});

$(function() {
    $("#formpost").submit(function(event) {
        event.preventDefault();

        $.ajax({
            type: "POST",
            url: "club.php",
            data: $(this).serialize(),
        }).done(function(data) {
            var msg = $(data).find('#msg').text();

            alert(msg);
        });
    });
});