Question

我创建了一个联系页面。
当我单击“提交”按钮时，此表单将我的表单信息发送到服务器端文件（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会导致错误吗？

Answer 1

发现问题：

1）引发错误：Error: Bootstrap's JavaScript requires jQuery。这意味着引导程序的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请求提交，则必须使用“按钮”类型的按钮，而不是“提交”类型的按钮。然后，您也可以从return false;函数中删除$('#submit').click(function (){...}。

建议：

为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>

从PHP页面获取结果

1 个答案: