Php响应显示在浏览器中而不是触发ajax回调

时间:2012-12-11 03:46:00

标签: php jquery ajax callback

我花了一些时间来寻找答案,并找到了一些相关的问题,但没有像我一样......像往常一样....

我有一个相当简单的php / jquery ajax注册页面,直到ajax回调。我的意思是表单数据传递给php并插入数据库但是当php响应应该返回时,所有发生的事情都是响应显示在浏览器中。我跟着日志,检查了fiddler,用/不用json重写了代码,似乎改变了。奇怪的是我在另一个页面上有另一个表单,设置方式完全相同,一切都在那里完美运行。我可以在两个页面之间找到​​的唯一区别是php文件的Request Headers。有效的那个接受json而另一个不接受,但我不知道这是否意味着什么。 。 。在这一点上,我有点抓住任何东西。

所以,没有进一步的延迟,这是我的代码。非常感谢任何想法/意见。谢谢!

<!DOCTYPE html>

<head>


    <link rel="stylesheet" type="text/css" href="mobile.css" media="screen and (max-device-width: 480px)" /> 
    <!--[if IE]>
        <link rel="stylesheet" type="text/css" media="screen and (min-width: 481px)" href="IEjoin.css" />
    <![endif]-->
    <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="register.js" type="text/javascript"></script>
    <script src="jquery.placeholder.js" type="text/javascript"></script>

</head>

<body>

    <div id="wrapper">
        <div id="logo">
        </div>
        <div id="headline">
            <h1>Create your account</h1>
        </div>
        <div id="container">
            <form id="register" action="form.php" method="post">
                <ul>
                    <li id="first_name">
                        <input name="fname" type="text" value="" id="fname" placeholder="First Name" maxlength="30">
                        <div class="error"></div>
                    </li>
                    <li id="last_name">
                        <input name="lname" type="text" value="" id="lname" placeholder="Last Name" maxlength="30">
                        <div class="error"></div>
                    </li>
                    <li id="email_address">
                        <input name="email" type="text" value="" id="email" placeholder="Email Address" maxlength="60">
                        <div class="error"></div>
                    </li>
                    <li id="uname">
                        <input name="username" type="text" value="" id="username" placeholder="Username" maxlength="15">
                        <div class="error"></div>   
                    </li>
                    <li id="pword">
                        <input name="password" type="password" value="" id="password" placeholder="Password">
                        <div class="error"></div>
                    </li>
                    <li id="gender_select">
                        <select id="gender" name="gender">
                            <option value="" selected="selected">Select your gender</option>
                            <option value="male">Male</option>
                            <option value="female">Female</option>
                            <option value="unspecified">Unspecified</option>
                        </select>
                    </li>
                    <li id="submit_button">
                        <button id="register_button" class="register_button_disabled">Create Account</button>
                    </li>
                </ul>
            </form>
            <script> $('input[placeholder]').placeholder();</script>
        </div>
    </div>
</body>

$(document).ready(function() {



function validateEmail(email) {
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    return emailReg.test(email);
}
function submitButton() {
    if (($("#first_name").hasClass("good")) && ($("#email_address").hasClass("good")) && ($("#uname").hasClass("good")) && ($("#pword").hasClass("good")) ){
        $("#register_button").removeAttr("disabled");
        $("#register_button").removeClass("register_button_disabled").addClass("register_button");
    } else {
        $("#register_button").attr("disabled", "disabled");
        $("#register_button").removeClass("register_button").addClass("register_button_disabled");
    }
}
$("body").mousedown(submitButton);
$("body").keyup(submitButton);
$("body").hover(submitButton);
$("body").mouseover(submitButton);
$("#fname").keydown(function(){
    $("#first_name").removeClass("required");
    $("#first_name div").html("");
});
$("#fname").bind ("keyup mousedown",function(){
    if(this.value===""){
        $("#first_name").removeClass("good").addClass("wait");
    } else {
        $("#first_name").removeClass("wait").addClass("good");
    }       
});
$("#fname").blur(function(){
    if(this.value===""){
        $("#first_name").removeClass("good").addClass("required");
        $("#first_name div").html("Please enter your first name");
    } else {
        $("#first_name").removeClass("wait").addClass("good");
    }       
});
$("#email").keydown(function(){
    $("#email_address").removeClass("required");
    $("#email_address div").html("");
});
$("#email").bind ("keyup mousedown",function(){
    var email = this.value;
    var emailLength = email.length;
    if (emailLength<=4){
        $("#email_address").removeClass("good").addClass("wait");
    } else {
        $("#email_address").removeClass("wait").addClass("good");
    }       
});
$("#email").blur(function(){
    var email = this.value;
    var emailLength = email.length;
    if ((emailLength<=4) || (!validateEmail(this.value))) {
            $("#email_address").removeClass("good").addClass("required");
        $("#email_address div").html("Please use a valid email address");
    } else if (emailLength>=3){
        $.ajax({
            type: "POST",
            cache: false,
            url: "Check.php",
            data: "email="+email,
            dataType: "json",
            success: function(data) { 

                if (data.status === "success") {
                    $("#email_address").removeClass("good").addClass("required");
                    $("#email_address div").html("Sorry, that email is already used");}
                else {
                    $("#email_address").removeClass("wait").addClass("good");  
                }
            }
        });
    } else {
         $("#email_address").removeClass("wait").addClass("good");
    }
});
$("#username").keydown(function(){
    var un = this.value;
    var unLength = un.length;
    if(unLength<3){
        $("#uname").removeClass("good").addClass("wait");
    } else {
        $("#uname").removeClass("wait").addClass("good");
    }       
});
$("#username").bind ("keyup mousedown",function(){
    $("#uname").removeClass("required");
    $("#uname div").html("");
});
$("#username").blur(function(){
    var un = this.value;
    var unLength = un.length;
    if(unLength<3){
        $("#uname").removeClass("good").addClass("required");
        $("#uname div").html("Please use at least 3 characters");
    } else if (unLength>=3){
        $.ajax({
            type: "POST",
            cache: false,
            url: "check.php",
            data: "username="+un,
            dataType: "json",
            success: function(data) { 

                if (data.status === "success") {
                    $("#uname").removeClass("good").addClass("required");
                    $("#uname div").html("Sorry, that username is taken");
                } else {
                    $("#uname").removeClass("wait").addClass("good");  
                }
            }
        });
    } else {
        $("#uname").removeClass("wait").addClass("good");
    }
});
$("#password").keydown(function(){
    var pw = this.value;
    var pwLength = pw.length;
    if(pwLength<=5){
        $("#pword").removeClass("good").addClass("wait");
    } else {
        $("#pword").removeClass("wait").addClass("good");
    }       
});
$("#password").bind ("keyup mousedown",function(){
    $("#pword").removeClass("required");
    $("#pword div").html("");
});
$("#password").blur(function(){
    var pw = this.value;
    var pwLength = pw.length;
    if(pw===""){
        $("#pword").removeClass("good").addClass("required");
        $("#pword div").html("Please enter a password");
    }
    if(pwLength<=5){
        $("#pword").removeClass("good").addClass("required");
        $("#pword div").html("Please use at least 6 characters");
    } else {
        $("#pword").removeClass("wait").addClass("good");
    }
});

$("#button").click(function(e) {


    e.preventDefault();     

    $.ajax({
        type: "POST",
        cache: false,
        url: "form.php",
        data: $('#register').serialize(),
        success: function(data) { 
            if (data === "fname") {
                $("#first_name").removeClass("good").addClass("required");
                $("#first_name div").html("Please enter your first name"); 

            } else if (data === "email") {
                $("#email_address").removeClass("good").addClass("required");
                $("#email_address div").html("Please use a valid email address");

            } else if (data === "email2") {
                $("#email_address").removeClass("good").addClass("required");
                $("#email_address div").html("Sorry, that email is already used");

            } else if (data === "username") {
                $("#uname").removeClass("good").addClass("required");
                $("#uname div").html("Please use at least 3 characters");

            } else if (data === "username2") {
                $("#uname").removeClass("good").addClass("required");
                $("#uname div").html("Sorry, that username is taken");

            } else {
                window.location.href = "http://site.com";

        },
        error: function(httpRequest, textStatus, errorThrown) { 
            alert("status=" + textStatus + ",error=" + errorThrown);
        } 
    });             
    return false;

});

});

<?php

$host=""; // Host name 
$username=""; // Mysql username 
$password=""; // Mysql password 
$db_name=""; // Database name 
$tbl_name=""; // Table name  

// Connect to server and select database.
mysql_connect("$host", "$username", "$password")or die("cannot connect");
mysql_select_db("$db_name")or die("cannot select DB");

// Get values from form 
$fname = mysql_real_escape_string($_POST['fname']);
$lname = mysql_real_escape_string($_POST['lname']);
$email = mysql_real_escape_string($_POST['email']);
$username = mysql_real_escape_string($_POST['username']);
$password = mysql_real_escape_string($_POST['password']);
$gender = mysql_real_escape_string($_POST['gender']);

//validate inputs
$emailpull = "SELECT email FROM $tbl_name WHERE email='$email'";
$emailresult=mysql_query($emailpull);
$emailnum=mysql_num_rows($emailresult);

$emailReg = "/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/";

$unpull = "SELECT username FROM $tbl_name WHERE username='$username'";
$unresult=mysql_query($unpull);
$unnum=mysql_num_rows($unresult);

if ($fname == "") {  
$response = "fname";

} elseif ($email == "") {
$response = 'email';

} elseif (!preg_match($emailReg, $email)) {
$response = 'email';

} elseif ($emailnum > 0) {
$response = 'email2';

} elseif (strlen($username)<3) {
$response = 'username'; 

} elseif ($unnum > 0) {
$response = 'username2';

} elseif (strlen($password)<6) {
$response = 'password';

} else {

// Insert data into mysql 
$sql="INSERT INTO $tbl_name(fname,lname,email,username,password,gender)VALUES ('$fname','$lname','$email','$username','$password','$gender')";
}

$result=mysql_query($sql);
if($result)
$response = "success";

// send message back 
echo $response;

?> 

<?php 
// close connection 
mysql_close();
?>

1 个答案:

答案 0 :(得分:0)

#button的点击处理程序有这一行可能是罪魁祸首:

window.location.href = "http://crushonit.com";

当表单没有验证错误时,这将重定向到该页面。