时间戳

首页 > 解决方案 > 为什么我的 Ajax 请求后没有客户端响应？

javascript - 为什么我的 Ajax 请求后没有客户端响应？

问题描述

我正在努力从 ajax 表单中发送数据，并在成功或失败的情况下返回警报框。

我已经提出了一个主题，因为我在 $_POST 中的数据似乎没有发送到我的 php 脚本并且 Ajax 请求不起作用。现在该请求已被服务器很好地识别，如网络面板所示：

数据发送

我还创建了一个 var_dump($_SERVER) 并且 $_SERVER['HTTP_X_REQUESTED_WITH'] 值是“XML HTTPREQUEST”，这表明 Ajax 请求已经启动。现在我有另一个问题：我没有客户端响应：目前程序似乎验证了条件if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')，我有一个echo($encoded)JSON 格式，如下所示： JSON echo php。

因此，我应该有一个客户端响应，但实际上并非如此。

这是我的代码：表格

<form id="contactformpage">
  <div class="messages"></div>
  <div class="form-group row">
    <label for="societepage" class="col-sm-6 col-form-label">Société</label>
    <div class="col-sm-6 champ">
      <input type="text" name="societe" class="form-control" id="societepage" placeholder="Nom de la société"
        aria-describedby="indicsocietepage">
      <small id="indicsociete" class="form-text text-muted"> * Obligatoire </small>
    </div>
  </div>
  <div class="form-group row">
    <label for="adressepage" class="col-sm-6 col-form-label">Adresse</label>
    <div class="col-sm-6 champ">
      <input type="text" name="adresse" class="form-control" id="adressepage" placeholder="Adresse">
    </div>
  </div>
  <div class="form-group row">
    <label for="codepostaletvillepage" class="col-sm-6 col-form-label">Code postal & ville</label>
    <div class="col-sm-6 champ">
      <input type="text" class="form-control" name="codepostaletville" id="codepostaletvillepage"
        placeholder="Code postal & ville">
    </div>
  </div>
  <div class="form-group row">
    <label for="contactpage" class="col-sm-6 col-form-label">Nom du contact</label>
    <div class="col-sm-6 champ">
      <input type="text" class="form-control" name="contact" id="contactpage" placeholder="Nom du contact">
    </div>
  </div>
  <div class="form-group row">
    <label for="telephonepage" class="col-sm-6 col-form-label">Téléphone</label>
    <div class="col-sm-6 champ">
      <input type="text" class="form-control" name="téléphone" id="telephonepage" placeholder="Numéro de téléphone"
        aria-describedby="indictelephonepage">
      <small id="indictelephonepage" class="form-text text-muted"> * Obligatoire </small>
    </div>
  </div>
  <div class="form-group row">
    <label for="mailpage" class="col-sm-6 col-form-label">Adresse mail</label>
    <div class="col-sm-6 champ">
      <input type="email" class="form-control" name="mail" id="mailpage" placeholder="Entrez votre adresse mail"
        aria-describedby="indicmailpage">
      <small id="indicmailpage" class="form-text text-muted"> * Obligatoire </small>
    </div>
  </div>
  <div class="form-group row">
    <label class="col-sm-6 col-form-label" for="selecmarque" aria-describedby="indicmarquepage"> Marque du véhicule
    </label>
    <div class="col-sm-6 champ">
      <select class="form-control" name="marque" style="height:20px;padding-bottom:0;padding-top:1;"
        onchange="generechoixmodele('selecmarque','apreschoixmarquepage','apreschoixmodelepage','nommodelepage','choixmodelepage','choixtypepage');"
        id="selecmarque">
        <option selected> Séléctionnez </option>
      </select>
    </div>
  </div>
  <div class="form-group row" id="apreschoixmarquepage" style="display:none;">
    <!-- Liste déroulante qui apparait après le choix de la marque -->
    <label class="col-sm-6 col-form-label" for="apreschoixmarquepage" aria-describedby="indicmarque"
      id="nommodelepage"></label>
    <div class="col-sm-6 champ">
      <select class="form-control" name="modele" style="height:20px;padding-bottom:0;padding-top:1;"
        id="choixmodelepage"
        onchange="generechoixtype('selecmarque','choixmodelepage','apreschoixmodelepage','nomtypepage','choixtypepage');">
      </select>
    </div>
  </div>
  <div class="form-group row" id="apreschoixmodelepage" style="display:none;">
    <!-- Liste déroulante qui apparait après le choix du modèle -->
    <label class="col-sm-6 col-form-label" for="apreschoixmodelepage" aria-describedby="indicmarque"
      id="nomtypepage"></label>
    <div class="col-sm-6 champ">
      <select class="form-control" name="type" style="height:20px;padding-bottom:0;padding-top:1;" id="choixtypepage">
      </select>
    </div>
  </div>
  <p> Je souhaite recevoir les catalogues suivants (dynamique)</p>
  <div id="choixcataloguepage">
  </div>
  <div class="form-group row">
    <label class="col-sm-6 col-form-label" for="commentairepage">Commentaire</label>
    <div class="col-sm-6 champ">
      <textarea class="form-control" name="commentaire" id="commentairepage" rows="1"></textarea>
    </div>
  </div>
  <div class="form-group row">
    <label for="mail" class="col-sm-6 col-form-label">Captcha</label>
    <div class="col-sm-6 champ">
      <h6> Captcha à rajouter après </h6>
    </div>
  </div>
  <input type="submit" class="btn" id="submitpage">
</form>

我的 jQuery 脚本：

