php ajax表单动态提交答案

【问题标题】：php ajax form submit dynamicallyphp ajax表单动态提交
【发布时间】：2019-01-09 17:06:42
【问题描述】：

我不了解用于聊天的 websocket 我想使用 php ajax 进行表单提交以进行聊天我想在不重新加载的情况下动态汇总表单，但它会重新加载（我不想要）。 我创建了一个聊天，其中 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>

它会重新加载以显示这个 php

<div class="msg"><?php  print $message->getName() ." : " . $chat->message . ""; ?></div>

附加信息：当我删除聊天 $chat->message . 时没有消息显示，因为 php 循环仅名称显示在上面的 <div class="msg"> 中

我已经尝试通过 javascript 动态提交表单，但是当我单击按钮时，我自己的 html <html><body>..</html> 会出现警报，并且当我手动重新加载页面时会显示消息

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("#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.
           success: function(data)
           {
               alert(data); // show response from the php script.
           }
         });
});
</script>

【问题讨论】：

脚本在哪里？（在 html 之后还是之前？）为什么不将其包装在 $( document ).ready( 中？
@Jeff 即使在 document.ready 之后也无法工作

标签： javascript php jquery html ajax

【解决方案1】：

这里有很多可能的问题 -

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

另外，通过使用 jQuery 为 <form> 元素提供的 submit() 方法来考虑更多的声明性方法。此外，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
    });
})

【讨论】：

这不起作用仍然显示警报（数据）并在页面重新加载脚本后发布位于 html 的最后一个

【解决方案2】：

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

HTML

<form action="action.php" method="post" id="formpost"> <input type="text" id="input" value="php echo"> <input type="submit" value="send"> </form>
该区域将显示消息

<div class="msg" id="msg"><?php print $message->getName() ." : " . $chat->message . ""; ?></div>

Javascript

$("#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);
    });
});

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

编辑：

更新我的答案

在JS

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

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

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

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

【讨论】：

是的，我必须再次刷新页面。
可能是php需要重新加载页面
我认为重新加载依赖于客户端（前端）的页面。服务器只是呈现数据（HTML 或 JSON，XML ...）并响应客户端进行显示。所以在使用ajax时，不需要重新加载页面。
那么为什么这不起作用？在您的代码之前，一个警报带有正文，但现在它没有出现......只需重新加载页面并显示味精......
我怎么能告诉你有什么选择

【解决方案3】：

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

【讨论】：