反馈表 jQuery returns 无数据

Question

我有一个 html 页面，其中包含对 php 文件的 ajax 查询。这个 php 文件应该发送一条消息，然后提供对 ajax 查询的响应。但是，无论我做什么，我都无法从这个 ajax 调用中得到任何响应。我做错了什么？

HTML:

<form id="feedback-form" method="post">
<table border="0" cellpadding="3">
<tr>
<td><h4>Name: </h4></td>
<td><input type="text" id="name"></input></td>
</tr>
<tr>
<td><h4>Company: </h4></td>
<td><input type="text" id="company_name"></input></td>
</tr>
<tr>
<td><h4>Email: </h4></td>
<td><input type="text" id="email"></input></td>
</tr>
<tr>
<td><h4>Feedback Category: </h4></td>
<td>
<select id="category">
<option class="placeholder" selected disabled>Select Category</option>
<option value="website">Site Issue</option>
<option value="content">Content Issue</option>
<option value="suggestion">Content Suggestion</option>
</select>
</td>
</tr>
<tr>
<td><h4>Message: </h4>(include as much detail as possible)</td>
<td><textarea id="message" style="resize: none;" rows="5"></textarea></td>
</tr>
<tr>
<td><h4>Attachment: </h4>(include any material relevant to your request)</td>
<td><input type="file" id="files" multiple></input></td>
</tr>
<tr>
<td><input type="submit" value="Send"></input></td>
</tr>
</table>
</form>
<span id="feedbackResponse"></span>

JS:

$('#feedback-form').on('submit', function (e) {
          e.preventDefault();

          $.ajax({
            type: 'POST',
            url: '/RK/sendFeedback.php',
            data: $('#feedback-form').serialize(),
            success: function (response) {
              $('#feedbackResponse').html(response);
        },
            error: function (response) {
              $('#feedbackResponse').html(response);
            }
          });

        });

PHP:

<?php
require '/RK/PHPMailerAutoload.php';

$mail = new PHPMailer;

$mail->isSMTP();                                      // Set mailer to use SMTP
$mail->Host = '******.100';                       // Specify main and backup server
$mail->SMTPAuth = true;                               // Enable SMTP authentication
$mail->Username = 'email@email.com';                   // SMTP username
$mail->Password = 'password';               // SMTP password
$mail->SMTPSecure = 'tls';                            // Enable encryption, 'ssl' also accepted
$mail->Port = 587;                                    //Set the SMTP port number - 587 for authenticated TLS
$mail->setFrom('email@email.com', 'DataMotion Wiki');     //Set who the message is to be sent from
$mail->addReplyTo('email@email.com', 'No Reply');  //Set an alternative reply-to address
$mail->addAddress('email@email.com', 'No Reply');  // Add a recipient
$mail->WordWrap = 50;                                 // Set word wrap to 50 characters

$mail->isHTML(true);                                  // Set email format to HTML

$mail->Subject = 'DataMotion Wiki Feedback';
$mail->Body    = '<b>From:</b> '.$_POST['email'].'<br/><b>Category:</b> .$_POST['category'].<br/><b>Message:</b> .$_POST['message']
 echo 'Just before sending';
if(!$mail->send()) {
   echo 'Message could not be sent.';
   echo 'Mailer Error: ' . $mail->ErrorInfo;
   exit;
}

echo 'Thank you for your feedback. Your message has been sent';
?>

Answer 1

也许，你的JS代码放在了表单上面。因此，在这种情况下，您需要将其包装到就绪函数中，因为反馈表单在您的 JS 现在不存在。因此，您的代码正在尝试处理不存在的元素。只有在 DOM 加载

后，Ready 函数才会运行内部的所有内容

所以，这对你有用

$(function(){
        $('#feedback-form').on('submit', function(e) {
            e.preventDefault();
            $.ajax({
                type: 'POST',
                url: 'sendFeedback.php',
                data: $('#feedback-form').serialize(),
                success: function (response) {
                    $('#feedbackResponse').html(response);
                },
                error: function (response) {
                    $('#feedbackResponse').html(response);
                }
            });

        });
    });

此外，将 method="POST" 添加到您的表单中，因为 GET 是 default form method

反馈表 jQuery returns 无数据

Feedback Form jQuery returns no data

php

jquery

html

ajax

phpmailer