通过 AJAX/jQuery 将特定值从数据库写入 HTML答案

【问题标题】：Writing specific value from database to HTML via AJAX/jQuery通过 AJAX/jQuery 将特定值从数据库写入 HTML
【发布时间】：2017-07-01 01:18:12
【问题描述】：

第一次提问，希望得到一些建议：

网页代码：

<form id="inbound" action="javascript:validateinbound();">
    <input type="submit" value="Go!" id="inbound">
    <script>
        function validateinbound() {
            $('#inbound:input').each(function () {
                var iv = $(this).val();
                $('#response').hide();
                $('#mydiv').fadeIn(1200);
                $('#mydiv').delay(1200).fadeOut(600);
                $(function () {
                    $.ajax( {
                        url: 'validateinbound.php',
                        data: "variable="+iv,
                        dataType: 'json',
                        success: function(data) {
                            var response = JSON.stringify(data);
                                $('#response').delay(3600).fadeIn(600);
                                $('#response').append("<p>Answer: </p>"+response);
                        }
                    });
                });
            });
        };
    </script>
</form>

这会返回一个我想使用的字符串，如下所示：

答案：

 [{"id":"1","answer":"Pull  logging","question_id":"5","feature_id":"1","answer_id":"9"}]

理想情况下，我想做的只是选择网页的 maxmail_answer 'key' 的'value'（希望这些是正确的术语？）。目前只有一个值，但未来会更多，因此可以解析此字符串以获取特定键并仅输出这些值。

视觉上我会看到：

答案：提取日志记录（然后是另一个答案：对于我提取的每个值）

第一次使用这个网站和这些语言，所以完全是菜鸟，希望得到一些指导。谢谢！

【问题讨论】：

标签： javascript jquery html json ajax

【解决方案1】：

您不需要对 JSON 响应进行字符串化，您可以使用对象表示法 . 获取所需键的值，如下所示：

function validateinbound() {
            $('#inbound:input').each(function () {
                var iv = $(this).val();
                $('#response').hide();
                $('#mydiv').fadeIn(1200);
                $('#mydiv').delay(1200).fadeOut(600);
                $(function () {
                    $.ajax( {
                        url: 'validateinbound.php',
                        data: "variable="+iv,
                        dataType: 'json',
                        success: function(data) {
         //var response = JSON.stringify(data); // no need for this line
         $('#response').delay(3600).fadeIn(600);
         // catch the answer here
         // your result returns within an array so you need to catch the first index
         $('#response').append("<p>Answer: </p>"+response[0].answer); 
                        }
                    });
                });
            });
        };

此外，id 是唯一的，您只能通过 id 选择器 # 访问单个元素，您不需要 .each

【讨论】：

所以这非常适合拉回一条数据。我已经向 JSON 添加了第二条数据，并且需要知道如何获取两者。我尝试使用 sujan 的 $.each 语句，但出现此错误： Uncaught SyntaxError: Unexpected token o in JSON at position 1
是的，您需要一个 $.each 方法，但您需要确保返回的 JSON 格式正确并且类似于 javascript 数组。它在响应时总是一个数组，还是有时是一个对象，基于某个动作或输入？
嗨，KAD，再次感谢您的帮助。所以它应该总是被格式化为一个数组。这基本上是 PHP 查询到 MySQL 数据库的输出，带有我想要操作的 echo json_encode($data) 调用。该字符串将始终遵循我帖子中的格式，只是具有不同的值。 “答案”将始终保持不变，并且始终保持相同的顺序。

【解决方案2】：

您从服务器收到的是 JSON 格式的对象数组。您放置的样本的长度为“1”，因此，如果要到达第一个数组的“id”，它将是这样的：

// var response = JSON.stringify(data); (// don't stringify it!
$('#response').delay(3600).fadeIn(600);
$('#response').append("<p>Answer: </p>"+data[0].id);

【讨论】：

【解决方案3】：

你需要一个循环来遍历你的结果数组并显示每个结果

success: function(data) {
     var response = JSON.stringify(data);
     $('#response').delay(3600).fadeIn(600);
     $.each(response,function(index,value){//the each loop
         $('#response').append("<p>Answer: </p>"+value.answer);//get the answer using . notation 
     });
}

【讨论】：

【解决方案4】：

Json.stringify() 将您的 javascript 对象作为 json 数据返回，但我认为在您的情况下，您的响应是您需要操作的 json 数据。 Json.parse() 为您执行此操作，您可以将答案作为 javascript 对象的属性访问。

success: function(data) {
    var response = JSON.parse(data);
    $('#response').delay(3600).fadeIn(600);
    $('#response').append("<p>Answer: </p>"+response[0].answer);
}

如果您的 json 数据有多个结果，并且您需要处理所有结果，请使用循环。

$.each(response,function(index, object){

    var response = JSON.parse(data);
    $('#response').delay(3600).fadeIn(600);
    $('#response').append("<p>Answer: </p>"+object.answer);

});

【讨论】：

所以当我这样做时（因为我的字符串现在有两条我想要的数据），我得到未定义，如果您需要查看完整输出，我可以更新原始帖子
我已经更新了我的答案，在 $.each() 中现在有 object.answer 而不是 response[0].answer。这可能是未定义错误的原因。
嘿伙计！所以我删除了第一条评论，但那是因为我输入了错误的代码，所以我收到了一个错误，我很抱歉。我似乎不喜欢 JSON.parse(data) 本身，所以我使用 json.stringify(data) 将其转换为字符串，然后解析该数据。而且无论我是否进行字符串化，它仍然以未定义的形式返回，但我在开发工具控制台部分遇到错误：未捕获的类型错误：无法读取 null 的属性“答案”它似乎在我的细绳？想知道我的 JSON 格式是否不正确？再次感谢您的帮助！
无法读取 null 的答案属性，当您将 json 字符串化时它返回一个字符串，一个字符串没有属性，因为它是一个 STRING。您不喜欢JSON.parse()，我很想知道原因，但请记住，如果您在单个响应中包含大量数据，那么您将很难提取您想要的内容（尽管并非不可能）。一旦你掌握了JSON.parse() 的窍门，你就会一直使用它，因为它为你简化了任务。
嘿伙计！所以我的评论显示我没有，但应该更正为“它没有”，所以我为误解表示歉意。您的回答帮助我朝着正确的方向前进，我已经解决了。用我使用的代码发布答案。

【解决方案5】：

首先。感谢所有对此发表评论的人，以帮助我朝着正确的方向开始。我能够得到我需要的工作！这是解决方案：

<form id="inbound" action="javascript:validateinbound();">
<input type="submit" value="Go!" id="inbound">
<script>
function validateinbound() {
$('#controlpanel:input').each(function () {
var iv = $(this).val();
$('#response').html("");
$('#response').hide();
$('#mydiv').fadeIn(1200);
$('#mydiv').delay(1200).fadeOut(600);
$(function () {
$.ajax( {
url: 'validateinbound.php',
data: "variable="+iv,
dataType: 'json',
success: function(data) {
var newdata = JSON.stringify(data);
var response = JSON.parse(newdata);
$('#response').delay(3600).fadeIn(600);
$.each(response, function(array, object) {
$('#response').append("<p>Answer: </p>"+object.answer);
});
}
});
});
});
};
</script>
</form>

我需要正确解析数据。所以我使用 JSON.stringify 将数据转换为 JSON.parse 可以用来操作数据的字符串。但是 function(index,object) 不起作用，因为我的输出不是索引，而是数组。因此，当更改为 function(array,object) 时，这使我能够以我需要的方式获取数据。

再次感谢大家的帮助！

【讨论】：