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

Posted 2023-02-24

【中文标题】提交表单而不重新加载页面[重复]

【英文标题】：Submit a form without reloading page [duplicate]

【发布时间】：2017-06-23 16:13:12

【问题描述】：

我知道有很多像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: 中写什么，我不知道我应该在那里输入什么！任何人都可以帮助我，还是其他原因使它不起作用？

【问题讨论】：

尝试将变量 $meddelanden 和 $username 直接放入 VALUES ('$meddelanden','$username')，省略 bind_param()

@BrianSmith no 那么它可以进行 mysql 注入

您需要更改您的按钮，使其在点击后不提交：<input class = "lg" type="button" name="submit" value="Send"> 然后将您的 ajax 连接到它的点击事件。

我该怎么做呢？ @freedomn-m

在函数顶部使用e.preventDefault();。

【参考方案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>

【讨论】：

不行，消息不会被提交，即使我更正了那个 url 错字

【参考方案2】：

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

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

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

           alert('Message Sent');
        
    );

    return false;
)

;

【讨论】：

这对我不起作用，提交后表单仍在前往 meddelanded.php

请确保当表单元素已经在 DOM 中时添加您的 javascript 代码。您可以在提交回调中添加console.log(this)，以检查单击提交按钮时是否执行了此代码。例如，如果您将此 js 代码放在 head 中，它将无法工作