在bootstrap模式窗口

Question

我在bootstrap模式窗口中有一个表单，通过php处理表单， - 这部分确实可以正常工作。但是，我想在模态窗口内或者至少在用户原来的同一页面上向用户显示成功或失败消息（现在消息在我的php文件创建的空白页面上显示）。我以前几乎使用相同的机制（即php ajax组合），唯一的区别是我从未在模态窗口中使用过此代码。不知怎的，我只是不能让它发挥作用。非常感谢任何帮助：）

以下是我的HTML代码的相关部分：

<div class="container">
  <div class="row text-center orderprocess">
    <div class="col-sm-4 col-md-4 col-lg-4">
      <div class="frame_orderprocess">
        <h1>1</h1>
        <h2>Dr&aumlksak bestellen</h2>
        <p>Bestellen Sie online oder nehmen Sie telefonisch Kontakt auf.</p>
        <img src="img/Produkte/Draeksak/iconmonstr-email-4-icon-128.png" class="img-responsive center-block"/>
      </div><!--frame orderprocess-->
      <div class="highlight"><a href="#myModal" role="button" data-toggle="modal" class="linktext">--> Jetzt bestellen</a></div>
      <div id="form-messages" style="margin-top:1em; font-size:1.4em;"></div>
    </div><!--/col-4-->


    <!-- Modal -->
    <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3 class="modal-title">Dr&aumlksak bestellen</h3>
          </div>
          <div class="modal-body">
            <form role="form" id="ajax" method="post" action="php/dsshop.php">
              <div class="container-fluid">
                <div class="row">
                  <div class="col-md-12">
                    <div class="form-group">
                      <input type="text" class="form-control" id="firma" name="firma" required placeholder="Firma (falls vorhanden)">
                      <span class="help-block" style="display: none;">Bitte geben Sie Ihren Firmennamen ein (falls vorhanden).</span>
                    </div>
                  </div><!--/col-12-->
                </div><!--/row-->
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <input type="text" class="form-control" id="vorname" name="vorname" required placeholder="Vorname">
                      <span class="help-block" style="display: none;">Bitte geben Sie Ihren Vornamen ein.</span>
                    </div>
                  </div><!--/col-6-->
                  <div class="col-md-6">
                    <div class="form-group">
                      <input type="text" class="form-control" id="name" name="name" required placeholder="Name">
                      <span class="help-block" style="display: none;">Bitte geben Sie Ihren Namen ein.</span>
                    </div>
                  </div><!--/col-6-->
                </div><!--/row-->
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <input type="text" class="form-control" id="strasse" name="strasse" required placeholder="Strasse">
                      <span class="help-block" style="display: none;">Bitte geben Sie Ihre Strasse ein.</span>
                    </div>
                  </div><!--/col-5-->
                  <div class="col-md-2">
                    <div class="form-group">
                      <input type="text" class="form-control" id="plz" name="plz" required placeholder="PLZ">
                      <span class="help-block" style="display: none;">Bitte geben Sie Ihre Postleitzahl ein.</span>
                    </div>
                  </div><!--/col-2-->
                  <div class="col-md-4">
                    <div class="form-group">
                      <input type="text" class="form-control" id="ort" name="ort" required placeholder="Ort">
                      <span class="help-block" style="display: none;">Bitte geben Sie Ihren Ort ein.</span>
                    </div>
                  </div><!--/col-4-->
                </div><!--/row-->
                <div class="row">
                  <div class="col-md-8">
                    <div class="form-group">
                      <input type="email" class="form-control" id="email" name="email" required placeholder="E-Mail Adresse">
                      <span class="help-block" style="display: none;">Bitte geben Sie eine g&uumltige E-Mail Adresse ein.</span>
                    </div>
                  </div><!--/col-8-->
                  <div class="col-md-4">
                    <div class="form-group">
                      <input type="text" class="form-control" id="telefon" name="telefon" required placeholder="Telefon">
                      <span class="help-block" style="display: none;">Bitte geben Sie Ihren Ort ein.</span>
                    </div>
                  </div><!--/col-4-->
                </div><!--/row-->
                <div class="row">
                  <div class="col-md-5">
                    <div class="form-group">
                      <tr id='artikel0' data-id="0">
                        <td data-name="draeksak_artikel" data-type="select">
                          <select name="draeksak_artikel" class="form-control">
                            <option value"1">Auswahl Produkt</option>
                            <option value"2">Dr&aumlksak 1m3, CHF 37.00/Stk.</option>
                            <option value"3">Dr&aumlksak 1m3, inkl. Abholung und Entsorgung (CHF 210.00/Stk.)</option>
                          </select>
                        </td>
                      </tr>
                    </div>
                  </div><!--/col-5-->
                  <div class="col-md-3">
                    <div class="form-group">
                      <input type="text" class="form-control" id="anzahl" name="anzahl" required placeholder="Anzahl">
                      <span class="help-block" style="display: none;">Anzahl Produkt</span>
                    </div>
                  </div><!--/col-3-->
                  <div class="col-md-4">
                    <div class="form-group">
                      <tr id='lieferung0' data-id="1">
                        <td data-name="lieferung" data-type="select">
                          <select name="lieferung" class="form-control">
                            <option value"1">Lieferung</option>
                            <option value"2">Ja, per Post senden (Porto CHF 10.00/Stk.)</option>
                            <option value"3">Nein, ich hole den Dr&aumlksak vor Ort ab.</option>
                          </select>
                        </td>
                      </tr>
                    </div>
                  </div><!--/col-4-->
                </div><!--/row-->
                <div class="form-group">
                  <textarea rows="10" cols="100" class="form-control" id="message" name="message" required placeholder="Geben Sie hier Ihre Nachricht ein, falls erw&#252;nscht."></textarea>
                  <span class="help-block" style="display: none;">Bitte geben Sie eine Nachricht ein.</span>
                </div>              
                <button type="submit" class="btn btn-primary btn-lg" style="display: block; margin-top: 10px;">Bestellen</button>
              </div><!--/container-fluid-->  
            </form> <!--/form-->
          </div><!-- End of Modal body -->
        </div><!-- End of Modal content -->
      </div><!-- End of Modal dialog -->
    </div><!-- End of Modal -->

我的.js文件：

$(function() {

// Get the form.
var form = $('#ajax');

// Get the messages div.
var formMessages = $('#form-messages');

// Set up an event listener for the contact form.
$(form).submit(function(e) {
    // Stop the browser from submitting the form.
    e.preventDefault();

    // Serialize the form data.
    var formData = $(form).serialize();

    // Submit the form using AJAX.
    $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: formData
    })
    .done(function(response) {
        // Make sure that the formMessages div has the 'success' class.
        $(formMessages).removeClass('error');
        $(formMessages).addClass('success');

        // Set the message text.
        $(formMessages).text(response);

        // Clear the form.
        $('#firma').val('');
        $('#vorname').val('');
        $('#name').val('');
        $('#strasse').val('');
        $('#plz').val('');
        $('#ort').val('');
        $('#email').val('');
        $('#telefon').val('');
        $('#draeksak_artikel').val('');
        $('#anzahl').val('');
        $('#lieferung').val('');
        $('#message').val('');
    })
    .fail(function(data) {
        // Make sure that the formMessages div has the 'error' class.
        $(formMessages).removeClass('success');
        $(formMessages).addClass('error');

        // Set the message text.
        if (data.responseText !== '') {
            $(formMessages).text(data.responseText);
        } else {
            $(formMessages).text('Ups! Leider ist ein Fehler aufgetreten und Ihre Bestellung konnte nicht versendet werden.');
        }
    });

}); });

和php文件，虽然这应该没关系，我想：

<?php
// My modifications to mailer script from:
// http://blog.teamtreehouse.com/create-ajax-contact-form
// Added input sanitizing to prevent injection

