Question

我有一个带有表单的HTML文件（index.html）。我想使用AJAX将表单输入传递给名为messagehandler.php的PHP脚本，然后messagehandler.php应该将表单输入写入名为messages.txt的文本文件中。出于某种原因，当我向表单输入内容时，绝对没有任何反应。我知道messagehandler.php正确写入messages.txt。 index.html和messagehandler.php在下面。

的index.html：

<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="index.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <title>Chat</title>
    </head>

    <body>
        <div id="inputbox">
                <form id="messageinput">
                <input type="text" name="message" id="submitbox" autofocus="autofocus" autocomplete="off">
                <input type="submit" value="" id="submitbutton">
            </form>
        </div>
    </body>

    <script>    
        $("#messageinput").submit(function() {
            var $messageSent = $("#messageinput").serialize();
            alert($messageSent);

            $.ajax({
                type: 'POST',
                url: 'messagehandler.php',
                data: $messageSent,
                success: function(response) {
                    alert("it worked");
                }
            });
        });

    </script>
</html>

messagehandler.php：

<?php
    $messageSent = $_POST['message'];
    $messages = fopen("messages.txt", "a");
    fwrite($messages, addslashes("<br />" . $messageSent));
    fclose($messages);
?>

当我在表单中输入“test”并提交时，警告说$ messageSent的值是message = test。

知道如何让这个工作吗？谢谢！

Answer 1

HTML表单提交将重新加载页面内容。使用event.preventDefault()来阻止html元素的默认操作。

$("#messageinput").submit(function(e) {
    e.preventDefault(); // -> It prevents the default actions 

    var $messageSent = $("#messageinput").serialize();
    alert($messageSent);
    ......  
});

使用AJAX无法将HTML表单数据传递到PHP文件

1 个答案: