有问题在文本框中显示ajax结果

时间:2014-08-09 15:12:29

标签: javascript php jquery html ajax

我想做的是在我的计数输入框中显示我的ajax结果。

我尝试使用alert()来判断我的AJAX是否返回了值并且它给出了值。

我的问题是我的计数输入框中没有显示我的AJAX中的结果。

脚本:

$(document).ready(function(){
var countTimer = setInterval(
        function ()
        {
            codeValue();        
        }, 500);

function codeValue(){

        var data = {};
        data.countValue = $('#countValue').val();

        $.ajax({
            type: "POST",
            url: "codeTime.php",
            data: data,
            cache: false,
            success: function (result) {
            alert(result);
            $("#count").val(result.user_code);

            }
        });

};

});  

响应:

{"user_code":2} 

3 个答案:

答案 0 :(得分:1)

你的php代码返回一个json字符串,而不是一个javascript对象。您可以指定dataType或在回调函数中自行解析。

$.ajax({
    type: "POST",
    url: "codeTime.php",
    data: data,
    cache: false,
    dataType: "json",
    success: function (result) {
        alert(result);
        $("#count").val(result.user_code);
    }
});

$.ajax({
    type: "POST",
    url: "codeTime.php",
    data: data,
    cache: false,
    success: function (result) {
        result = JSON.parse(result);       // parse the json string into a javascript object
        $("#count").val(result.user_code);
    }
});

答案 1 :(得分:1)

您必须将dataType: 'json'放入ajax

像:

$.ajax({
    type: "POST",
    url: "codeTime.php",
    data: data,
    cache: false,
    dataType: 'json',
    success: function (result) {
        alert(result);
        $("#count").val(result.user_code);

    }
});

答案 2 :(得分:0)

您无需使用 jQuery 库来实现此目的:

第一步 - 触发body onload事件时调用函数:

您需要在加载文档时使用 HTML onload标记中的body属性触发 JavaScript 功能,如下所示:

<body onload="ini()">

(...)

</body>

第二步 - 对您的PHP文件进行AJAX调用:

您需要使用 AJAX 调用服务器端脚本。您的 JavaScript 代码如下所示:

function ini()
{
    var interVal = setInterval(function() { ajaxCall() }, 500);
    // you can later on:
    // clearInterval(interVal);
    // if you need to
}

function ajaxCall()
{
    // Store the "countValue"
    var countValue = document.getElementById('countValue').value;

    // Store your POST variables, to be sent to the SERVER side
    postData = "countValue=" + encodeURIComponent(countValue);
    // you can send multiple post variables using the & separator
    // like this:
    // var1=encodeURIComponent(value1)&var2=encodeURIComponent(value2)

    // Create an XML HTTP Request
    var xhr = new XMLHttpRequest();

    // Set the content Type of your request
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 

    // Set the lambda function to execute when the ready state changes 
    // You need to set this function in the onreadystatechange property
    xhr.onreadystatechange = function()
    { // Ready state changed
        if (xhr.readyState == 4) { // Response arrived Succesfully

            // Parse and Store the responseText of the XML HTTP Request
            var jsonObj = JSON.parse(xhr.responseText);
            document.getElementById('count').value = jsonObj['user_code'];
        }
    }
    xhr.open('POST', 'codeTime.php', true);
    xhr.send(postData);
}

建议:

仅在需要时使用库,即使它是jQuery =)