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()。请注意，dataType:生成JSON数据，而更简单的方法是直接发布的值，如本答案中的示例代码所示。让它先工作，然后优化。

（6）请注意，AJAX代码块中的html参数用于从PHP端返回的代码，而不是用于到的代码PHP端。另请注意，默认值为var name => var value，因此如果您不发送回JSON对象，则只需将该参数保留。

（7）在我上面的AJAX和PHP代码示例中，请注意javascript变量名称，它在AJAX代码块中的引用方式以及它在PHP方面的接收方式之间的相关性。我非常谨慎地选择了我允许你一直遵循first_name配对的名字。

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

查看some simple AJAX examples - 将它们复制到您的系统并稍微玩一下。

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

1 个答案: