为什么这个脚本不会加载？

Question

我有一个联系我们的表格：

<form id="contactus" name="contactus" action="html_form_send1.php" method="post">
  <label for="name">Name:</label><br />
  <input type="text" id="name" name="name" maxlength="50" size="59" autofocus required/><br /><br />

  <label for="email">E-Mail Address:</label><br />
  <input type="email" id="email" name="email" maxlength="50" size="59" required/><br /><br />

  <label for="question">Question:</label><br />
  <textarea id="question" name="question" maxlength="1000" cols="50" rows="6" required></textarea><br /><br />

  <input class="c1_scButton" type="submit" id="submit" name="submit" value="Send" />
</form>

我希望它使用此 AJAX 代码调用我的邮件 PHP 脚本：

var msg = "";
name = $("#name").val();
email = $("#email").val();
question = $("#question").val();

//validation phase

function isValidEmailAddress(emailAddress) {
  var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([az]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
  return pattern.test(emailAddress);
};

function validate(e) {
  if (name == "") {
    msg = " valid name";
  }

  if (!isValidEmailAddress(email)) {
    msg = msg + " valid email address";
  }

  if (question == "") {
    msg = msg + " valid question or comment";
  }
}

// on submit, Validate then post to PHP mailer script
$(function() {
  $("#contactus").on('submit', function(e) {
    e.preventDefault();
    validate(e);
    if msg != "" {
      e.preventDefault();
      $("#alert").html "Please enter a" + msg;
    } else {
      $.post('/html_form_send1.php', $(this).serialize(), function(data) {
        $('#alert').css(color: "black")
        $('#alert').html("<h2>Thank you for contacting us!</h2>")
          .append("<p>We will be in touch soon.</p>");
      }).error(function() {
        $('#alert').css(color: "red")
        $('#alert').html("<h2>Something went wrong. Your Question was not submitted. /n</h2>").append("<p>Please try again later or email us at <a href=href="
          mailto: support@ allegroaffiliates.com ? Subject = Contact Us Form " target="
          _top ">support@allegroaffiliates.com.</a> </p>");
      });
    };
  });
});

该脚本在 HTML 页面的底部在另一个脚本之后被调用，但它没有加载。 我怀疑这是由于代码错误，但我找不到错误。 谁能告诉我为什么它不会加载？

旁注：我确实知道 HTML5 会验证脚本，但是当 HTML5 不可用时，我已经进行了验证。

感谢您的帮助。

Answer 1

一些故障排除建议：

(1) 指定ajax处理器文件时，这个$.post('html_form_send1.php'或者这个$.post('./html_form_send1.php'而不是这个$.post('/html_form_send1.php'

(2) 不要使用快捷代码$.post() ，而是使用该方法的完整形式，直到您非常擅长它：

var varvalue = $('#first_name').val();
var nutherval = $('#last_name').val();
$.ajax({
    type: 'post',
     url: 'your_secondary_file.php',
    data: 'varname=' +varvalue+ '&lname=' +nutherval,
    success: function(d){
        if (d.length) alert(d);
    }
});

(3) 禁用验证例程，直到其余部分正常工作，然后在您知道其他一切正常工作时继续进行

(4) 更改您的 ajax 处理器文件html_form_send1.php以仅回显响应以确保您的 AJAX 工作正常。 然后，一旦获得响应，将其更改为回显您正在发送的变量。 然后将其构建到最终所需的产品中。 但最初，一些简单的事情，像这样：

your_secondary_file.php:

<?php
    $first_name = $_POST['varname'];
    $last_name = $_POST['lname'];
    echo 'Received: ' .$first_name .' '. $last_name;
    die();

(5) 而不是使用.serialize() ，最初只是手动获取一两个字段值并首先使其工作。 请注意， .serialize()生成 JSON 数据，而更简单的方法是直接发布值，如本答案中的示例代码。 先让它工作，然后优化。

（6）注意， dataType:参数在AJAX代码块是用于从PHP侧代码回来，而不是代码去PHP端。 另请注意，默认值是html ，因此如果您不发回 JSON 对象，则只需将该参数留在外面即可。

(7) 在我上面的 AJAX 和 PHP 代码示例中，注意 javascript 变量名称、它在 AJAX 代码块中的引用方式以及 PHP 端如何接收它之间的相关性。 在我选择的名称中，我非常慎重，以允许您始终遵循var name => var value配对。

例如，ID 为first_name的输入字段存储在名为varvalue的变量中（愚蠢的名称，但有意为之）。 该数据在 AJAX 代码块中作为名为varname的变量传输，并在 PHP 端作为$_POST['varname'] ，最后作为$first_name存储在 PHP 中

---

查看一些简单的 AJAX 示例- 将它们复制到您的系统中并进行一些操作。