javascript - 使用 JS 和 AJAX 提交表单

Question

我对 JS 和 AJAX 没什么问题，我不懂这些语言。我知道 php，并且我已经申请了 php 开发人员的职位，现在我有一些任务要做，但我坚持了一个。它是简单的任务、表单、提交、处理信息、存储在数据库中并发送。唯一的问题是我必须使用 AJAX 来提交表单，我几乎没有做任何研究，但不知何故我写了这段代码，但它不起作用。

<div>
        <form method="POST" action="add.php" id="form">
            <input type="email" name="email" id="email" value="Email">
            <textarea name="content" id ="content">Message</textarea>
            <input type="submit" value="Submit" id="submit"> 
        </form>
        <a href="send.php">Send messages from database</a>
    </div>
    <script>
        $(document).ready(function() {
            // When click on button store values from form fields into variables
            $("form").submit(function(event) {
                event.preventDefault();
                var email = $("#email").val();
                var content = $("#content").val();
                // Check if fields are empty 
                if (email=="" || content="") {
                    alert("Please fill all fields");
                }
                // AJAX code to submit form
                else {
                    $.ajax ({
                        type: "POST",
                        url: ("#form").attr('action');
                        data: { "email": email, "content": content},
                        cache: false,
                        success: function() {
                            alert("Data successfully forwarded to add.php");
                        }
                    });
                }
                return false;
            });
        });
    </script>
</body>

在表单中，我可以使用输入类型按钮而不是提交(因此在 JS 中不需要 preventDefault)并且在 JS 中我这样做$("#submit").click(函数.....

我想我已经尝试了所有的组合，当表单被提交时它会默认，没有 JS 被激活...

已解决:问题出在 IF 语句中，content=""而不是 content==""，天哪，我怎么忽略了这一点...

Answer 1

要回答您的问题，是的，您是对的，您可以使用 button 类型的 input 并且您不必依赖于提交表单。以下是您在不提交表单的情况下的编写方式:

<div>
    <form method="POST" action="add.php" id="form">
        <input type="email" name="email" id="email" value="Email">
        <textarea name="content" id ="content">Message</textarea>
        <input type="button" value="Submit" id="submit" onclick="SendAjax();"> 
    </form>
    <a href="send.php">Send messages from database</a>
</div>
<script>
    // When click on button store values from form fields into variables
    function SendAjax() {
        var email = $("#email").val();
        var content = $("#content").val();
        // Check if fields are empty 
        if (email=="" || content=="") {
            alert("Please fill all fields");
        }
        // AJAX code to submit form
        else {
            $.ajax ({
                type: "POST",
                url: "type your URL here",
                data: { "email": email, "content": content},
                cache: false,
                success: function() {
                    alert("Data successfully forwarded to add.php");
                }
            });
        }
    }
</script>

如您所见，我更喜欢在 AJAX 中指定 URL，而不是从表单的操作中获取它，有时我将它设置为与 AJAX 不同的 URL。但是，如果您想从表单的操作中获取 URL，请将代码中的该行修改为:

url: $("#form").attr('action'),