$(document).ready(function(){

    $("#submitpage").click(function(e){
        e.preventDefault();

        $.ajax({
            type: "POST",
            url: 'sendform.php',
            data: {
                societe : $("#societepage").val(),
                adresse : $("#adressepage").val(),
                codepostaletville : $("#codepostaletvillepage").val(),
                contact : $("#contactpage").val(),
                telephone : $("#telephonepage").val(),
                mail : $("#mailpage").val(),
                marqueclient : $("#selecmarque").val(),
                modeleclient : $("#choixmodelepage").val(),
                typeclient : $("#choixtypepage").val(),
                commentaire : $("#commentairepage").val()
            },
            dataType: "json",
            success: function (data)
            {
                // data = JSON object that contact.php returns
                // we recieve the type of the message: success x danger and apply it to the
                var messageAlert = 'alert-' + data.type;
                var messageText = data.message;

                // let's compose Bootstrap alert box HTML
                var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>';

                // If we have messageAlert and messageText
                if (messageAlert && messageText) {
                    // inject the alert to .messages div in our form
                    $('#contactformpage').find('.messages').html(alertBox);
                    // empty the form
                    $('#contactformpage')[0].reset();
                }
            }
        })
    });
});

我的 PHP 脚本在请求完成后返回 JSON 数据：

<?php
/*
THIS FILE USES PHPMAILER INSTEAD OF THE PHP MAIL() FUNCTION
AND ALSO SMTP TO SEND THE EMAILS
 */
use PHPMailer\PHPMailer\Exception;
use PHPMailer\PHPMailer\PHPMailer;

require 'PHPMailer/PHPMailer-master/src/PHPMailer.php';
require 'PHPMailer/PHPMailer-master/src/Exception.php';
require 'PHPMailer/PHPMailer-master/src/SMTP.php';
require 'PHPMailer/PHPMailer-master/src/OAuth.php';
require 'PHPMailer/PHPMailer-master/src/POP3.php';
/*
 *  CONFIGURE EVERYTHING HERE
 */
// an email address that will be in the From field of the email.
$fromEmail = 'lyes.tifoun@hotmail.fr';
$fromName = 'Demo contact form';

// an email address that will receive the email with the output of the form
$sendToEmail = 'lyestfn@gmail.com';
$sendToName = 'Lyes Tifoun';
// subject of the email
$subject = 'New message from contact form';

// smtp credentials and server

$smtpHost = 'smtp.gmail.com';
$smtpUsername = 'nom_utilisateur';
$smtpPassword = 'mdp';

$fields = array('societe' => 'Société', 'adresse' => 'Adresse', 'codepostaletville' => 'Code postal et ville', 'contact' => 'Nom du contact', 'téléphone' => 'Numéro de téléphone', 'mail' => 'Adresse mail', 'marque' => 'Marque du véhicule', 'modele' => 'Modèle du véhicule', 'type' => 'Type du véhicule', 'commentaire' => 'Commentaire');

$okMessage = 'Contact form successfully submitted. Thank you, I will get back to you soon!';

$errorMessage = 'There was an error while submitting the form. Please try again later';

error_reporting(E_ALL & ~E_NOTICE);
try {
    if (count($_POST) == 0) {
        throw new \Exception('Form is empty');
    }

    $emailTextHtml = "<h1>You have a new message from your contact form</h1><hr>";
    $emailTextHtml .= "<table>";

    foreach ($_POST as $key => $value) {
        // If the field exists in the $fields array, include it in the email
        if (isset($fields[$key])) {
            $emailTextHtml .= "<tr><th>$fields[$key]</th><td>$value</td></tr>";
        }
    }
    $emailTextHtml .= "</table><hr>";
    $emailTextHtml .= "<p>Have a nice day,<br>Best,<br>Ondrej</p>";

    $mail = new PHPMailer;
    $mail->isSMTP();
    $mail->SMTPDebug = 1;
    $mail->SMTPAuth = true;
    $mail->SMTPSecure = 'tls';
    $mail->Host = gethostbyname($smtpHost);
    $mail->Port = 587;
    $mail->isHTML(true);
    $mail->SMTPOptions = array('ssl' => array('verify_peer' => false, 'verify_peer_name' => false, 'allow_self_signed' => true));
    $mail->Username = $smtpUsername;
    $mail->Password = $smtpPassword;
    $mail->setFrom($fromEmail, $fromName);
    $mail->addAddress($sendToEmail, $sendToName); // you can add more addresses by simply adding another line with $mail->addAddress();
    $mail->addReplyTo($from);

    $mail->Subject = $subject;
    $mail->Body = 'test'; //$emailTextHtml;
    $mail->msgHTML($emailTextHtml); // this will also create a plain-text version of the HTML email, very handy

    $mail->Debugoutput = 'html';

    if (!$mail->send()) {
        throw new \Exception('I could not send the email.' . $mail->ErrorInfo);
    }

    $responseArray = array('type' => 'success', 'message' => $okMessage);
} catch (\Exception $e) {
    // $responseArray = array('type' => 'danger', 'message' => $errorMessage);
    $responseArray = array('type' => 'danger', 'message' => $e->getMessage());
}
// if requested by AJAX request return JSON response
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    $encoded = json_encode($responseArray);
    header('Content-Type: application/json');

    echo $encoded;
}
// else just display the message
else {
    echo $responseArray['message'];
}

非常感谢您的回复，并为我糟糕的英语感到抱歉。

标签： javascriptphpjqueryajaxforms

解决方案

推荐阅读