Question

我不知道如何正确运行$ .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";
    }

Answer 1

jQuery对象没有在DOM元素上使用的属性innerHTML。请改用方法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)" >

Answer 2

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';
}

Answer 3

Ajax成功回调仅包含数据（您与ajax或纯javascript xmlhttp请求的竞争功能混淆）因此

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

同时查看您的查询您很容易受到SQL注入

如何正确使用$ .ajax功能？

HTML

JQuery Ajax

PHP MySQL

3 个答案: