Fatal编程技术网
  • javascript/
  • Javascript 无法使用Jquery Ajax在HTML页面上打印成功消息

Javascript 无法使用Jquery Ajax在HTML页面上打印成功消息

javascript php jquery html ajax

Javascript 无法使用Jquery Ajax在HTML页面上打印成功消息,javascript,php,jquery,html,ajax,Javascript,Php,Jquery,Html,Ajax,我创建了一个联系人表单，通过它我将发布这些数据并返回成功消息。我能够成功发布数据，但无法在表单上显示成功或失败消息。 下面是我的代码： Contact.php： <?php ini_set('display_errors','On'); error_reporting(E_ALL); $name=$_POST['name']; $phone=chop($_POST['element_4_1']); $phone.=chop($_POST['element_4_2']); $phone

我创建了一个联系人表单，通过它我将发布这些数据并返回成功消息。我能够成功发布数据，但无法在表单上显示成功或失败消息。
下面是我的代码： Contact.php：

<?php

ini_set('display_errors','On');
 error_reporting(E_ALL);

$name=$_POST['name'];
$phone=chop($_POST['element_4_1']);
$phone.=chop($_POST['element_4_2']);
$phone.=chop($_POST['element_4_3']);
$email=chop($_POST['email']);
$message1=chop($_POST['input4']);

if ($name && $phone && $email) { 

$headers  = "MIME-Version: 1.0\r\n";
$headers .= "Content-type: text/plain; charset=iso-8859-1\r\n";
$headers .= "From: sales@test.in \n";
$recipient= "test@test.in";



$subject="Online Enquiry  ";


$message.="\nName                   : $name\n";

 $message.="\nPhone                  : $phone\n";

 $message.="\nEmail ID               : $email\n";

 $message.="\nMessage                : $message1\n";


 //send auto-reply
$subject_reply="Thank you for contacting Rugs of India";
$message_reply="Thank you for contacting us. We will get back to you shortly.";
mail($email, $subject_reply, $message_reply, $headers);



 //Send Mail
//===========
if(mail($recipient, $subject, $message, $headers)) {
    echo $message_reply;
} else {
echo "There was an error. Please try again.";
} 
}

?>
Contactus.html

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>

        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" /> 
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /> 
        <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
        <link rel="stylesheet" type="text/css" href="css/coder.css"/>
        <style  type="text/css">
.bg-color{
background-color:#F9F1E4;
border-radius:5px;
margin:5px;
}
.row_color{
border:2px solid #A40F17;
margin:0px;
}
.footer_class{
background-color:#A40F17;
height:40px;
}
.font_color{
color:#fff;
margin-top:5px;
}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
    background-color: #A40F17;
    color: #FFFFFF;
}
.h_color{
background-color:#FFFFFF;
}
.danger{
color:#A40F17;
}
.h_top{
margin-top:30px;
}
.h_height{

height:173px;
}


input.text:focus {
  border-color: #66afe9 !important;

  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
} 
input.text:required {
box-shadow: none; /* Firefox (tested v6) adds red shadow by default */
}


</style>
   <script type="text/javascript" 
   src="http://code.jquery.com/jquery-1.3.2.min.js">
</script>
<script>
$(document).ready(function(){
console.log( "ready!" );
  $("#button").click(function(){
console.log("ready2");

                  $.ajax({

                    url: './contact.php',
                    type: "POST",
                    data: {
                        "name": $("#name").val(),
                        "element_4_1": $("#element_4_1").val(),
                        "element_4_2": $("#element_4_2").val(),
                        "element_4_3": $("#element_4_3").val(),
                        "email": $("#email").val(),
                        "input4": $("#input4").val(),

                    },                    
                   success: function(data){
                    $("#stage").text(data);

                    }

                });
  });
});
</script>

    </head>
    <body>
        <header>
    <div class="row h_color h_height">
    <div class="container">

    </div>
    <nav class="navbar navbar-inverse">
            <div class="container">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeader">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div class="collapse navbar-collapse navHeader">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="aboutus.html">About Us</a></li>
                        <li><a href="products.html">Products</a></li>
                        <li><a href="gallery.html">Gallery</a></li>
                        <li class="active"><a href="contactus.html">Contact Us</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

    <div class="container" style="background-color:#fff;">
        <div class="row">
            <div class="col-lg-12">
<div id="stage">

   </div>
                    <h3>Contact Us</h3>

                    <div class="col-lg-7 well">
<form class="contact-form">


                        <h4 style="padding-top:8px;">Your email address will not be published. Required fields are marked <font color="red">*</font></h4>
                            <label>Name<font color="red">*</font></label><br>
                            <input class="form-control" style="height:35px;width:230px;border-radius:4px;" required type="text" name="name" id="name"/><br>
                            <label>Phone<font color="red">*</font></label><br>


        <span>

            <input id="element_4_1" name="element_4_1" class="element text" size="3" maxlength="3" value=""  type="text"> -

        </span>
        <span>
            <input id="element_4_2" name="element_4_2" class="element text" size="4" maxlength="4" value="" type="text"> -

        </span>
        <span>
            <input id="element_4_3" name="element_4_3" class="element text" size="10" maxlength="10" value=""  type="text" required >

        </span>

<br><br>
                            <label>Email<font color="red">*</font></label><br>
                            <input id="email" class="form-control" style="height:35px;width:230px;border-radius:4px;" required type="email" name="text"/><br>
                            <label for="input4">Message</label>
                            <textarea name="contact_message" class="form-control" rows="4" id="input4"></textarea>
                            <p>&nbsp;</p>
                            <button type="submit" style="margin-left:65px;"class="btn btn-large btn-info" id="button">Submit</button>
