为什么ajax在提交表单时无法找到php文件?

时间:2017-10-29 22:15:21

标签: javascript php forms

我有一个表单,发出ajax帖子请求,但它不会找到php文件。我尝试过任何东西并在这里阅读了很多帖子并尝试了所有建议但没有任何帮助。

  1. 我尝试使用绝对路径,就像在某处建议的那样。不起作用。
  2. 相对路径不起作用
  3. 我试图把我的表单之外的提交按钮放在我的html文件中(在另一篇文章中有建议) - 也没办法。 谁知道为什么? 编辑:我得到了404
  4. 文件结构:

    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> 
    

    应用程序/ 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>';
        }
    }
    

    &GT;

3 个答案:

答案 0 :(得分:0)

在您的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> <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> 标记

之前
$SpouseName = $_POST['SpouseName'];
$SpouseAge = $_POST['SpouseAge'];
if (isset($SpouseName) && !empty($SpouseName) && isset($SpouseAge) && !empty($SpouseAge)) {
  $sql = "INSERT INTO test (SpouseName,SpouseAge) VALUES ('$SpouseName','$SpouseAge')";
} else {
  echo "The values weren't set or were empty!";
}

答案 1 :(得分:0)

这不会解决你的问题,但这是一个更好的ux

向您的<form>提供课程或ID,并在表单提交上执行您的表单提交

所以它会是

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

});

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

答案 2 :(得分:0)

而不是使用

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

使用:

url: "mail/contact.php",