Php表单提交没有刷新- Ajax不工作 - Php Form Submit without Refresh - Ajax not working

我想让我的表单提交没有页面刷新每次

然而，当我插入ajax和php到一个新的文件的形式不提交，我不明白为什么?

任何建议将不胜感激!

PHP

<?php
if(isset($_POST['name'], $_POST['email'], $_POST['phone'], $_POST['message'])){
    //Post data
    $name = $_POST['name'];
    $email = $_POST['email'];
    $phone = $_POST['phone'];
    $message = $_POST['message'];
    //mail settings
    $to = "arshdsoni@gmail.com";
    $subject = 'Soni Repairs - Support Request';
    $body = <<<EMAIL
Hi There!
My name is $name.
Message: $message.
My email is: $email
Phone Number: $phone
Kind Regards
EMAIL;
    $header = "From: $email";
    if($_POST) {
        if($name == '' || $email == '' || $phone == '' || $message == '') {
            echo $feedback = "<font color='red'> *Please Fill in All Fields!";
        }
        else {
            mail($to, $subject, $body, $header);
            echo $feedback = "<font color='green'> *Message sent! You will receive a reply shortly!";
        }
    }
}
else{
    echo $feedback = "<font color='red'> Missing Params";
}
?>

<script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
            $(document).ready(function(){
                $("#submitBtn").click(function( event ) {
                    //values
                    var name=document.getElementById('name').value;
                    var email=document.getElementById('email').value;
                    var phone=document.getElementById('phone').value;
                    var message=document.getElementById('message').value;
                    var occasion=document.getElementById('occasion').value;
                    var dataString = $("#contact").serialize();
                    $.ajax({
                        type:"post",
                        url:"php.php",
                        data: dataString,
                        success: function(html) {
                            $('#feedback').html(html);
                        }
                    });
                  event.preventDefault();
                });
            });
        </script>

HTML代码:http://www.codeply.com/go/e3jAo1WrPl

.bind()函数可能是处理此表单的方式，因为它将单击按钮的操作绑定到事件处理程序。

在ajax调用之前使用event.preventDefault()也可能是有益的。

            $(document).ready(function(){
            $("#submitBtn").bind([boundElement],function( event ) {
                event.preventDefault();
                var name=document.getElementById('name').value;
                var email=document.getElementById('email').value;
                var phone=document.getElementById('phone').value;
                var message=document.getElementById('message').value;
                var occasion=document.getElementById('occasion').value;
                var dataString = $("#contact").serialize();
                $.ajax({
                    type:"post",
                    url:"php.php",
                    data: dataString,
                    success: function(html) {
                        $('#feedback').html(html);
                    }
                });
             return true;
            });
        });

我建议仔细检查.bind()参数中绑定元素的语法。它是引用命名表单元素的单引号示例HTML:

这可能有助于解决您的问题:

$(document).ready(function() {
    $("#contact").submit(function(event) {
        event.preventDefault();
        var name       = $('#name').val(),
            email      = $('#email').val(),
            phone      = $('#phone').val(),
            message    = $('#message').val(),
            occasion   = $('#occasion').val(),
            dataString = $(this).serialize();
        $.ajax({
            url: 'php.php',
            type: 'post',
            data: dataString,
        })
        .done( function( html ) {
            $( '#feedback' ).html( html );
        })
        .fail( function( response ) {
            console.log( response );
        });
    });
});

首先，你有表单和提交按钮，所以当你按下按钮，事件'提交'被触发，所以你防止事件被触发，然后你做你的编码，变量，但我不明白为什么你声明所有这些，如果你不使用它们，但这取决于你。

这是一个使用按钮代替提交的建议。我注释掉了preventDefault，因为它在这种情况下是不必要的——我们实际上并没有提交表单。这给我们更多的控制。

请求被提交。在这种情况下，它显然失败了。在您的情况下，它是否失败将取决于您在服务器端所做的事情。

http://plnkr。有限公司/编辑/txuxaFUkgFq9SFDcqUdp

<form action="http://www.yahoo.com" id="contactForm" method="get" target="_blank">
    <div class="innerForm">
        <label for="name">Name:</label>
        <input id="name" name="name" type="text" />
        <label for="phone">Phone:</label>
        <input id="phone" name="phone" type="text" />
        <label for="email">Email:</label>
        <input id="email" name="email" type="text" />
        <label for="occasion">Occasion:</label>
        <input id="occasion" type="text" name="occasion" />
        <label id="messageLabel" for="message">Message:</label>
        <textarea id="message" name="message"></textarea>
        <button id="test">test</button>
        <!--input type="submit" value="Submit" id="submitBtn" name="submit" onclick="return chk();"/ -->
    </div>
    <div id="feedback"></div>
</form>
$(document).ready(function(){
    $("#test").click(function (event) {
      //values
      alert("test clicked");
      var name = document.getElementById('name').value;
      var email = document.getElementById('email').value;
      var phone = document.getElementById('phone').value;
      var message = document.getElementById('message').value;
      var occasion = document.getElementById('occasion').value;
      var dataString = $("#contactForm").serialize();
      $.ajax({
          type: "get",
          url: "http://www.yahoo.com",
          data: dataString,
          success: function (html) {
              alert("success");
              //$('#feedback').html(html);
          },
          error: function(result){
              alert("failure");
          }
      });
      //event.preventDefault();
  });
});