Question

我试图创建一个简单的注册页面并将数据发送到mysql数据库。如何检查数据是否转移到php文件？点击发送后，它不会刷新页面。这里的代码：的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>";
    }
}
?>

Answer 1

试试：

$("#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
    };

并检查您的网络标签是否成功发送，如：

并告诉我们返回的结果是什么。

Answer 2

Firebug插件，对于Firefox（或simillar）有一个很棒的控制台，可以在运行时显示ajax请求。有POSTED变量，结果，json等的选项卡。对于调试ajax请求非常有价值。

Answer 3

需要将提交按钮更改为标准按钮类型，这意味着当按下按钮时，它将不再自动提交数据表单。

更改

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

到

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

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

3 个答案: