Форма отправляет с AJAX, передавая данные формы в PHP без обновления страницы

Может ли кто-нибудь сказать мне, почему этот бит кода не работает?

<html> <head> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script> $(function () { $('form').bind('submit', function () { $.ajax({ type: 'post', url: 'post.php', data: $('form').serialize(), success: function () { alert('form was submitted'); } }); return false; }); }); </script> </head> <body> <form> <input name="time" value="00:00:00.00"><br> <input name="date" value="0000-00-00"><br> <input name="submit" type="button" value="Submit"> </form> </body> </html>

Когда я нажимаю кнопку, ничего не происходит. В принимающем php-файле я использую $ _POST ['time'] и $ _POST ['date'], чтобы поместить данные в запрос mysql, но он просто не получает данные. Какие-либо предложения? Я предполагаю, что это как-то связано с кнопкой отправки, но я не могу понять это

Сериализовать / unserialize PHP-объект-график для JSON

Solutions Collecting From Web of "Форма отправляет с AJAX, передавая данные формы в PHP без обновления страницы"

Форма отправляется после запроса ajax.

 <html> <head> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script> $(function () { $('form').on('submit', function (e) { e.preventDefault(); $.ajax({ type: 'post', url: 'post.php', data: $('form').serialize(), success: function () { alert('form was submitted'); } }); }); }); </script> </head> <body> <form> <input name="time" value="00:00:00.00"><br> <input name="date" value="0000-00-00"><br> <input name="submit" type="submit" value="Submit"> </form> </body> </html>

 <html> <head> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script> $(function () { $('form').bind('click', function (event) { event.preventDefault();// using this page stop being refreshing $.ajax({ type: 'POST', url: 'post.php', data: $('form').serialize(), success: function () { alert('form was submitted'); } }); }); }); </script> </head> <body> <form> <input name="time" value="00:00:00.00"><br> <input name="date" value="0000-00-00"><br> <input name="submit" type="submit" value="Submit"> </form> </body> </html>

PHP

 <?php $time=""; $date=""; if(isset($_POST['time'])){$time=$_POST['time']} if(isset($_POST['date'])){$time=$_POST['date']} echo $time."<br>"; echo $date; ?>

Код JS

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/ libs/jquery/1.3.0/jquery.min.js"> </script> <script type="text/javascript" > $(function() { $(".submit").click(function() { var time = $("#time").val(); var date = $("#date").val(); var dataString = 'time='+ time + '&date=' + date; if(time=='' || date=='') { $('.success').fadeOut(200).hide(); $('.error').fadeOut(200).show(); } else { $.ajax({ type: "POST", url: "post.php", data: dataString, success: function(){ $('.success').fadeIn(200).show(); $('.error').fadeOut(200).hide(); } }); } return false; }); }); </script>

Форма HTML

  <form> <input id="time" value="00:00:00.00"><br> <input id="date" value="0000-00-00"><br> <input name="submit" type="button" value="Submit"> </form> <span class="error" style="display:none"> Please Enter Valid Data</span> <span class="success" style="display:none"> Form Submitted Success</span> </div>

PHP-код

 <?php if($_POST) { $date=$_POST['date']; $time=$_POST['time']; mysql_query("SQL insert statement......."); }else { } ?>

Взятый отсюда

Вот хороший плагин для jQuery, который отправляет формы через ajax:

http://malsup.com/jquery/form/

его просто:

 <script src="http://malsup.github.com/jquery.form.js"></script> <script> $(document).ready(function() { $('#myForm').ajaxForm(function() { alert('form was submitted'); }); }); </script>

Он использует действие форм для местоположения почты. Не то чтобы вы не смогли добиться этого с помощью своего собственного кода, но этот плагин работал очень хорошо для меня!

Код JS

  $("#submit").click(function() { //get input field values var name = $('#name').val(); var email = $('#email').val(); var message = $('#comment').val(); var flag = true; /********validate all our form fields***********/ /* Name field validation */ if(name==""){ $('#name').css('border-color','red'); flag = false; } /* email field validation */ if(email==""){ $('#email').css('border-color','red'); flag = false; } /* message field validation */ if(message=="") { $('#comment').css('border-color','red'); flag = false; } /********Validation end here ****/ /* If all are ok then we send ajax request to email_send.php *******/ if(flag) { $.ajax({ type: 'post', url: "email_send.php", dataType: 'json', data: 'username='+name+'&useremail='+email+'&message='+message, beforeSend: function() { $('#submit').attr('disabled', true); $('#submit').after('<span class="wait">&nbsp;<img src="image/loading.gif" alt="" /></span>'); }, complete: function() { $('#submit').attr('disabled', false); $('.wait').remove(); }, success: function(data) { if(data.type == 'error') { output = '<div class="error">'+data.text+'</div>'; }else{ output = '<div class="success">'+data.text+'</div>'; $('input[type=text]').val(''); $('#contactform textarea').val(''); } $("#result").hide().html(output).slideDown(); } }); } }); //reset previously set border colors and hide all message on .keyup() $("#contactform input, #contactform textarea").keyup(function() { $("#contactform input, #contactform textarea").css('border-color',''); $("#result").slideUp(); });

Форма HTML

 <div class="cover"> <div id="result"></div> <div id="contactform"> <p class="contact"><label for="name">Name</label></p> <input id="name" name="name" placeholder="Yourname" type="text"> <p class="contact"><label for="email">Email</label></p> <input id="email" name="email" placeholder="admin@admin.com" type="text"> <p class="contact"><label for="comment">Your Message</label></p> <textarea name="comment" id="comment" tabindex="4"></textarea> <br> <input name="submit" id="submit" tabindex="5" value="Send Mail" type="submit" style="width:200px;"> </div>

PHP-код

 if ($_SERVER['REQUEST_METHOD'] == 'POST') { //check if its an ajax request, exit if not if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') { //exit script outputting json data $output = json_encode( array( 'type' => 'error', 'text' => 'Request must come from Ajax' )); die($output); } //check $_POST vars are set, exit if any missing if (!isset($_POST["username"]) || !isset($_POST["useremail"]) || !isset($_POST["message"])) { $output = json_encode(array('type' => 'error', 'text' => 'Input fields are empty!')); die($output); } //Sanitize input data using PHP filter_var(). $username = filter_var(trim($_POST["username"]), FILTER_SANITIZE_STRING); $useremail = filter_var(trim($_POST["useremail"]), FILTER_SANITIZE_EMAIL); $message = filter_var(trim($_POST["message"]), FILTER_SANITIZE_STRING); //additional php validation if (strlen($username) < 4) { // If length is less than 4 it will throw an HTTP error. $output = json_encode(array('type' => 'error', 'text' => 'Name is too short!')); die($output); } if (!filter_var($useremail, FILTER_VALIDATE_EMAIL)) { //email validation $output = json_encode(array('type' => 'error', 'text' => 'Please enter a valid email!')); die($output); } if (strlen($message) < 5) { //check emtpy message $output = json_encode(array('type' => 'error', 'text' => 'Too short message!')); die($output); } $to = "info@wearecoders.net"; //Replace with recipient email address //proceed with PHP email. $headers = 'From: ' . $useremail . '' . "\r\n" . 'Reply-To: ' . $useremail . '' . "\r\n" . 'X-Mailer: PHP/' . phpversion(); $sentMail = @mail($to, $subject, $message . ' -' . $username, $headers); //$sentMail = true; if (!$sentMail) { $output = json_encode(array('type' => 'error', 'text' => 'Could not send mail! Please contact administrator.')); die($output); } else { $output = json_encode(array('type' => 'message', 'text' => 'Hi ' . $username . ' Thank you for your email')); die($output); }

Эта страница содержит более простой пример: http://wearecoders.net/submit-form-without-page-refresh-with-php-and-ajax/

type="button "

должно быть

 type="submit"

В обработке событий передайте объект события функции, а затем добавьте оператор ie event.preventDefault ();

Это приведет к передаче данных на веб-страницу без обновления.