Question

我有一个php + jquery + HTML联系表单。表单div隐藏在index.HTML中，直到联系按钮被按下.Jquery工作，Ajax调用帖子需要数据到php，这回应了一个响应。问题是什么时候php回声，而不是在没有刷新的情况下保留在同一页面上，浏览器重定向到contact.php，其中回显正确显示。我认为Ajax部分无法捕获来自服务器的响应，尽管语法在所有教程中都是相同的。请协助。 HTML部分：

HTML

<div id = 'contact_form'>
    <div id = 'result'></div>
        <form id="contactform" action="js/contact.php" method="POST"  enctype="multipart/form-data">
            <div class="row">
                <input id="name" class="input" name="name" type="text" required = 'true' value="" size="30" placeholder='Nome'/>
            </div>

            <div class="row">
                <input id="email" class="input" name="email" type="text" required = 'true' value="" size="30" placeholder = 'Email'/>
            </div>

            <div class="row">
                <textarea id="message" class="input" name="message" rows="7" cols="50" required = 'true' placeholder = 'Messagio'></textarea>
            </div>

            <input id="submit_button" class = 'myButton' type="submit" value="Manda messagio" />
        </form>
    </div>                      
</div>

JS

$('#submit_btn').click(function(){
    var user_name = $("input#name").val();

    if (user_name == "") {
        $("input#name").focus().addClass('active');
        return false;
     }

    var user_email = $("input#email").val();

    if (!$("input#email").val().match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/)) {
            $("input#email").focus().addClass('active');
            return false;
     }

     var msg = $("textarea#message").val();

    if (message == "") {
        $("textarea#message").focus().addClass('active');
        return false;
     }

     var dataString = 'name='+ user_name + '&email=' + user_email +'message = ' + msg;
    //alert (dataString);return false;


    // Send the request
    $.ajax({
        type: "POST",
        url: "contact.php",
        data: dataString,
        success: function(d) {
            console.log(d);
        }
    });

    return false;
});

PHP

<?php
    $toEmail = "x@gmail.com";
    $subject = "dal tuo sito ";
    $mailHeaders = "From: " . $_POST["name"] . "<". $_POST["email"] .">\r\n";

    if(mail($toEmail,$subject,$_POST["message"], $mailHeaders)) {
        echo "Mail Sent";
    } else {
        echo "Problem in Sending Mail";
    }
?>

Answer 1

因为您使用了提交类型输入，所以我建议您更改按钮之类的链接的提交输入。并从表单中删除action attr：

<强> HTML

<a href="javascript:;" id="btn">Send</a>

<强> JS

<script>
    $('#btn').on("click", function(){
        //Your ajax here
        //var dataString = 'name='+ user_name + '&email=' + user_email +'message = ' + msg;
       //alert (dataString);return false;
       // Send the request
       $.ajax({
          type: "POST",
          url: "contact.php",
          data: {name: user_name, email: user_email, message: msg}
       }).done(function(response){
          console.log(response);
       });   
    });
</script>

Answer 2

如果你想保持相同的按钮，你可以改变你的js。

＆＃13;

$('#submit_btn').click(function(e){
  e.preventDefault();
//YOUR CODE HERE  
}

＆＃13;

jquery ajax联系表单重定向到contact.php而不是捕获php echo并执行sucess函数

2 个答案: