jquery表单验证和php脚本在一个页面中

时间:2015-10-16 17:03:09

标签: javascript php jquery html

实现jquery表单验证并使用function btn_onclick() { window.location.href = "http://localhost/loginprivate.php";}index.php重定向到loginprivate.php我的webapps php脚本不会被执行。用户可以使用javascript函数,window.location.href重定向的index.php loginprivate.php可以在此处看到。在第一次页面加载后,页面再次加载<script src="loadagain.js"></script>,这也可以正常工作。

现在的问题是,如果我单击提交按钮,php代码将不会被执行,我可以看到,因为没有创建cookie,用户被重定向到index.php

我的PHP代码:

    if(isset($_POST["submit"]))
    {
            $hostname='localhost';
            $username='root';
            $password='';

            unset($_POST['password']);
            $salt = ''; 
            for ($i = 0; $i < 22; $i++) { 
                    $salt .= substr('./ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789', mt_rand(0, 63), 1); 
            }
            $_POST['password'] = crypt($_POST['password'],'$2a$10$'.$salt);
            $new = 0;
            try {
                    $dbh = new PDO("mysql:host=$hostname;dbname=search",$username,$password);
                    $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); // <== add this line
                    $sql = "INSERT INTO users (username, password)
                    VALUES ('".$_POST["username"]."','".$_POST["password"]."')";
                    if ($dbh->query($sql)) {
                            echo "New Record Inserted Successfully";
                    }
                    else{
                            echo "Data not successfully Inserted.";
                    }
                    $new = $dbh->lastInsertId();
                    $dbh = null;
            }
            catch(PDOException $e)
            {
                    echo $e->getMessage();
            }
            if ($new > 0) 
            {

                $t = time() + 60 * 60 * 24 * 1000;
                setcookie("username", $_POST['username'], $t);
                setcookie("userid", $new , $t);
            } 
        else
            {

            }
    }

我的HTML代码:

    <head>
        <meta charset="UTF-8" /> 
        <title>
        HTML Document Structure
        </title>    
        <link rel="stylesheet" type="text/css" href="style.css" />
        <link rel="stylesheet" href="themes/my-costum-theme.min.css" />
        <link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
        <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>    
        <!-- Einstellungen zur Defintion als WebApp -->
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <script src="loadagain.js"></script>    
        <script>
        $(document).ready(function () {
$('#myform').ajaxForm();
            $('#myform').validate({ // initialize the plugin
                rules: {
                    username: {
                        required: true,
                        minlength: 2,
                        maxlength: 30
                    },
                    password: {
                        required: true,
                        minlength: 3,
                        maxlength: 30
                    }
                },
                submitHandler: function (form) { // for demo
                    $.ajax({
        type: 'post',
        url: 'loginprivate.php'    //url where you want to post the stuff.
        data:{
            username: 'root',
            password: 'maxicora123'
        },
        success: function(res){
            //here you will get res as response from php page, either logged in or some error.
             window.location.href = "http://localhost/loc/main.php";
        }
    });
                    return false; // for demo
                }
            });
        });
        </script>   
        </head>
        <body>
        <div class="ui-page" data-theme="b" data-role="page">
            <div data-role="header"><h1>localcorps</h1></div>
                <div id="wrapper1" style=" width: 90%; padding-right:5%; padding-left:5%" name="wrapper1">
                    <form  name="login-form" id="myform" class="login-form" action="./loginprivate.php" method="post">
                        <div class="header1"></div>
                            <div class="content1">
                                <div data-role="fieldcontain">
                                <label for="username">Username:</label>
                                <input name="username" type="text" class="input username" id="username"/>
                            </div>
                        </div>
                        <div data-role="fieldcontain">
                            <label for="password">Password:</label>
                            <input name="password" type="password" class="input password" id="password"/>          
                        </div>
                        <div class="footer">
                            <input type="submit" name="submit" value="Login" class="button"/>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        </body>

1 个答案:

答案 0 :(得分:4)

根据你的评论, 我现在只得到这个&#34;数组()&#34;在我的屏幕上。 这意味着您无法向PHP页面发布任何内容。

这只是因为,您redirecting控制PHP页面而不是submitting表单。

因此,您可以使用jQuery验证代码,并成功验证执行ajax post请求,而不是移动控件。window.location.href = "http://localhost/lak/main.php";

而不是转移控制权,请执行post

$.ajax({
    type: 'post',
    url: 'loginprivate.php'    //url where you want to post the stuff.
    data:{
        username: 'someUserName',
        password: 'xxxxxxxxxxxx'
    },
    success: function(res){
        //here you will get res as response from php page, either logged in or some error.
        //and if you're logged in successfully, redirect here now.
    }
});

希望这会有所帮助。