Question

我想将php生成的echo文本显示在一个单独的html页面上，为此我尝试了jquery，但它没有用。请不要阻止这个问题，因为我提到了所有以前与此类问题相关的帖子，但没有什么对我有用。

这是代码 HTML

<form id="register-form" action="http://localhost/Exercises/media/index.php" method="post" role="form" >
    <input type="text" name="fname" id="firstname" tabindex="1" class="form-control" placeholder="Firts name" value="">             
     <input type="text" name="lname" id="lname" tabindex="1" class="form-control" placeholder="Last name" value="">
     <input type="text" name="username" id="username" tabindex="2" class="form-control" placeholder="Username">
     <input type="text" name="dob" id="username" tabindex="2" class="form-control" placeholder="D-O-B">
     <input type="text" name="location" id="location" tabindex="2" class="form-control" placeholder="Location">
     <input type="text" name="email" id="email" tabindex="2" class="form-control" placeholder="Email">
     <input type="text" name="email2" id="email2" tabindex="2" class="form-control" placeholder="Confirm Email">
     <input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password">
     <input type="password" name="password2" id="password2" tabindex="2" class="form-control" placeholder="Re-Enter Password">

     <input type="submit" name="reg" id="reg" tabindex="4" class="form-control btn btn-register" value="Register Now" style="background: #1AB188; border: 0px; border-radius: 3px;">
</form>
    <div id = "test"> </div><!--where i expect my php echo data to be displayed-->

JS

function getpage(sign_up) {
$.ajax({
    type: "POST",
    dataType: "json",
    url: "http://localhost/Exercises/media/index.php",
    data: {page: sign_up},
    success: function(data) {
        $('#test').html(data.msg);
    }
});
};

PHP

<?php

//json array to store echo messages foe ajax
$result = array(
                'un_limit' => 'the maximum limit for username/firstname/lastname is 25 characters',
                'pw_length' => 'Your Password must be between 8 and 30 characters long!',
                'pw_match' => 'Your password do not match',
                'all_fields' => 'Please fill in all the fields',
                'em_alrdy' => 'E-mail already used!',
                'un_alrdy' => 'Username already taken ...',
                'em_match' => 'Your E-mails do not match!',
                );


//Registration form
$fn    = strip_tags(@$_POST['fname']);
$ln    = strip_tags(@$_POST['lname']); 
$un    = strip_tags(@$_POST['username']);
$dob   = date(@$_POST['dob']);
$loc   = strip_tags(@$_POST['location']);
$em    = strip_tags(@$_POST['email']);
$em2   = strip_tags(@$_POST['email2']);
$pswd  = strip_tags(@$_POST['password']);
$pswd2 = strip_tags(@$_POST['password2']);
$d     = date("Y-m-d"); //Year - Month -  Day

if ($reg) {
    if ($em == $em2) {
//Check the username already exists
    $u_check = mysql_query(" SELECT username FROM users WHERE username='$un' ");
//Count the amount of rows where username = $un
    $check = mysql_num_rows($u_check);
//Check whether the email is already registered to DB       
    $e_check = mysql_query ("SELECT email FROM users Where email='$em'");
//Count the number of rows returned
    $email_check = mysql_num_rows ($e_check);       
        if ($check == 0) {
            if ($email_check == 0) {
//Check all of the fields have been filled in
            if ($fn && $ln && $un && $dob && $loc && $em && $em2 && $pswd && $pswd2) {
//Check the passwords match
                if ($pswd == $pswd2) {
//Check the maximum length of username/first name/last name does not exceed 25 characters
                    if (strlen($un)>25||strlen($fn)>25||strlen($ln)>25) {
                    echo json_encode(array('msg'=>$result['un_limit']));
                    }
                else
                {
//Check the maximum length of the password does not exeed 25 characters and is not less than 8 characters
                    if (strlen($pswd)>30||strlen($pswd)<8) {
                    echo json_encode(array('msg'=>$result['pw_length']));
                    }
                    else
                    {
//Encrypt password and password 2 using md5 before sending to DB
                    $pswd = md5($pswd);
                    $pswd2 = md5($pswd2);
                    $query = mysql_query("INSERT INTO users VALUES ('','$un','$fn','$ln','$dob','$loc','$em','$pswd','$d','0','','','','','','no')");
                    die("<h2>Account successfully created</h2>Login to your World of Videos account ..."); 
                    }   
                }   
                }
            else {
            echo json_encode(array('msg'=>$result['pw_match']));    
            }
            }
        else
        {
        echo json_encode(array('msg'=>$result['all_fields'])); 
        }
        }
        else
        {
        echo json_encode(array('msg'=>$result['em_alrdy']));
        }
        }
    else
    {
    echo json_encode(array('msg'=>$result['un_alrdy']));    
    }   
    }
else {
echo json_encode(array('msg'=>$result['em_match']));
}   
}
?>

Answer 1

我认为jQuery无法匹配，因为你的div有一类“test”，但你的jQuery选择器是“id”，因为你使用的是$（“＃test”）

尝试更改： <div class="test"> 到 <div id="test"> 在您的HTML中，或更改选择器： $("#test") 到 $(".test")

Answer 2

当我将此代码放在我的系统上时，它不起作用，所以我改进了Jquery，以便在执行之前监听要提交的表单。在我的裸露中我使用的是最新版本的jquery（2.1.4）。

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

新HTML：

<form id="register-form">
    <input type="text" name="fname" id="firstname" tabindex="1" class="form-control" placeholder="Firts name" value="">             
    <input type="text" name="lname" id="lname" tabindex="1" class="form-control" placeholder="Last name" value="">
    <input type="text" name="username" id="username" tabindex="2" class="form-control" placeholder="Username">
    <input type="text" name="dob" id="username" tabindex="2" class="form-control" placeholder="D-O-B">
    <input type="text" name="location" id="location" tabindex="2" class="form-control" placeholder="Location">
    <input type="text" name="email" id="email" tabindex="2" class="form-control" placeholder="Email">
    <input type="text" name="email2" id="email2" tabindex="2" class="form-control" placeholder="Confirm Email">
    <input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password">
    <input type="password" name="password2" id="password2" tabindex="2" class="form-control" placeholder="Re-Enter Password">

    <input type="submit" name="reg" id="reg" tabindex="4" class="form-control btn btn-register" value="Register Now" style="background: #1AB188; border: 0px; border-radius: 3px;">
</form>

新Javascript：

<script type="text/javascript">
$("#register-form").on('submit', function(e) {
    e.preventDefault(); // Prevent page change

    $.ajax({
        type: "POST", // Request type
        dataType: "json",
        url: "http://localhost/Exercises/media/index.php",
        data: $("#register-form").serialize(), // Get form data and organise it
        success: function(data) {
            $('#response').html(data.msg);
        },
        error: function(e) {
            $('#response').html("Error sending form data");
        }
    });
});
</script>

请注意：

新的javascript应该在表单之后，从查看你的PHP代码以不安全的方式存储密码，请watch this video因为md5的散列密码非常不安全。你还在使用mysql而不是你的php中的新mysqli函数，因为它有安全问题，所以不应该再使用它了。

使用jquery向html div显示php echo

2 个答案: