当前位置: 首页 > 面试题库 >

使用jQuery从AJAX响应构建表行(json)

段干瑞
2023-03-14
问题内容

我从服务器端ajax响应(Json)中获取信息,并试图动态创建表行并将其附加到id =的现有表中records_table

我试图重复实现该解决方案,但失败了。

我的回答如下:

    '[{
      "rank":"9",
      "content":"Alon",
      "UID":"5"
     },
     {
       "rank":"6",
       "content":"Tala",
       "UID":"6"
    }]'

需求结果是这样的:

<tr>
   <td>9</td>
   <td>Alon</td>
   <td>5</td>  
</tr>
<tr>
   <td>6</td>
   <td>Tala</td>
   <td>5</td>  
</tr>

我想做一些不解析Json的事情,所以我尝试做以下事情,这当然是一场灾难:

    function responseHandler(response)
    {

        $(function() {
            $.each(response, function(i, item) {
                $('<tr>').html(
                    $('td').text(item.rank),
                    $('td').text(item.content),
                    $('td').text(item.UID)
                ).appendTo('#records_table');

            });
        });


    }

从我的解决方案中,我在所有单元格中仅得到数字为6的一行。我究竟做错了什么?


问题答案:

使用.append而不是.html

var response = "[{
      "rank":"9",
      "content":"Alon",
      "UID":"5"
     },
     {
       "rank":"6",
       "content":"Tala",
       "UID":"6"
    }]";

// convert string to JSON
response = $.parseJSON(response);

$(function() {
    $.each(response, function(i, item) {
        var $tr = $('<tr>').append(
            $('<td>').text(item.rank),
            $('<td>').text(item.content),
            $('<td>').text(item.UID)
        ); //.appendTo('#records_table');
        console.log($tr.wrap('<p>').html());
    });
});


 类似资料:
  • 问题内容: 我知道在这个问题上有很多问题,但是我仍然不确定该怎么做。 我有一个名为“ CuisineForm”的HTML表单,在用户选择了美食类型之后,AJAX将该表单发送到服务器。AJAX调用工作正常,并且服务器以JSON响应进行响应,其中包含此特定美食的所有服务时间。这些服务时间分为早餐,午餐和晚餐。 这些时间需要以相同的形式填充到3个单独的下拉菜单中。 但我真的不知道如何处理JSON结果以填

  • 问题内容: 我正在尝试使用来自ajax html响应的内容更新div。我相信我的语法正确,但是div内容已替换为整个HTML页面响应,而不仅仅是html响应中选择的div。我究竟做错了什么? 问题答案: 您正在设置HTML格式的内容,然后将其替换为本身,这没有多大意义? 我猜你真正在哪里寻找返回的数据,然后用ajax调用中的html用html 更新DOM中的元素:

  • 问题内容: 我有一个页面,使用被称为100次(async:true)的jQuery.ajax,问题是,当它们都被加载时,我需要系统等待所有100次调用返回后才能继续。我将如何处理? 提前致谢!:) 更新: 这些调用在for()循环中进行(其中有100个:) 问题答案: 最好的方法是使用。您可以按以下方式使用它: 另外,如果您在数组中拥有所有AJAX调用,则可以使用: 请注意,这至少需要jQuery

  • 问题内容: 我使用以下函数通过jQuery AJAX发布表单: 它发布正常,但我无法解析响应,它记录到控制台,如下所示 我相信这是我正在寻找的回应。 但是,当我尝试执行响应对象的任何其他成员时,它就是。 任何建议表示赞赏。 问题答案: 呼唤 应该可以访问所需的数据。 现在应该显示“ 1”

  • 问题内容: 我无法从下面的代码行 jQuery.support.cors = true 打印成功 。 。包括这行 jQuery.support.cors = true; 将给出警告信息。那么,如何在不失去功能的情况下避免这种情况呢?我的主要目标是调用一个休息的Web服务,该服务返回JSON数据,而我必须利用JSON数据。请帮助我如何做到这一点?请提供工作样本 问题答案: 您可能会错过添加 // G

  • 问题内容: 我试图做到这一点,所以当我单击一个跨度图标时,它将把article_id发送到删除我的文章的php sql页面,我正在使用jQuery Ajax发送id,该id在jQuery端可以发送http发布请求完成后,我的表行仍然存在,任何人都可以查看我的代码是否有问题,在此先感谢您! 问题答案: 您的行仍然存在的原因,因为AJAX调用不会刷新页面。如果要删除行,则必须执行以下操作: 假设您的跨