如何在空 div 内提交作为 XMLHttpRequest 结果的表单，而不刷新页面？

问题描述 投票：0回答：1

我正在尝试制作一个类似聊天室的网站。但我遇到了一个与 AJAX 相关的大问题。

我在主页中有一个空的 div，在其中我使用 

XMLHttpRequest
加载在数据库中找到的所有消息。到目前为止，一切都很好，我设法让它运作良好。但后来我想将事情提升到一个新的水平，并创建一个管理员帐户，该帐户能够删除任何包含不当内容的帖子。我在表中添加了一个额外的行，其中包含一个带有隐藏文本输入的表单，其中包含所选行的 ID。我有一个可以单击的按钮，我会调用一个文件，该文件的作用是从数据库中删除相应的条目，

我尝试在表单内使用常规 POST 方法提交表单，而不使用 AJAX，只是为了检查它是否在数据库上运行良好。而且它工作得很好，所以我的 mysql 程序文件没有问题。但它刷新了网页，我想避免这种情况，所以 AJAX 是我唯一的希望，但当我尝试使用 AJAX 时，它就行不通。我相信这主要是因为我用来删除帖子的表单位于另一个文件中，而不是我网站的主体中。

我尝试了一些不同的方法，但似乎没有任何效果。 我注意到关于我面临的问题没有太多资源，我明白了，我想要的有点不常见，因为 AJAX 最常用于提交由用户填写的文本/文本区域输入一个文件。我自己已经这样做了，在主页中我有一个文本区域表单，我可以使用 AJAX 提交它而无需刷新页面，所以我有点了解它是如何工作的。但对于我现在面临的问题，网络上没有任何资源被证明是有用的。该线程最接近我正在寻找的内容：Submiting a form that is inside a div with AJAX但它不提供任何解决方案。

所以我将在这里发布我的代码： 网站的主体在文件

Chatroom.php
中，这里我有XHR请求：

<!DOCTYPE html>
<html>
<body>

function table2(){
    const xhttp = new XMLHttpRequest();
    xhttp.onload = function(){
      document.getElementById("scrollchat").innerHTML = this.responseText;                        
    }
    xhttp.open("GET", "load_chat.php");
    xhttp.send();
  }

  setInterval(function(){
    table2();
  }, 500);

<div id="scrollchat">

</div>

这没什么奇特的，只是运行得很好的经典代码，我填充的 div 是： 

<div id="scrollchat"> \</div>

然后在 

load_chat.php
中，我从数据库中读取内容，我有一个表单，其中包含每条消息的 ID，如下所示：

<?php
session_start();
//echo '12345';
$con = mysqli_connect('localhost', 'root', '');

mysqli_select_db($con, 'chatroom');
//echo $_SESSION['username1'];
$onlinevalue = 1;

$count = "SELECT * FROM mainchat";

$rows = mysqli_query($con, $count);
$number = mysqli_num_rows($rows);
?>

<table>
<?php 
foreach($rows as $row) : ?>

<td>
$currentuser = $row["Username"];
echo $currentuser;
</td>
<td> 
 <form action="" id="deletepostform">
 <input type="hidden" name="MessagedeleteID" value="<?php echo $row["ID"]; ?>" />
 <button type="submit"> <b><span style="color:red">X</span></b></button> 
 </form>
 </td>
<?php endforeach; ?>
</table>

允许我提交该函数返回的表单的最佳 AJAX 函数是什么？

回到我的主页

Chatroom.php
我尝试了很多类型的AJAX调用。我上次尝试的是以下代码：

document.getElementById('deletepostform').addEventListener('submit', function(event) { event.preventDefault(); // Prevent the default form submission
    let xhr = new XMLHttpRequest();
    let url = 'deletepost.php'; // Replace with your server endpoint
    xhr.open('POST', url, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    
    // Collect form data
    let formData = new FormData(this);
    let params = new URLSearchParams(formData).toString();
    
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.responseText); // Handle the response
        }
    };
    
    xhr.send(params); // Send the request with the form data
    });

使用此代码我收到错误

类型错误：无法读取 null 的属性（读取“addEventListener”）

在控制台中。我认为这种情况可能会发生，因为它在主页中找不到该表单。

我尝试的任何内容都无法提交，因为它在页面本身中找不到实际的表单，因为它是从其他地方加载的

javascript php ajax database forms
1个回答
0
投票

您尝试处理表单提交时遇到几个问题：

  1. 正如您正确计算的那样，JavaScript 无法找到您的表单以将提交事件绑定到它。这是因为当 JS 代码运行时，您的表单还不存在 - 它尚未从 AJAX 请求加载。

  2. 即使它可以检测到它，您也可以使用循环来生成多个表单（每一行一个）。因此，使用 

    id
    来标识表单是没有意义的，因为 ID 必须准确标识一个元素（就像任何行业中的 ID 必须唯一标识某物一样）。因此，您的 JS 脚本只会找到具有该 ID 的表单的第一个实例。

解决方法如下：

  1. 使用事件委托创建“提交”处理程序。从技术上讲，这将事件处理程序附加到 DOM 层次结构的更高层 - 您甚至可以只使用 HTML 文档的根 - 它将始终出现在页面中。然后在处理程序中编写代码，仅当单击的真实项目（在本例中是您的表单之一）与您用于识别它的选择器匹配时才处理该事件。

  2. 使用类而不是 ID 来标识表单。类可以合法地附加到任意数量的元素，并且在代码中使用类选择器与 ID 选择器一样容易。

这是一个演示：

document.addEventListener('submit', function(event) {
  if (event.target.matches('.deletepostform')) {
    event.preventDefault(); //prevent normal postback
    alert("Form submit event detected");
    //your ajax code goes here
  }
});
<table>
  <tr>
    <td>
      <form action="" class="deletepostform">
        <input type="hidden" name="MessagedeleteID" value="1" />
        <button type="submit"> <b><span style="color:red">X</span></b></button>
      </form>
    </td>
  </tr>
  <tr>
    <td>
      <form action="" class="deletepostform">
        <input type="hidden" name="MessagedeleteID" value="2" />
        <button type="submit"> <b><span style="color:red">X</span></b></button>
      </form>
    </td>
  </tr>
  <tr>
    <td>
      <form action="" class="deletepostform">
        <input type="hidden" name="MessagedeleteID" value="3" />
        <button type="submit"> <b><span style="color:red">X</span></b></button>
      </form>
    </td>
  </tr>
  <tr>
    <td>
      <form action="" class="deletepostform">
        <input type="hidden" name="MessagedeleteID" value="4" />
        <button type="submit"> <b><span style="color:red">X</span></b></button>
      </form>
    </td>
  </tr>
</table>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.