使用 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(function.....

我想我已经尝试了所有组合，当提交表单时，它采用默认设置，没有激活 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'),

Answer 2

您的ajax调用中有语法错误。

$.ajax ({
    type: "POST",
    url: ("#form").attr('action'); // This is bad JSON
    data: { "email": email, "content": content},
    cache: false,
    success: function() {
        alert("Data successfully forwarded to add.php");
    }
});

将该行替换为：

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

Answer 3

使用serialize()方法（如下所述）而不是手动获取表单每个字段的值来构建 JSON 对象。

 $('#form').submit(function() {
        $.ajax({ 
            data: $(this).serialize(), 
            type: $(this).attr('method'),
            url: $(this).attr('action'),
            success: function() {
                alert("Data successfully forwarded to add.php");
            }
        });
        return false; 
    });