</form>

                    </div>


            </div>



        </div>
    </div>  
    <footer>
    <div class="row footer_class">
        <div class="container">

        </div>
    </div>
</footer>
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="js/bootstrap.js"></script>
    </body>
</html>


.bg颜色{
背景色：#F9F1E4；
边界半径：5px；
保证金：5px；
}
.row_颜色{
边框：2个实心#A40F17；
边际：0px；
}
.footer_类{
背景色：#A40F17；
高度：40px；
}
.font\u颜色{
颜色：#fff；
边缘顶部：5px；
}
.navbar inverse.navbar nav>.active>a、.navbar inverse.navbar nav>.active>a:hover、.navbar inverse.navbar nav>.active>a:focus{
背景色：#A40F17；
颜色：#FFFFFF；
}
.h_颜色{
背景色：#FFFFFF；
}
.危险{
颜色：#A40F17；
}
h_top{
边缘顶部：30px；
}
.h_高度{
高度：173像素；
}
输入文本：焦点{
边框颜色：#66afe9！重要；
大纲：0；
-webkit盒阴影：插入0 1px 1px rgba（0,0,0,075），0 0 8px rgba（102,175,233,0.6）；
盒影：插入0 1px 1px rgba（0,0,0,075），0 0 8px rgba（102,175,233,0.6）；
} 
输入。文本：必填{
框阴影：无；/*Firefox（测试版本v6）默认添加红色阴影*/
}
$（文档）.ready（函数（）{
console.log（“准备就绪！”）；
$（“#按钮”）。单击（函数（）{
console.log（“ready2”）；
$.ajax({
url:“./contact.php”，
类型：“POST”，
数据：{
“名称”：$（“#名称”）.val（），
“element_4_1”：$（“#element_4_1”）.val（），
“element_4_2”：$（“#element_4_2”）.val（），
“element_4_3”：$（“#element_4_3”）.val（），
“电子邮件”：$（“#电子邮件”）.val（），
“input4”：$（“#input4”）.val（），
},                    
成功：功能（数据）{
$（“#阶段”）。文本（数据）；
}
});
});
});

    

  • 

  • 

  • 

  • 

  • 


联系我们
您的电子邮件地址将不会发布。已标记必填字段*
名称*



电话*

-
-



电子邮件*



消息


提交
当我提交表单时，页面将刷新，但没有显示成功消息。我如何更正此问题。

看起来您正在将AJAX成功回调设置为$（“#stage”）.text（数据）；但是你没有身份证阶段的DIV。加

<div id="stage"></div>
您希望消息显示的位置。

您的代码中有一个小错误。我做了矫正

<?php
ini_set('display_errors','On');
 error_reporting(E_ALL);

$name=$_POST['name'];
$phone=chop($_POST['element_4_1']);
$phone.=chop($_POST['element_4_2']);
$phone.=chop($_POST['element_4_3']);
$email=chop($_POST['email']);
$message1=chop($_POST['input4']);


if ($name && $phone && $email) { 

$headers  = "MIME-Version: 1.0\r\n";
$headers .= "Content-type: text/plain; charset=iso-8859-1\r\n";
$headers .= "From: sales@test.in \n";
$recipient= "test@test.in";



$subject="Online Enquiry  ";


$message ="\nName                   : $name\n";

 $message.="\nPhone                  : $phone\n";

 $message.="\nEmail ID               : $email\n";

 $message.="\nMessage                : $message1\n";


 //send auto-reply
$subject_reply="Thank you for contacting Rugs of India";
$message_reply="Thank you for contacting us. We will get back to you shortly.";
mail($email, $subject_reply, $message_reply, $headers);



 //Send Mail
//===========
if(mail($recipient, $subject, $message, $headers)) {
    echo $message_reply;
} else {
  echo "There was an error. Please try again.";
} 
}

?>
$message变量中存在错误。它没有定义

还有一件事你的表单点击执行破坏你的验证。它不是在验证您的表单。请确保您的验证正确无误。您可以替换上述代码

在脚本中做了一些更改

 <script>
   $(document).ready(function(){
    console.log( "ready!" );
     $("#button").click(function(e){
       e.preventDefault();
       console.log("ready2");

                  $.ajax({

                    url: './contact.php',
                    type: "POST",
                    data: {
                        "name": $("#name").val(),
                        "element_4_1": $("#element_4_1").val(),
                        "element_4_2": $("#element_4_2").val(),
                        "element_4_3": $("#element_4_3").val(),
                        "email": $("#email").val(),
                        "input4": $("#input4").val(),

                    },                    
                   success: function(data){
                    $("#stage").text(data);

                    }

                });
  });
});
</script>


$（文档）.ready（函数（）{
console.log（“准备就绪！”）；
$（“#按钮”）。单击（功能（e）{
e、 预防默认值（）；
console.log（“ready2”）；
$.ajax({
url:“./contact.php”，
类型：“POST”，
数据：{
“名称”：$（“#名称”）.val（），
“element_4_1”：$（“#element_4_1”）.val（），
“element_4_2”：$（“#element_4_2”）.val（），
“element_4_3”：$（“#element_4_3”）.val（），
“电子邮件”：$（“#电子邮件”）.val（），
“input4”：$（“#input4”）.val（），
},                    
成功：功能（数据）{
$（“#阶段”）。文本（数据）；
}
});
});
});
将“$”（“#stage”）.text（数据）；”更改为“$”（“#stage”）.text（数据）；alert（数据）；“您是否收到包含预期消息的消息框？我看不到任何警报框SUCCESS永远不会触发。您可以打开浏览器控制台（F12）并转到控制台，然后完成整个过程以查看是否出现任何错误吗？使用firebug，我可以看到您应该能够。在整个流程中运行时，您是否看到任何JS错误？