Ajax没有将数据传输到php文件

问题描述：

im trying to create a simple registeration page and send data to mysql database . how can i check if data are transfered to php file ? after i click send it does nothing just refresh the page . here the code : index.php

<script src="jquery-2.1.4.min.js"></script>
<h2>Form Registeration With Ajax</h2>
<form method="post" action="" id="form2">
    <input type="text" placeholder="First Name" name="first_name"
        required="" maxlength="20" id="first_name" /><br> <input type="text"
        placeholder="Last Name" name="last_name" required="" maxlength="20"
        id="last_name" /><br> <input type="email" placeholder="Email"
        name="email" required="" maxlength="20" id="email" /><br> <input
        type="password" placeholder="Password" name="password" required=""
        maxlength="20" id="password" /><br> <input type="password"
        placeholder="Repeat Password" name="password2" required=""
        maxlength="20" id="password2" /><br> <input type="text"
        placeholder="country" name="country" maxlength="20" id="country" /><br>
    <input type="submit" value="Send" id="submit_btn" />
</form>
<script>
$(document).ready(function(){
//function send_form() {
    $("#submit_btn").click(function(){
    //alert("inside");
    var first_namet=$('#first_name').val();
    var last_namet=$('#last_name').val();
    var emailt=$('#email').val();
    var passwordt=$('#password').val();
    var countryt=$('#country').val();
    if (passwordt === $('#password2').val())
    {
        $.ajax({
              type: "POST",
              url: process.php,
              data: {
                  first_name: first_namet,
                  last_name: last_namet,
                  email: emailt,
                  password: passwordt,
                  country: countryt},
                  //"first_name="+first_name+"&last_name="+password+"&email="+email+"&password="+password+"&country="country},
              dataType: "html", 
              timeout: 6000,
              success: function (result) {
                if (result.success === 'hello'){
                  console.log(result);
                  alert(result['ajax']);
                } else {
                  console.log('else');
                  alert(result['ajax']);
                }
              }
            });
    }
    else {
        $("input").css("background-color", "red");
    }
    });

});
</script>

process.php

<?php
// echo $_POST['first_name'];die;
$advert = array (
        'ajax' => 'Hello world!' 
);
echo json_encode ( $advert );
if ($_POST ['first_name'] [0] == "s") {
    $succeded = 1;
    $failed = 0;
} else {
    $succeded = 0;
    $failed = 1;
}
$query = mysql_connect ( "localhost", "root", "" );
mysql_select_db ( "test", $query );
if (isset ( $_POST ['first_name'] ) && isset ( $_POST ['password'] ) && isset ( $_POST ['email'] )) {
    $first_name = mysql_real_escape_string ( $_POST ['first_name'] );
    $lastname = mysql_real_escape_string ( $_POST ['last_name'] );
    $password = mysql_real_escape_string ( $_POST ['password'] );
    $email = $_POST ['email'];
    $country = mysql_real_escape_string ( $_POST ['country'] );
    $query_string = "INSERT INTO registeration_tbl (first_name,last_name,email,password,succeded,failed,country)
VALUES ('$first_name','$lastname','$email','$password','$succeded','$failed','$country');";
    $query2 = mysql_query ( $query_string );
    if ($query2) {
        echo "<h2>Your Registration Process succesfully completed. Thank You</h2>";
    }
}
?>

答

Try that :

$("#submit_btn").click(function(){
         // Your code ...
          $.ajax({
          type: "POST",
          url: 'process.php', //don't forget '
          //...

         console.log('Something');
         return false; //Don't refresh the page
    };

And check if your network tab successuflly send like :

And tell us what's the return result.

答

Firebug plugin, for Firefox (or simillar) has a great console that displays ajax requests as they run. There are tabs for the POSTED variables, result, json, etc.. and is invaluable for debuging ajax requests.

答

The submit button needs to be changed to a standard button type, this means that it will no longer auto-submit the data form when the button is pressed.

Change

<input type="submit" value="Send" id="submit_btn" />

<input type="button" value="Send" id="submit_btn" />

Ajax没有将数据传输到php文件

相关推荐