在文本框中显示 ajax 结果时出现问题答案

【问题标题】：Having issue showing the ajax result in a textbox在文本框中显示 ajax 结果时出现问题
【发布时间】：2023-04-05 13:44:01
【问题描述】：

我想做的是在我的计数输入框中显示我的 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}

【问题讨论】：

将console.log(result)放入success方法，查看服务器响应。
警报数据是带有result.user_code条目的json对象吗？
您也可以粘贴响应吗？
@Devendra Soni 它仍然给出了我想要的结果
@tobiasandersen 这里是响应 {"user_code":2}

标签： javascript php jquery html ajax

【解决方案1】：

您不需要使用 jQuery 库来实现：

第一步——触发body onload事件时调用函数：

您需要在加载文档时触发 JavaScript 函数，使用 HTML body 标记中的 onload 属性，如下所示：

<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 =)

【讨论】：

仅当您想确保您的应用在所有浏览器中都能正常运行时才使用库。
@true，XMLHttpRequest 适用于 IE7+，如果您需要 IE6 支持，您可以使用类似stackoverflow.com/questions/2557247/… 之类的东西意见/偏好。如果您想将 jQuery 用于 AJAX，我可以。 :P

【解决方案2】：

您的 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);
    }
});

【讨论】：

【解决方案3】：

您必须将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);

    }
});

【讨论】：