提交表单而不重新加载页面[重复]

Question

我知道有很多像this one 这样的问题，但我仍然无法让它正常工作。即使是对我应该做些什么来纠正这个问题的评论也绰绰有余，因为我了解 80% 的 jQuery..

<form action="meddelanden.php" id="fromen2" method="post">
    <input type="text" name="message" id="type" autocomplete="off" placeholder="type your chat message">
    <input class="lg" type="submit" name="submit" value="Send">
</form>

Meddelanden.php

<?php
    session_start();
    $meddelanden = $_POST['message'];
    $username = $_SESSION['user'];
    include ("connect.php");
    $sql = $con->prepare('INSERT INTO messages (message,username) VALUES (?,?)');
    $sql->bind_param("ss",$meddelanden,$username);
    $sql->execute(); 
    $sql->close();
    $con->close(); 
?>

脚本（把事情搞砸了）

$('#fromen2').submit(function(){

    $.ajax({
        type: 'POST',
        url: meddelanded.php,
        data: { 
            user: username,      // <-- is this what i should write in data?!
            message: message     // <-- and this?!
        },
        success: function(msg){                        
            alert('Message Sent');
        }
    });

    return false;
});

所以，我的问题是我应该在data: 中写什么，我不知道我应该在那里输入什么！任何人都可以帮助我，还是其他原因使它不起作用？

Answer 1

试试这样的。不过，您可能不得不稍微弄乱它。我首先阻止了当您按下提交按钮时表单自动提交，然后我使用用户在消息中输入的值，并在data 中输入messageInput 的值。希望这会有所帮助。

$('#fromen2').submit(function(e){
 e.preventDefault();
 var userMessage = $('#messageInput').val();

 $.ajax({
  type: 'POST',
  url: meddelanded.php,
  data: { 
    //You dont need to send user data becaues you are setting the user variable with $_SESSION in php file
    message: userMessage     
  },
   success: function(msg){


   alert('Message Sent');

      }
   });

return false;
});

HTML

<form id="fromen2" method="post">
        <input type="text" id = "messageInput" autocomplete="off" placeholder="type your chat message">
        <input class = "lg" type="submit" name="submit" value="Send">
    </form>

或者，您可以不使用.submit() 作为事件，而是向onclick 事件添加一个函数，该函数将从表单中检索数据并使用AJAX 将数据发布到您的PHP 脚本中。

$('#submitButton').on('click', function(e){
e.preventDefault();
var userMessage = $('#messageInput').val();

$.ajax({
 type: 'POST',
 url: meddelanded.php,
 data: { 
   //You dont need to send user data becaues you are setting the user    variable with $_SESSION in php file
   message: userMessage     
 },
  success: function(msg){


  alert('Message Sent');

     }
  });
});

HTML

<form id="fromen2">
    <input type="text" id = "messageInput" autocomplete="off" placeholder="type your chat message">
    <input class = "lg" id="submitButton" name="submit" value="Send">
</form>

Answer 2

只需使用 jQuery 序列化表单数据serialize:

$('#fromen2').submit(function(){

    $.ajax({
        type: 'POST',
        url: meddelanded.php,
        data: $(this).serialize()
        success: function(msg){

           alert('Message Sent');
        }
    });

    return false;
})

;