// Only process POST requests.
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Get the form fields and remove whitespace.
    $firma = strip_tags(trim($_POST["firma"]));
$firma = str_replace(array("\r","\n"),array(" "," "),$firma);
    $vorname = strip_tags(trim($_POST["vorname"]));
$vorname = str_replace(array("\r","\n"),array(" "," "),$vorname);
    $name = strip_tags(trim($_POST["name"]));
$name = str_replace(array("\r","\n"),array(" "," "),$name);
    $strasse = strip_tags(trim($_POST["strasse"]));
$strasse = str_replace(array("\r","\n"),array(" "," "),$strasse);
    $plz = strip_tags(trim($_POST["plz"]));
$plz = str_replace(array("\r","\n"),array(" "," "),$plz);
    $ort = strip_tags(trim($_POST["ort"]));
$ort = str_replace(array("\r","\n"),array(" "," "),$ort);

    $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);

    $telefon = strip_tags(trim($_POST["telefon"]));
$telefon = str_replace(array("\r","\n"),array(" "," "),$telefon);

    $draeksak_artikel = trim($_POST["draeksak_artikel"]);
    $anzahl = trim($_POST["anzahl"]);
    $lieferung = trim($_POST["lieferung"]);
    $message = trim($_POST["message"]);

    // Check that data was sent to the mailer.
    if ( empty($vorname) OR empty($name) OR empty($strasse) OR empty($plz) OR empty($ort)
        OR empty($email) OR empty($telefon) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
        // Set a 400 (bad request) response code and exit.
        http_response_code(400);
        echo "Ups! Leider ist ein Fehler aufgetreten. Bitte stellen Sie sicher, dass Sie alle Felder korrekt eingesetzt haben.";
        exit;
    }

    // Set the recipient email address.
    // FIXME: Update this to your desired email address.
    $recipient = "asymmetrisch@gmail.com";

    // Set the email subject.
    $subject = "Bestellung Draeksak von unserer Webseite: $firma, $vorname, $name";

    // Build the email content.
    $email_content = "Firma: $firma\n";
    $email_content .= "Vorname: $vorname\n";
    $email_content .= "Name: $name\n";
    $email_content .= "Strasse: $strasse\n";
    $email_content .= "PLZ: $plz\n";
    $email_content .= "Ort: $ort\n";
    $email_content .= "Telefon: $telefon\n";
    $email_content .= "Email: $email\n\n";
    $email_content .= "Artikel: $draeksak_artikel\n";
    $email_content .= "Anzahl: $anzahl\n";
    $email_content .= "Lieferung: $lieferung\n";
    $email_content .= "Nachricht:\n$message\n";

    // Build the email headers.
    $email_headers = "From: $name <$email>";

    // Send the email.
    if (mail($recipient, $subject, $email_content, $email_headers)) {
        // Set a 200 (okay) response code.
        http_response_code(200);
        echo "Danke Ihnen, wir haben Ihre Bestellung erhalten und bearbeiten diese sofort.";
    } else {
        // Set a 500 (internal server error) response code.
        http_response_code(500);
        echo "Ups! Etwas ist falsch gelaufen; leider konnte Ihre Bestellung nicht versendet werden.";
    }

} else {
    // Not a POST request, set a 403 (forbidden) response code.
    http_response_code(403);
    echo "Es ist ein Problem aufgetreten. Ihre Bestellung konnte leider nicht versendet werden.";
} ?>

有人可以看到，我有一个div id =＆＃34; form-messages＆＃34;应该发布成功或错误消息的位置（现在它在模态窗口之外，这也没关系）。在表单标签中，我包含了一个id =＆＃34; ajax＆＃34;然后在.js文件中引用它。但Google Chrome告诉我，这是一个未被捕获的类型错误：$不是一个函数，它说。值得一提的是，我在html文件的底部包含了以下文件：

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/ajax_dsshop.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="js/bx_slider/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="js/bx_slider/jquery.bxslider.css" rel="stylesheet" />
<script>