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

Может ли кто-нибудь сказать мне, почему этот бит кода не работает?Форма отправить с помощью 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, но он просто не получает данные. Какие-либо предложения? Я предполагаю, что это как-то связано с кнопкой отправки, но я не могу понять это

источник

2013-05-17 GlassHalfAwesome

сделал u try event.preventDefault() вместо возврата false – underscore

также не использовать событие отправки.используйте событие CLICK – underscore

Вам не нужно использовать type = "submit" вместо type = "button"? –

Форма отправляется после запроса 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>

источник

2013-05-17 19:12:51

должен использовать 'preventDefault в первой строке' события' on ('submit' ... ' – PSyLoCKe

@EASI. Это не проблема. $. Ajax part work along Так что это не проблема – underscore

Это сделало трюк! так что я знал, что что-то не так с кнопкой, но у меня не было ни малейшего понятия о preventDefault – GlassHalfAwesome

<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; 
?>

источник

2013-05-17 19:13:19 underscore

["Возврат false из обработчика события будет автоматически вызывать event.stopPropagation() и event.preventDefault()"] (http: // api .jquery.com/on /) – ocanal

Маленькая ошибка во втором «if»: она должна быть «if (isset ($ _ POST ['date»])) {$ date = $ _ POST [' date ']} " – Fil

type="button "

должен быть

type="submit"

источник

2013-05-17 19:22:19 Amir

Вот хороший плагин для 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>

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

источник

2013-05-17 19:31:26

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

<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 { } 

?>

Взятые От Here

источник

2014-01-18 04:40:15

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 Form

<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="[email protected]" 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 = "[email protected]"; //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/

источник

2015-12-20 09:28:20

В случае обработки, передать объект события в функции и затем добавьте инструкцию, то есть event.preve ntDefault();

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

источник

2016-06-29 08:44:31 user5206635

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

ответ

Смежные вопросы