Question

我对JS和AJAX没什么问题，我不懂这种语言。我知道php和我申请了位置php开发人员，现在我有一些任务要做，我坚持一个。它是简单的任务，表单，提交，处理信息，存储在DB中，并发送。唯一的问题是我必须使用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>

IN表单我可以使用输入类型按钮而不是提交（因此JS中不需要preventDefault）而在JS中我这样做 $（ “＃提交”）。点击（函数.....

我想我已尝试过所有组合，当表单被提交时，默认情况下，没有激活JS ...

已解决：问题出现在IF声明中，content =“”而不是内容==“”，OMG我怎么忽略了......

Answer 1

您的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 2

要回答您的问题，是的，您是对的，您可以使用input类型button，并且您无需依赖提交表单。以下是您在没有提交表单的情况下编写它的方法：

<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: $("#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; 
    });

使用JS和AJAX提交表单

3 个答案: