Javascript 使用ajax将php响应发布到div中不起作用

嗨，我目前正在做一个项目。当用户提交表单时，它会将响应加载到div中，而不是加载新页面。我看过其他与PHP online一起工作的ajax表单示例，但它没有帮助我解决问题。（我对这件事不太熟悉）

当我单击submit时，它不会将响应发布到同一页面并向所选的电子邮件地址发送电子邮件，而是将我带到php文件并在那里回显响应，但不会发送任何电子邮件

有人能看出哪里出了问题吗

表格编号：

<form name="contactform" id="contact-form" action="mailer.php">

            <input type="text" class="textbox" name="name" value="Name" required="required" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}">

            <input type="text" class="textbox" name="email" value="Email" required="required" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}">

            <textarea name="message" value="Message:" required="required" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Message';}">Message</textarea>

           <input type="submit" value="Send Now">

</form>
                    <div id="response"></div>

消息

Javascript代码：

<script>
 $("#contactform").submit(function(event) 
 {
     /* stop form from submitting normally */
     event.preventDefault();

     /* get some values from elements on the page: */
     var $form = $( this ),
         $submit = $form.find( 'button[type="submit"]' ),
         name_value = $form.find( 'input[name="name"]' ).val(),
         email_value = $form.find( 'input[name="email"]' ).val(),
         message_value = $form.find( 'textarea[name="message"]' ).val(),
         url = $form.attr('action');

     /* Send the data using post */
     var posting = $.post( url, { 
                       name: name_value, 
                       email: email_value, 
                       message: message_value 
                   });

     posting.done(function( data )
     {
         /* Put the results in a div */
         $( "#response" ).html(data);

     });
});
</script>

$（“#联系人表单”）。提交（功能（事件）
{
/*阻止表单正常提交*/
event.preventDefault（）；
/*从页面上的元素获取一些值：*/
var$form=$（此），
$submit=$form.find（'button[type=“submit”]'），
name_value=$form.find（'input[name=“name”]”）。val（），
email_value=$form.find（'input[name=“email”]”）。val（），
message_value=$form.find（'textarea[name=“message”]”）。val（），
url=$form.attr（'action'）；
/*使用post发送数据*/
var posting=$.post（url，{
name:name_值，
email:email_值，
消息：消息值
});
过帐.完成（功能（数据）
{
/*将结果放入div中*/
$（“#响应”）.html（数据）；
});
});

PHP代码：（我的PHP存储在一个名为mailer.PHP的单独文件中）我试图将PHP$response变量发回并放入response div中

<?php


    // Get the form fields and remove whitespace.
    $name = $_POST["name"];
    $email = $_POST["email"];
    $message = $_POST["message"];

    $to = "your-emailaddresshere@email.com";
    $subject = "New DPS Email from $name";

    // Build the email content.
    $email_content = "Name: $name\n";
    $email_content .= "Email: $email\n\n";
    $email_content .= "Message:\n$message\n";

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

    $mailed = (mail($to, $subject, $email_content, $email_headers));

    if( isset($_POST['ajax']) )
    $response = ($mailed) ? "1" : "0";
    else
    $response = ($mailed) ? "<h2>Thank You! Your message has been sent.</h2>" : "<h2>Oops! Something went wrong and we couldn't send your message.</h2>";

    echo $response; 

?>

---

这是因为您调用的是post函数，而不是ajax

试试这个：

$.ajax({
   url: <your_url>,
   type:'GET',
   data: {'name': name_value, 'email' : email_value, 'message': message_value},
   success: function(data){
        yourdivcontent =  eval(data)
        $( "#response" ).html(yourdivcontent);
   }, 
   error: function(){
        console.log("error");
   }
})

$.ajax({
网址：，
类型：'GET'，
数据：{'name'：name\u value，'email'：email\u value，'message'：message\u value}，
成功：功能（数据）{
yourdivcontent=eval（数据）
$（“#响应”）.html（内容）；
}, 
错误：函数（）{
控制台日志（“错误”）；
}
})

在php函数中，只需将响应编码为json

---

返回json_encode（响应）

echo json\u encode（$response）

在php函数的末尾纠正此错误并报告发生的情况

您的表单ID为“联系人表单”，您的JQ选择器已设置为“联系人表单”

到

以下是您可以做的： 表格代码

<form name="contactform" id="contact-form">
    <!--Your form elements here -->
</form>

javascript代码（使用#contact form而不是#contact form）

$（“#联系方式”）。提交（功能（事件）
{
/*阻止表单正常提交*/
event.preventDefault（）；
/*从页面上的元素获取一些值：*/
var$form=$（此），
$submit=$form.find（'button[type=“submit”]'），
name_value=$form.find（'input[name=“name”]”）。val（），
email_value=$form.find（'input[name=“email”]”）。val（），
message_value=$form.find（'textarea[name=“message”]”）。val（），
url='你的url'在这里'；
/*使用post发送数据*/
var posting=$.post（url，{
name:name_值，
email:email_值，
消息：消息值
});
过帐.完成（功能（数据）
{
/*解析JSON*/
var response=JSON.parse（数据）；
$（“#response”）.html（response.msg）；
});
});

您的PHP代码：

<?php


// Get the form fields and remove whitespace.
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];

$to = "your-emailaddresshere@email.com";
$subject = "New DPS Email from $name";

// Build the email content.
$email_content = "Name: $name\n";
$email_content .= "Email: $email\n\n";
$email_content .= "Message:\n$message\n";

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

$mailed = mail($to, $subject, $email_content, $email_headers);

if( $mailed )
$response = json_encode(array("status"=>true,"msg"=>"<h2>Thank You! Your message has been sent.</h2>"));
else
$response = json_encode(array("status"=>false,"msg"=>"<h2>Oops! Something went wrong and we couldn't send your message.</h2>"));

echo $response; 

?>

---

您是否在broswer的控制台中查找错误？您在$.post中有var url。愚蠢的问题，但我猜在代码的其他地方设置了php的urlscript@Y.Hermes我试过了，但不幸的是，它似乎并没有改变现状outcome@IWebb我不确定它是否真的正常工作，但它应该从表单上的action变量获取php脚本的url。我刚刚意识到我的帖子中没有包含这个，现在我会更新它。我知道这个网站是关于JQuery插件的，但是有一个很好的章节介绍了如何在chrome中调试ajax请求。诊断位是所有ajax请求的有趣位感谢您的评论，无论出于何种原因，我在“数据：{'name'：name_值，'email'：email_值，'message'：message_值}”这一行上得到一个错误，并假设您在其中放置了您的内容，这需要替换为我从php mailer脚本传回的变量？最后，如果我是JSON_编码，我需要解码吗？对于所有的问题，我很抱歉，我只是对这一点非常陌生，并且试图理解每个部分在做什么我忘记了在ajax调用中添加“type”值。。我编辑了我的答案。是的，您必须将变量放入div中。由于某种原因，数据将返回一个json字符串，它不断给我带来意外的令牌错误。你知道是什么原因造成的吗？提前感谢您取消引用数据行，如以下数据：{name:name\u value，等等}不幸的是，这只是在php页面上重复了它，仍然非常感谢，这似乎是让它发布到div的答案！总是打字错误！由于某种原因，它仍然没有发送电子邮件：谢谢！这比我的原始代码更好，它对消息进行编码和解码，然后将其发布到数组中。我唯一的问题是，让电子邮件真正发送出去。虽然我想知道这是否是因为我使用cloud 9 iDWelcome@hipArray。对于邮件问题，您可以与您的托管提供商进行检查
<form name="contactform" id="contact-form">
    <!--Your form elements here -->
</form>

<script>
$("#contact-form").submit(function(event) 
{
 /* stop form from submitting normally */
 event.preventDefault();

 /* get some values from elements on the page: */
 var $form = $( this ),
     $submit = $form.find( 'button[type="submit"]' ),
     name_value = $form.find( 'input[name="name"]' ).val(),
     email_value = $form.find( 'input[name="email"]' ).val(),
     message_value = $form.find( 'textarea[name="message"]' ).val(),
     url = 'your_url_here';

 /* Send the data using post */
 var posting = $.post( url, { 
                   name: name_value, 
                   email: email_value, 
                   message: message_value 
               });

 posting.done(function( data )
 {
     /* Parse JSON */
     var response = JSON.parse(data);
     $("#response").html(response.msg);

    });
 });
</script>

<?php


// Get the form fields and remove whitespace.
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];

$to = "your-emailaddresshere@email.com";
$subject = "New DPS Email from $name";

// Build the email content.
$email_content = "Name: $name\n";
$email_content .= "Email: $email\n\n";
$email_content .= "Message:\n$message\n";

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

$mailed = mail($to, $subject, $email_content, $email_headers);

if( $mailed )
$response = json_encode(array("status"=>true,"msg"=>"<h2>Thank You! Your message has been sent.</h2>"));
else
$response = json_encode(array("status"=>false,"msg"=>"<h2>Oops! Something went wrong and we couldn't send your message.</h2>"));

echo $response; 

?>