我正在尝试使用 jQuery AJAX 提交表单。我不太擅长这段代码,所以看不到
Issue - why I need to submit the form twice in order for it to post.
当我提交表单时,文本区域清除回占位符文本,但没有任何反应。当我再次单击它时,该帖子将提交并显示。我有以下 textarea
和 button
<textarea class="add-message-textarea" name="message_body" id="message_textarea" placeholder="Write message"></textarea>
<button class="post-button button" type="submit" name="post_message" id="message_submit">Post</button>
当我提交时,我有以下内容:
$body = '';
if(isset($_POST['post_message'])) {
if(isset($_POST['message_body'])) {
$body = $_POST['message_body'];
}
}
然后AJAX调用:
var userLoggedIn = '<?php echo $userLoggedIn; ?>';
var user_to = '<?php echo $user_to; ?>';
var body = '<?php echo $body; ?>'
// var body = $("#message_textarea").val();
$(document).ready(function() {
$("#message_submit").click(function(){
//ajax request for send 'sending a new message' string to dB
$.ajax({
url: "includes/handlers/ajax_send_message.php",
type: "POST",
data: {'userLoggedIn':userLoggedIn, 'user_to':user_to, 'body':body},
cache: true,
success: function(response) {
console.log("message_sent");
}
});
});
});
ajax_send_message.php
看起来很简单:
global $con;
if(isset($_POST['userLoggedIn']) && isset($_POST['user_to']) && isset($_POST['body'])) {
$userLoggedIn = $_POST['userLoggedIn'];
$body = $_POST['body'];
$user_to = $_POST['user_to'];
$date = date("Y-m-d H:i:s");
$message_obj = new Message($con, $userLoggedIn);
$message_obj->sendMessage($user_to, $body, $date);
}
我可以使用 PHP 和下面的代码让这个工作没有问题,但我不希望页面重新加载。
if(isset($_POST['post_message'])) {
if(isset($_POST['message_body'])) {
$body = $_POST['message_body'];
$date = date("Y-m-d H:i:s");
$message_obj->sendMessage($user_to, $body, $date);
}
}
感谢任何帮助。
最佳答案
如果您想提交表单但阻止重新加载页面,您只需点击提交按钮返回 false
即可:
$(document).ready(function() {
$("#message_submit").click(function(){
//ajax request for send 'sending a new message' string to dB
$.ajax({
url: "includes/handlers/ajax_send_message.php",
type: "POST",
data: {'userLoggedIn':userLoggedIn, 'user_to':user_to, 'body':body},
cache: true,
success: function(response) {
console.log("message_sent");
}
});
return false;
});
});
注意:如果您想完全阻止提交表单,请将事件监听器附加到表单提交,而不是单击按钮。用户可以通过按 Enter
或附加到设备键盘等的其他不可预测的操作来提交表单。
$(YOUR_FORM).on("submit",function(){
//Ajax code here
return false;
})
关于php - 需要提交表单两次才能使用 jQuery AJAX 正确发布,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54952654/