Question

我正在尝试将我正在创建的网站上的索引页面和我的登录php代码链接在一起。但是我遇到了让我的ajax post调用完成的问题。让我从索引html开始，以便您可以看到脚本和表单设置：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Official Website of Logopedia STS & Carr SLS</title>
<link href="css/landing.css" rel="stylesheet" type="text/css"/>
<link href="css/uikit.gradient.min.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/uikit.min.js"> </script>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"> </script>

JS：

function login()
{
    alert("reached function"); //For debugging

    var datastring = $('#login').serialize();
    alert(datastring);

    var post_data = $.ajax(
    {
        type: "POST",
        url: "php/test.php",
        data: dataString
    });

    post_data.done(function(jsonstr)
    {
        //For Debugging
        alert("works");
        alert(jsonstr);
    });

    post_data.fail(function(jqXHR, text)
    {
        alert("Post failed:" + text); //In case of fail
    });
} 

function replaceAll(find, replace, str)
{
    while( str.indexOf(find) > -1)
    {
        str = str.replace(find, replace);
    }
    return str;
}

HTML：

<!-- Background Image -->
<div class="bground"></div>

<!-- Banner -->
<div class="banner"></div>

<!-- Logo -->
<div class="tempLogo"></div>

<p class="contxt">This website is currently under construction.<br/><br/>
If you are an administrator of this site, please log in below.</p>

<form class="uk-form" id="login">
    <fieldset>
        <legend>Login</legend>
        <label for='username'>Username</label> 
        <input name="uname" id="uname" type="text" size="40" maxlength="40" /><br /><br/>
        <label for='password'>Password</label> 
        <input name="pword" id="pword" type="password" size="40" maxlength="40" /><br/>
        <button class="uk-button uk-button-primary" name="btnlin" height="15" width="30" onclick="login()">Login</button>
        <button class="uk-button uk-button-danger" name="btnlout" height="15" width="30">Logout</button>
    </fieldset>
</form>

所以我认为也许我的PHP代码是问题而且它没有在某处正确执行（该网站的webhost不允许php错误输出）所以我决定制作一个简单的测试php文件来测试。这是：

<?php
$username = $_POST['uname'];

$args = array($username => 1);

echo json_encode($args);
?>

然而，我在uname字段中输入了一些内容并单击login，而在ajax调用fire之前测试警报，没有任何反应。

Answer 1

我将您的代码复制到一个文件中并删除了警报并使用了firebug来逐步执行代码并最终看到它。你的问题是/是一个错字。在login()中，您声明datastring全部小写。当您在ajax请求中引用它时，它是dataString驼峰。 javascript将其视为未知变量并崩溃。

Answer 2

更简单的方法是使用$.ajax()的完整参数。您可以在jquery's documentation上找到相关信息。基本上你会删除post_data.done调用并在$.ajax()内移动函数，如下所示：

$.ajax({
    type: "POST",
    url: "php/test.php",
    data: dataString,
    complete: function(jsonstr){
        //For Debugging
        alert("works");
        alert(jsonstr);
    }
});

$.ajax()也有成功和错误参数，接受函数的方式与完成相同，可以用来查看页面何时正常工作。

如果仍然无效，请尝试在url字段中输入完整路径，同时尝试在浏览器的新选项卡中转到ajax请求的位置。这将验证php代码是否正常工作，这是一个javascript问题。

Answer 3

很抱歉，您说您的代码很复杂，我尝试对您的代码进行一些更改。可能这对你有用。

jQuery代码： -

function myAjaxCall() {
    $.ajax({ 
        type: "POST",
        url: base_url+'users/validateUsername',
        data: dataString,
        async:false,  // It will not jump to next statement before completing the current one.
        cache: false, // Cache issue
        beforeSend: function() {
            $('#availability_loader').show();
        },
        complete: function() {
            $('#availability_loader').hide();
        },
        data: 'username='+username+'&usertype='+userType,
        success: function(data){ // Response from php file
         alert("SECCESS-123");

         if(response=="SUCCESS") { //echo a "SUCCESS in you php code
            return true; // It will automatically submit the form after getting the response from PHP
         }
        },
        error: function(data) {
         alert('ERROR OCCURRED');
       }
    });
  return false; // It will not let the form submit
}

HTML表单： -

<form class="uk-form" id="login" onsubmit="return myAjaxCall()">

Answer 4

只是为了繁荣，如果其他人想知道我是否让我的原始代码起作用，我做了，这就是现在的样子：

    function onLogin()
    {
        alert("reached function"); //For debugging

        $.ajax(
        {
            url: "php/login.php",
            type: "post",
            data: $('#login').serialize(),
            success: function(jsonstr)
            {
                onSuccess(jsonstr);
            }
        });
    }

    function onSuccess(jsonObj)
    {
        alert(JSON.stringify(jsonObj));

        var returnedData = data;
        returnedData = replaceAll('{', '', returnedData);
        returnedData = replaceAll('}','', returnedData);
        returnedData = replaceAll('"','', returnedData);

        alert(returnedMedia);

        var rD;

        rD = returnedData.split(":");

        if (rD[1] === "Username field empty")
        {

        }
    }

我的问题是一些。首先，我没有正确地从我的PHP文件返回数据。其次我没有正确处理返回的json对象。最后我的原始代码在我的datastring变量中有一个案例问题（声明为datastring但是试图通过postS作为dataString）。

解决了所有这些问题，现在它的工作原理与test.php文件和我在login.php文件中测试的更改区域一样。

Ajax Post未完成

4 个答案: