Question

有人可以通过查看显而易见的内容来帮助我使用此代码吗？问题似乎是嵌入式JavaScript代码没有被执行，因此也跳过了PHP代码。 HTML和PHP文件都在根目录中。

的HTML / JS：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery AJAX test form</title>
<script src="js/jquery.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"> 
  <!-- Contacts -->
  <div id="contacts">
    <div class="row"> 
      <!-- Alignment -->
      <div class="col-sm-offset-3 col-sm-6">
        <p>&nbsp;</p>
        <p>Some header message here</p>
        <p>&nbsp;</p>
        <form name="contact" class="well" id="contact">
          <legend>Contact Form</legend>
          <div class="control-group">
            <div class="controls">
              <input type="text" class="form-control" placeholder="Name" id="name" />
              <p class="help-block"></p>
            </div>
          </div>
          <div class="control-group">
            <div class="controls">
              <input type="email" class="form-control" placeholder="Email" id="email" required/>
            </div>
          </div>
          <div class="control-group">
            <div class="controls">
              <textarea rows="10" cols="100" class="form-control" placeholder="Message" id="message" style="resize:none"></textarea>
            </div>
          </div>
          <div id="success"> </div>
          <button type="submit" class="btn btn-primary pull-right" id="submit">Send</button>
          <button type="reset" class="btn btn-default pull-right" id="res">Reset</button>
          <br />
        </form>
      </div>
    </div>
  </div>
</div>
<script>
 $(function() {
    $("button#submit").click(function(event){
        event.preventDefault();
        $.ajax({
            type: "POST",
            url: "process.php",
            data: $('form.contact').serialize(),
            success: function(){
                    alert("success");
            },
            error: function(){
                alert("failure");
            }
        });
    });
});
</script>
</body>
</html>

PHP：

<?php
    if (isset($_POST['name'])) {
        $name = strip_tags($_POST['name']);
        $email = strip_tags($_POST['Email']);
        $message= strip_tags($_POST['message']);
        echo "Name      =".$name."</br>";   
        echo "Email     =".$email."</br>";  
        echo "Message       =".$message."</br>";    
        echo "<span class=\"label label-info\" >your message has been submitted .. Thank you</span>";
    }
?>

Answer 1

选择器应为

$（＆＃39;＃形式接触＆＃39）

而不是

$（＆＃39; form.contact＆＃39）

因为联系人是个身份。

Answer 2

如果您的链接正确（process.php）并且您有这两个jquery库链接，那将会有效（说实话，如果您需要两个，或者只有一个或者什么，我不是100％，但我知道在两者之间，ajax工作）。

您的表单中没有名称，只有占位符，因此没有输入。这是真正的问题。示例： <input type="text" id="Name" name="Name" placeholder="Name" />

如果它仍然不起作用，那么除了在代码中显示的内容之外，还有一个问题。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script>
 $(document).ready(function() {
    $("#contact").submit(function(){
        $.ajax({
            type: "POST",
            url: "process.php",
            data: $('#contact').serialize(),
            success: function(result){
                    $('#contacts').html(result);
                   // alert("success");
            },
            error: function(){
                alert("failure");
            }
        });
     return false;
    });
});
</script>

process.php页面：

<?php print_r($_REQUEST);
// $_REQUEST['name'] has to be an input name in the form. Yours probably has $_REQUEST['Name'] (notice "name" vs "Name")
    if (isset($_REQUEST['name'])) {
        $name = strip_tags($_REQUEST['name']);
        $email = strip_tags($_REQUEST['Email']);
        $message= strip_tags($_REQUEST['message']);
        echo "Name      =".$name."</br>";   
        echo "Email     =".$email."</br>";  
        echo "Message       =".$message."</br>";    
        echo "<span class=\"label label-info\" >your message has been submitted .. Thank you</span>";
    }
?>

AJAX代码未被执行

2 个答案: