0

我不知道如何正确运行 $.ajax。我通常使用 javascript 手动制作所有 xmlHTTP 对象，然后在需要的地方使用 jQuery。所以请帮我在jQuery中正确使用这个功能。

HTML

<form action="login.php" method="post" onSubmit="return login()" >
                <input type="text" name="eMailTxt" id="eMailTxt" placeholder="Email Address" />
                <input type="password" name="passWordTxt" id="passWordTxt" placeholder="password" />
                <br />
                <p><!--wanna show password does not match here--></p>
                <input type="submit" value="Login" id="submitBtn" class="Btn" />
            </form>

jQuery Ajax

function login()
{
    $email = $("#eMailTxt").val();
    $pass = $("#passWordTxt").val();
    $.ajax({
        url:'loginCheck.php',
        type:'POST',
        data:{q:$email,s:$pass},
        success:function(response){
            $("#loginForm p").innerHTML = xmlhttp.responseText; 
            return false; //is this the correct way to do it?
        }
    });
    return true; //not really sure about this
}

PHP MySQL

$q=$_POST["q"];
    $s=$_POST["s"];
    $con=mysqli_connect("localhost","root","","SocialNetwork");
    $check="SELECT PassWord FROM people WHERE EMAIL = '".$q."'";
    $data=mysqli_query($con,$check);
    $result=mysqli_fetch_array($data);
    if ($s != $result)
    {
        echo "Password does not match";
    }
4

3 回答 3

1

HTML 

<form action="login.php" method="post" class="js-my-form">
                <input type="text" name="record[email]" id="eMailTxt" placeholder="Email Address" />
                <input type="password" name="record[password]" id="passWordTxt" placeholder="password" />
                <br />
                <p><!--wanna show password does not match here--></p>
                <input type="submit" value="Login" id="submitBtn" class="Btn" />
            </form>

jQuery

$(document).ready(function () {
    $('.js-my-form').submit(function () {
        var data = $(this).serialize();
        var action = $(this).attr('action');
        var methodType = $(this).attr('method');
        $.ajax({
            url: action,
            type: methodType,
            data: data,
            beforeSend: function () {
               //Maybe Some Ajax Loader
            },
            success: function (response) {
                // success
            },
            error: function (errorResponse) {}
        });

        return false; //Send form async
    });
});

PHP

if (isset($_POST['record']) {
//Your PHP Code
} else {
header("HTTP/1.0 404 Not Found"); // Trow Error for JS
echo 'invalid data';
}
于 2013-07-06T11:21:28.320 回答
1

jQuery 对象没有innerHTML用于 DOM 元素的属性。改用方法html()：

$("#loginForm p").html(response);

或者你可以像这样引用 DOM 元素：

$("#loginForm p")[0].innerHTML = response; // equivalent to .get(0)

请注意，默认情况下 ajax 是异步的，您的登录函数将始终返回 true。

顺便说一句，这里的响应对应于从服务器返回的值，而不是 jqXHR 对象（包装在 jquery 对象中的 xhr 对象）。

更新

function login(form)
{
    $email = $("#eMailTxt").val();
    $pass = $("#passWordTxt").val();
    $.ajax({
        url:'loginCheck.php',
        type:'POST',
        data:{q:$email,s:$pass},
        success:function(response){
            if(response === "Password does not match") {
               $("#loginForm p").html(response);
               return false;
            }
            //if password match, submit form
            form.submit();
        }
    });
    //we always return false here to avoid form submiting before ajax request is done
    return false; 
}

在 HTML 中：

<form action="login.php" method="post" onSubmit="return login(this)" >
于 2013-07-06T11:09:55.833 回答
0

Ajax 成功回调仅包含数据（您对 ajax 或纯 javascript xmlhttp 请求的竞争功能感到困惑）因此

    success:function(response){
     $("#loginForm p").html(response); 
}

还看到您的查询，您很容易受到 sql 注入的影响

于 2013-07-06T11:12:49.020 回答