联系表单未使用 Ajax 和 PHP 提交

【问题标题】：Contact form not submitting using Ajax and PHP联系表单未使用 Ajax 和 PHP 提交
【发布时间】：2014-12-23 19:18:07
【问题描述】：

我正在使用jQuery validation plugin 为我的站点构建一个联系表单，调用ajax 将数据转发到PHP 文件，最后发送电子邮件。似乎数据没有传递给 php 邮件程序。我是服务器端技术的新手，我读了很多书，但仍然无法使其正常工作，所以请告诉我。

形式：

<form class="form-horizontal" role="form" id="contactForm" name="contactForm" method="post">

<div class="form-group">
    <label class="col-lg-2 control-label" for="inputName">Name</label>
      <div class="col-lg-10">
          <input class="form-control" id="inputName" name="inputName" placeholder="Your name" type="text" value="" required>
     </div>
</div>

<div class="form-group">
   <label class="col-lg-2 control-label" for="inputEmail">Email</label>
   <div class="col-lg-10">
   <input class="form-control" id="inputEmail" name="email" placeholder="your@email.com" type="email" value="" required>   
   </div>
</div>

<div class="form-group">
   <label class="col-lg-2 control-label" for="inputMessage">Message</label>
   <div class="col-lg-10">
   <textarea class="form-control" id="inputMessage" name="inputMessage" placeholder="Message" rows="3"  required></textarea>
   <button class="btn btn-success pull-right" type="submit" name="submit" id="submit">Send</button>
   </div>
</div>

javascript：

/*validate contact form */
$(function() {
    $('#contactForm').validate({
        rules: {
            inputName: {
                required: true,
                minlength: 2
            },
            inputEmail: {
                required: true,
                email: true
            },
            inputMessage: {
                required: true
            }
        },
        messages: {
            name: {
                required: "name required",
                minlength: "name must be at least 2 characters"
            },
            email: {
                required: "email required"
            },
            message: {
                required: "message required",
                minlength: 10
            }
        },
        submitHandler: function(form) {
            $('form').ajaxSubmit({

                type:"POST",
                data: $(form).serialize(),
                url:"index2.php",
                success: function() {

                    alert("message sent");
                },
                error: function() {
                    alert("due to an error msg wasnt sent");
                }
            });
        }
    });
});

php 文件：

<?php
if ($_POST["submit"]) {
    $name = trim($_POST['inputName']);
    $email = trim($_POST['inputEmail']);
    $message = $_POST['inputMessage'];
    $from = 'Demo Contact Form';
    $to = 'example@example.com';
    $subject = 'Message from Contact Demo ';

    $body = "From: $name\n E-Mail: $email\n Message:\n $message";

    mail($to, $subject, $body, $from);
}
?>

【问题讨论】：

  • $_POST['submit'] 在您使用 AJAX 时未设置。
  • 你有没有检查ajax是否被调用？
  • 关于 SO 上的 AJAX 表单/调用有足够的信息。我已经发布了两个完整的答案，其他人也有。
  • @JasonK 如果您知道之前的答案是恰当的，请将其标记为重复。
  • 我认为表单是提交而不是 ajax。

标签： php jquery ajax forms


【解决方案1】：

$(form).serialize() 不包含submit 字段（它怎么知道您点击了哪个提交按钮？），所以if ($_POST['submit']) 永远不会成功。使用：

