从 PHP 页面获取结果 [重复]答案

【问题标题】：Get the result from the PHP page [duplicate]从 PHP 页面获取结果 [重复]
【发布时间】：2018-12-30 07:42:06
【问题描述】：

我创建了一个联系页面。
当我单击提交按钮时，此表单会将我的表单信息发送到服务器端文件 (PHP)，但提交按钮什么也不做。

我在 AJAX 中没有得到答案！

<script type="text/javascript">
$(document).ready(function() {
  $('#submit').click(function() {
    $('#submit').attr('value', 'Please wait...');
    $.post("sender.php", $("#contactform").serialize(), function(response) {
      $('#success').html(response);
      $('#submit').attr('value', 'SEND');
    });
    return false;
  });
});
</script>

<!doctype html>
<html>
<head>
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
  <link href="styles/contactform-style.css" rel="stylesheet" id="contact-from-style" >
  <meta charset="utf-8">
  <title>My Contact  form</title>
</head>

<body>
<section id="contact">
  <div class="container prop">
    <!--    <div class="well well-sm">
      <h3><strong>Contact  us Pars Coders  </strong></h3>
    </div>-->

    <div class="row" id="p">
      <div class="col-md-7">
        <img src="img/email-icon.png" class="img-responsive text-center" alt="Pars Codres" />
      </div>
      <div class="col-md-5">
        <h4><strong>Tmas Ba ma  </strong></h4>
        <form id="#contactform">
          <div class="form-group">
            <input type="text" class="form-control" name="name" value="" placeholder="Name">
          </div>
          <div class="form-group">
            <input type="email" class="form-control" name="email" value="" placeholder="E-mail">
          </div>
          <div class="form-group">
            <textarea class="form-control" name="description" rows="3" placeholder="Description"></textarea>
          </div>
          <button class="btn btn-success" type="submit" name="button" id="submit">
            <i class="fa fa-paper-plane-o" aria-hidden="true"></i> Send ...
          </button>
          <div id="success" style="color: red;">؟</div>
        </form>
      </div>
    </div>
  </div>
</section>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

</body>
</html>

<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['description'];
$to = 's3dhossein@gmail.com';
$subject = 'the subject';
$message = 'FROM: '.$name.' Email: '.$email.'Message: '.$message;
$headers = 'From: s3dhossein@gmail.com' . "\r\n";
if (filter_var($email, FILTER_VALIDATE_EMAIL)) { // this line checks that we have a valid email address
  mail($to, $subject, $message, $headers); //This method sends the mail.
  echo "Your email was sent!"; // success message
}else{     echo "Invalid Email, please provide an correct email.";

}
?>

你认为问题出在哪里？

错误会来自 AJAX 吗？

【问题讨论】：

一个； <form id="#contactform"> 包含语法错误/错字。从那里删除#。如果这就是这里的全部错误，那么作为印刷错误是题外话。
感谢我删除了它，但它不再起作用了
在可能发生错误的地方很难触发。请尝试仅返回您发布到 php-script 的值并跳过邮件部分？
既然要使用Ajax，就使用type="button"来触发数据发送OR使用.preventDefault()。您的问题是页面正在重新加载...
把method="post"放在表单标签里面。

标签： javascript php jquery html css

【解决方案1】：

发现问题：

1) 出现错误：Error: Bootstrap's JavaScript requires jQuery。这意味着bootstrap的js文件必须在jQuery的js文件之后加载。所以颠倒他们的立场：

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

2) 引发错误：ReferenceError: $ is not defined 用于行 $(document).ready(function () {。这意味着在您的脚本中无法识别 jquery。所以把页面中的所有js导入head。页面底部js导入的时代早已一去不复返了。

3) 表单标签必须是<form id="contactform">，而不是<form id="#contactform">。

4) 如果您通过 ajax 请求提交，那么您必须使用“按钮”类型的按钮，而不是“提交”类型的按钮。然后你也可以从$('#submit').click(function (){...}函数中删除return false;。

建议：

为 ajax 请求定义一个“错误”回调。
将 meta 标签定义为 head 标签中的第一个标签。

工作代码：

<!doctype html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
        <meta charset="UTF-8" />
        <!-- The above 3 meta tags must come first in the head -->

        <title>My Contact  form</title>

        <!-- CSS resources -->
        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
        <link href="styles/contactform-style.css" rel="stylesheet" id="contact-from-style" >

        <!-- JS resources -->
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function () {
                $('#submit').click(function () {
                    $('#submit').attr('value', 'Please wait...');

                    $.post("sender.php", $("#contactform").serialize(), function (response) {
                        $('#success').html(response);
                        $('#submit').attr('value', 'SEND');
                    });
                });
            });
        </script>
    </head>
    <body>

        <section id="contact">
            <div class="container prop">
                <!--    <div class="well well-sm">
                  <h3><strong>Contact  us Pars Coders  </strong></h3>
                </div>-->

                <div class="row" id="p">
                    <div class="col-md-7">
                        <img src="img/email-icon.png" class="img-responsive text-center" alt="Pars Codres" />
                    </div>
                    <div class="col-md-5">
                        <h4><strong>Tmas Ba ma  </strong></h4>
                        <form id="contactform">
                            <div class="form-group">
                                <input type="text" class="form-control" name="name" value="" placeholder="Name">
                            </div>
                            <div class="form-group">
                                <input type="email" class="form-control" name="email" value="" placeholder="E-mail">
                            </div>
                            <div class="form-group">
                                <textarea class="form-control" name="description" rows="3" placeholder="Description"></textarea>
                            </div>
                            <button class="btn btn-success" type="button" name="button" id="submit">
                                <i class="fa fa-paper-plane-o" aria-hidden="true"></i> Send ...
                            </button>
                            <div id="success" style="color: red;">؟</div>
                        </form>
                    </div>
                </div>
            </div>
        </section>

    </body>
</html>

【讨论】：