主页 / 问题 / 925547
Accepted
DrMcSheen
Asked:2020-12-26 09:23:29 +0000 UTC2020-12-26 09:23:29 +0000 UTC

从 php 更新 div 而无需重新加载页面

  • 772

我想做一个简单的聊天。它应该大致像这样工作：

<script type="text/javascript">
$(document).ready(function () { 
   $("#div_comments").load("chat.php"); 
});
function show_chat() {
   $("#div_comments").load("chat.php");
   }; 
</script>

<div id="div_comments">
<!-- тут выводятся сообщения -->
</div>
<form method='post' action="chat.php">
   <input id='username' name='username' type='text' placeholder='Ваше имя'>
   <input id='message' name='message' type='text' placeholder='Сообщение'>
   <button id='submit' name='submit' type='submit' onClick="show_chat(); return false;" />
<form>

chat.php（示意图）

$name= $_POST['name'];
$message = $_POST['message'];     //  получаем данные из формы
mysql = "INSERT name, message";   //  пишем их в базу
$comments = mysql ("SELECT * ");  //  читаем из базы всё что есть
echo '<p>'.$comments.'</p>';      //  выводим

我尝试了不同的变化，已经很困惑。无法让 php 工作。如果只是写

<p>message</p>

然后它被渲染。如果

<?php
echo 'message';
?>

那么什么都没有。并且提交按钮根本不起作用。请正确。

在您的评论后添加：

在空站点的根目录中创建了两个文件：

索引.html

<script type="text/javascript">
function show_chat(btn) {
   $("#div_comments").load("chat.php", $(btn).closest("form").serialize());
}
</script>
<h>ЧАТ</h>
  <div id="div_comments">
<!-- тут выводятся сообщения -->
</div>
<form>
   <input id='username' name='username' type='text' placeholder='Ваше имя'>
   <input id='message' name='message' type='text' placeholder='Сообщение'>
   <button id='submit' name='submit' type='button' onclick='show_chat(btn)'>Click<button>
</form>

聊天.php

<?php
$name = $_GET['username'];
$message = $_GET['message'];
echo '<p>'.$name.'</p>'; 
echo '<p>'.$message.'</p>'; 
?>

按下按钮，地址栏中的参数出现，输入字段被清除，仅此而已。

伊戈尔，关于使用数据库，谢谢，我什么都能做，我只是不想在这里把代码弄得乱七八糟，我是“按示意图”写的。是的，这还没有关系。

javascript

1 个回答

  1. Best Answer

    http://api.jquery.com/load/

    function show_chat(btn) {
  var data = $(btn).closest("form").serialize();
  console.log("show_chat", data);
  $("#div_comments").load("chat.php", data, function(response, status, xhr) {
    console.log("complete", response, status, xhr);
  });
}

<button id='submit' name='submit' type='button' onclick="show_chat(this)">Click</button>

$name = $_GET['username'];
$message = $_GET['message'];

    mysql = "INSERT name, message";   //  пишем их в базу

    您至少仍然阅读了如何“写入数据库”的内容。 

    $comments = mysql ("SELECT * ");  //  читаем из базы всё что есть

    ...以及如何阅读 - 也是。

    让我们弄清楚。你说：

    按下按钮，地址栏中的参数出现，输入字段被清除，仅此而已。

    您所描述的是表单提交和页面重新加载。虽然type='button'这不应该发生。页面上还有更多表格吗？

    我还错过了按钮结束标记中的斜线。

    • 1

相关问题