if ($_SERVER['REQUEST_METHOD'] == 'POST') {

相反。

或者，如果此脚本仅用于 AJAX 调用，而不是由浏览器直接加载，您可以完全省略该检查，如 Glizzweb 的回答。

【讨论】：

  • 表单不使用 ajax 提交，而是刷新表单。我认为这是主要问题。之后就可以休息了。
  • 感谢您的回答，我的一个 jquery 文件的路径有问题。另外，我尝试了你和 Glizzweb 的建议，我可以收到邮件但所有字段都是空的。是什么原因造成的？
  • 您的$from 错误。应该是$from = 'From: Demo Contact Form &lt;you@yourdomain.com&gt;';
  • 一个表单可以有多个提交按钮。当您以传统方式提交表单时，浏览器会将您单击的提交按钮作为参数包含在内。但是当您使用(form).serialize() 时，它只会获取所有正常的表单字段。它不是由特定的提交按钮触发的，因此不会将该参数添加到序列化字符串中。
  • 对。如果 POST 来自 AJAX 或来自普通表单提交，只要它们指定 POST 方法，就会设置。
【解决方案2】：

更好地使用检查：

  if (isset($_POST['inputName'])){
//rest part here
}

//查看文件是否在same directory，否则给出相对路径。

使用它来发送表单内容：

submitHandler: function() {
    $('form').ajaxSubmit({

        type:"POST",
        data: $('#contactForm').serialize(),
        url:"submit.php",
        success: function() {

            alert("message sent");
        },
        error: function() {
            alert("due to an error msg wasnt sent");
        }
    });
}

【讨论】：

  • php和html文件位于根文件夹，js文件位于“includes/js/file.js”内。这可能是问题之一？
  • 在控制台中查看文件是否已加载。
  • 我的一个 jquery 文件似乎有问题，编辑了路径，它发送邮件，但所有字段都是空的。
  • 从这里删除表单：submitHandler: function(form) { 并使用 data:$('#contactForm').serialize(),
  • 它现在可以工作了，最终我唯一改变的是 $('form').ajaxSubmit({ TO-> $('#contactForm').ajaxSubmit({。谢谢！
【解决方案3】：

在你的 ajax.php 中删除 $_POST["submit"]

<?php
    $name = trim($_POST['inputName']);
    $email = trim($_POST['inputEmail']);
    $message = $_POST['inputMessage'];
    $from = 'Demo Contact Form';
    $to = 'example@example.com';
    $subject = 'Message from Contact Demo ';

    $body = "From: $name\n E-Mail: $email\n Message:\n $message";

    mail($to, $subject, $body, $from);
?>

【讨论】：

    【解决方案4】：

    在 ajax 页面中 $_POST['submit'] 需要删除，因为您使用 "$(form).serialize()" 发布值，并且您没有将值发布到 ajax 页面。删除 if 条件 "if ($_POST["submit"]) {}" 并像这样更改 "if (!empty($_POST["inputName"])) { }"

     $name = trim($_POST['inputName']);
$email = trim($_POST['inputEmail']);
.....
....
....

    【讨论】：

      【解决方案5】：

      试试这个代码：

      <html>
<head>
<script src="js/jquery-1.11.0.js" type="text/javascript"></script>
<script src="js/jquery.validate.min.js" type="text/javascript"></script>
<script src="js/additional-methods.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){

    $('#contactForm').submit(function(e){
        e.preventDefault();
    $('#contactForm').validate({
        rules: {
            inputName: {
                required: true,
                minlength: 2
            },
            inputEmail: {
                required: true,
                email: true
            },
            inputMessage: {
                required: true
            }
        },
        messages: {
            name: {
                required: "name value required",
                minlength: "name must be at least 2 characters"
            },
            email: {
                required: "email is required"
            },
            message: {
                required: "message is required",
                minlength: 10
            }
        },
        submitHandler: function(form) {
            alert($('form').html());
            $.ajax({

                type:"POST",
                data: $(form).serialize(),
                url:"test1.php",
                success: function() {

                    alert("message sent");
                },
                error: function() {
                    alert("due to an error msg wasnt sent");
                }
            });
        }
    });
});
});
</script>
</head>
<body>

    <form class="form-horizontal" role="form" id="contactForm" name="contactForm" method="post">

<div class="form-group">
    <label class="col-lg-2 control-label" for="inputName">Name</label>
      <div class="col-lg-10">
          <input class="form-control" id="inputName" name="inputName" placeholder="Your name" type="text" value="" >
     </div>
</div>

<div class="form-group">
   <label class="col-lg-2 control-label" for="inputEmail">Email</label>
   <div class="col-lg-10">
   <input class="form-control" id="inputEmail" name="email" placeholder="your@email.com" type="email" value="" >   
   </div>
</div>

<div class="form-group">
   <label class="col-lg-2 control-label" for="inputMessage">Message</label>
   <div class="col-lg-10">
   <textarea class="form-control" id="inputMessage" name="inputMessage" placeholder="Message" rows="3"  ></textarea>
   <input class="btn btn-success pull-right" type="submit" name="submit" id="submit" value="Send">
   </div>
</div>
</body>
</html>

      它正在工作并显示已发送的消息和 ajax 调用。您在执行 ajax 调用时犯了一些错误。由于 jquery 验证插件不提供任何 ajaxsubmit 函数，而是使用我使用过的 jquery ajax 函数。尝试一下，让我知道进一步的问题。

      更改此代码以满足您的要求。

      【讨论】：

        猜你喜欢
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode