jQuery $.ajax 没有触发任何事情发生
Posted
技术标签:
【中文标题】jQuery $.ajax 没有触发任何事情发生【英文标题】：jQuery $.ajax is not triggering anything to happen 【发布时间】：2021-05-13 18:03:09 【问题描述】：我正在尝试创建一个文本框，每当用户输入消息并单击发送时，应该激活 ajax 并且应该触发 insertMessage.php 上的内容。但是，每当我单击发送时，它都不起作用。这是我的 chatbox.php 文件
<?php
session_start();
$conn = new mysqli("localhost", "root", "", "events");
if ($conn->connect_error)
die("Connection failed: " . $conn->connect_error);
$user=$_SESSION['userid'];
$sql="SELECT * FROM `users` WHERE `Email`='$user'";
$res= mysqli_query($conn,$sql);
$user=mysqli_fetch_assoc($res);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<title></title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<p>Hi <?php echo $user["FullName"]; ?></p>
<input type="text" id="fromUser" value=<?php echo $user["Email"]; ?> hidden />
<p>Send Message To:</p>
<ul>
<?php
$msgs=mysqli_query($conn,"SELECT * FROM users");
while($msg=mysqli_fetch_assoc($msgs))
echo '<li><a href="?toUser='.$msg['Email'].'">'.$msg["FullName"].'</a></li>';
?>
</ul>
<a href="index.php"><--Back</a>
</div>
<div class="col-md-4">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><?php
if(isset($_GET["toUser"]))
$user=$_GET["toUser"];
$email=mysqli_query($conn,"SELECT * FROM users WHERE Email='$user'");
$emails=mysqli_fetch_assoc($email);
echo '<input type="text" value='.$user.' id="toUser" hidden/>';
echo $emails["Email"];
else
$email=mysqli_query($conn,"SELECT * FROM users");
$emails=mysqli_fetch_assoc($email);
$_SESSION['toUser']=$emails['Email'];
echo '<input type="text" value='.$_SESSION['toUser'].' id="toUser" hidden/>';
echo $emails["Email"];
?></h5>
</div>
<div class="model-body" id="msgBody" style="height:400px; overflow-y:scroll; overflow-x:hidden;">
<?php
if(isset($_GET["toUser"]))
$chats=mysqli_query($conn,"SELECT * FROM `message` WHERE (`Receiver`='".$_SESSION["userid"]."' AND `Sender`='".$_GET["toUser"]."') OR (`Receiver`='".$_GET["toUser"]."' AND `Sender`='".$_SESSION["userid"]."')");
else
$chats=mysqli_query($conn,"SELECT * FROM `message` WHERE (`Sender`='".$_SESSION["userid"]."' AND `Receiver`='".$_GET["toUser"]."') OR (`Sender`='".$_GET["toUser"]."' AND `Receiver`='".$_SESSION["userid"]."')");
while($chat=mysqli_fetch_assoc($chats))
if($chat["Sender"]==$_SESSION["userid"])
echo "<div style='text-align:right;'>
<p style='background-color:lightblue; word-wrap:break-word; display:inline-block; padding:5px; border-radius:10px; max-width:70%;'>
".$chat["Message"]."</p>
</div>";
else
echo "<div style='text-align:left;'>
<p style='background-color:yellow; word-wrap:break-word; display:inline-block; padding:5px; border-radius:10px; max-width:70%;'>
".$chat["Message"]."</p>
</div>";
?>
</div>
<div class="model-footer">
<textarea id="message" class="form-control" style="height:43px;max-width:80%;float:left;">
</textarea>
<button id="send" class="btn btn-primary" style="height:70%;float:left;">Send</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
$('#send').on('click', function(e)
e.preventDefault();
$.ajax(
url:"insertMessage.php",
method:"POST",
data:
fromUser: $("#fromUser").val();
toUser:$("#toUser").val();
message:$("#message").val();
,
dataType:"text",
success:function(data)
$("#message").val("");
);
e.preventDefault();
);
);
</script>
</html>
这是我的 insertMessage.php 文件
<?php
session_start();
$conn = new mysqli("localhost", "root", "", "events");
if ($conn->connect_error)
die("Connection failed: " . $conn->connect_error);
$fromUser=$_POST["fromUser"];
$toUser=$_POST["toUser"];
$message=$_POST["message"];
$output="";
$sql="INSERT INTO `message`(`Sender`, `Receiver`, `Message`) VALUES ('$fromUser','$toUser','$message')";
if($connect->query($sql))
$output.="";
else
$output.="Error. Please Try Again.";
echo $output;
?>
我不知道该怎么做，我试图找到这个问题，但我找不到。我是ajax新手，所以我不知道..
【问题讨论】：
你好，检查你的浏览器控制台有没有错误？ 【参考方案1】：我不确定您的确切问题是什么，但您的 jQuery 代码中有一个问题，它将一个对象作为数据值，如下所示：
data:
fromUser: $("#fromUser").val(),
toUser: $("#toUser").val(),
message: $("#message").val()
,
dataType: "text",将分号 (;) 替换为逗号 (,)
【讨论】：
【参考方案2】：将所有表单元素放在<form> 中，以便从$_POST 接收数据。
<form method="post" action="insertMessage.php">
/* your form elements here */
</form>
不要忘记在表单元素中包含method="post"，将name="fieldName" 放在输入元素（文本、按钮、文本区域）和提交按钮上。
【讨论】：
它不会进入 insertMessage.php.. 它只是刷新页面：/ 对不起@CheveeFerrer，但是，OP 想要使用 AJAX。您的解决方案不考虑它。【参考方案3】：您的data 似乎有问题：
所以，请更改：
data:
fromUser: $("#fromUser").val();
toUser:$("#toUser").val();
message:$("#message").val();
,
收件人：
data:
fromUser: $("#fromUser").val(),
toUser:$("#toUser").val(),
message:$("#message").val()
,
解释：
分号（;）用于结束语句。
而fromUser 等是对象data 的属性。因此，它们应该用逗号分隔，并且是一个语句。
另外，作为一个建议：
<input type="text" id="fromUser" value=<?php echo $user["Email"]; ?> hidden />
上面的字段定义应该在value 周围有双引号（""）。
当我们的value 中有空格时，它会产生问题（不带分号）。
而hidden在上面没有任何意义，是type="hidden"还是class="hidden"？
【讨论】：
以上是关于jQuery $.ajax 没有触发任何事情发生的主要内容，如果未能解决你的问题，请参考以下文章
调用AlertDialog的dismiss方法没有发生任何事情
jQuery .animate() 在 IE8 中没有做任何事情
使用socket.io成功发送和接收事件，但没有发生任何事情