Question

我不知道有关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>会发出警报，并且当我手动重新加载msg显示的页面时

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

Answer 1

也许我已经理解了您的问题：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);
        });
    });
});

Answer 2

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

Answer 3

这里有很多可能的问题-

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

此外，请考虑使用jQuery在submit()元素上提供的<form>方法的更具声明性的方法。另外，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
    });
})

php ajax表单动态提交

3 个答案: