为什么ajax在提交表单时找不到php文件？

Question

我有一个表单，发出一个 ajax 发布请求，但它找不到 php 文件。我尝试了任何方法并在这里阅读了这么多帖子，并尝试了所有建议但没有任何帮助。

1. 我尝试使用某处建议的绝对路径。不起作用。
2. 相对路径也不起作用
3. 我试图将提交按钮放在我的 html 文件中的表单之外（在另一篇文章中建议） - 也不起作用。 有谁知道为什么？ 编辑：我得到一个 404

文件结构：

myApp/app/js/contact.js
myApp/app/mail/contact.php
myApp/app/index.html

html:

    <section id="contact">
        <form>
            name:
            <input id="name" type="text" name="name"> email:
            <input id="email" type="text" name="email"> message:
            <input id="message" type="text" name="message">
            <button id="submit">send</button>
        </form>
    </section> 

app/js/contact.js:

  $('#submit').click(function (event) {
        event.preventDefault() ;
        var name = $("#name").val();
        var email = $("input#email").val();
        var message = $("textarea#message").val();

        console.log("name", name, email);
        $.ajax({
            url: "/app/mail/contact.php",
            type: "POST",
            data: {
                name: name,
                email: email,
                message: message
            }
        })
    });

邮件/contact.php：

<?php
 if (isset($_POST["submit"])) {
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    $from = 'Contact Form';
    $to = 'myemail@yahoo.com';
    $subject = 'Message from my page ';
    if (mail ($to, $subject, $body, $from)) {
    $result='<div class="alert alert-success">Thank You! I will be in touch</div>';
    }
}

?>

Answer 1

这不会解决您的问题，但这是一个更好的用户体验

给您的<form> 一个类或 ID 并在表单提交上执行您的表单提交

原来如此

$('.formClassName').submit(function(event){

});

这将允许表单提交在点击提交按钮时触发 AJAX 事件，以及在用户点击回车按钮时触发。

Answer 2

在您的 html 文件中，将您的脚本放在 </body> 标记之前

<section id="contact">
    <form>
        name:
        <input id="name" type="text" name="name"> email:
        <input id="email" type="text" name="email"> message:
        <input id="message" type="text" name="message">
        <button id="submit">send</button>
    </form>
</section>
<script type="text/javascript" src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/app/js/contact.js"></script>
</body>

Answer 3

而不是使用

url: "/app/mail/contact.php",

使用：

url: "mail/contact.php",