php - 为什么 AJAX 不向我的 PHP 页面发送数据？

Question

我正在尝试制作一个消息应用程序，当我填写输入并单击发送按钮时，成功功能可以工作，但数据不会发送到 insertMessage.php 页面。

  $(document).ready(function(){
  $("#button_send").on("click", function(){
    $.ajax({
        url:"insertMessage.php",
        method:"POST",
        data:{
          fromUser: $("#fromUser").innerHTML,
          toUser: $("#toUser").innerHTML,
          message: $("#message_text").val()
        },
        dataType:"text",
        success:function(data){
          $("#message_text").val("");
        }
    });
  });
});

insertMessage.php页面:

<?php
session_start();
include 'includes/config.php';

$fromUser = $_POST['fromUser'];
$toUser = $_POST['toUser'];
$message = $_POST['message'];

$message = htmlspecialchars($messgae);

$date_p1 = date("d/m/Y");
$date_p2 = date("h:i:sa");
$date = $date_p1." at ".$date_p2;

$insert_message = "INSERT INTO users_messages (from_user, to_user, message, date_time) VALUES (?,?,?,?)";
$check_insert_message = $db->prepare($insert_message);
$check_insert_message->execute([$fromUser, $toUser, $message, $date]);

?>

Answer 1

考虑以下代码片段。

$(function() {
  $("#buttonSend").click(function() {
    $.ajax({
      url: "insertMessage.php",
      method: "POST",
      data: {
        fromUser: $("#fromUser").html(),
        toUser: $("#toUser").html(),
        message: $("#messageText").val()
      },
      success: function(data) {
        $("#messageText").val("");
      }
    });
  });
});

#sendMessage label {
  display: inline-block;
  width: 80px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendMessage">
  <div><label>From</label><span id="fromUser">Agent Smith</span></div>
  <div><label>To</label><span id="toUser">Tomas Anderson</span></div>
  <div><label>Message</label><input type="text" id="messageText" /></div>
  <button id="buttonSend">Send</button>
</div>

这应该适用于您的 PHP。

我注意到您在 ID 命名约定中从驼峰改为下划线，使用其中一种是更好的做法。我把它们全部换成 Camel 驼峰。

您的 click 事件不需要使用 .on() ，除非元素稍后才存在于 DOM 中。所以我将其更改为 .click() 回调。

尚不清楚您为何尝试使用 innerHTML 属性。这不是 jQuery 对象的属性。因此我改用 .html() 来收集所选对象的 HTML 内容。

查看更多:https://api.jquery.com/html/

This method uses the browser's innerHTML property.