Question

我正在构建一个Django Web应用程序，它需要从给定标识符中获取JSON响应并在给定标记内输入。

它的工作方式是首先获得一个数字标识符（surah.id），它将识别需要下载哪个JSON响应（在div之间找到）：

<ul>
    {% for surah in surahs %}
        <li>
            <a href='/quran/{{ surah.id }}/'> {{ surah }} </a>
            <!-- Div Class Below -->
            <div class="d{{ surah.id }}">{{ surah.id }}</div>
        </li>
    {% empty %}
        <p>No Surah Added</p>
    {% endfor %}
</ul>

接下来，它将获得给定请求的JSON数据：

示例请求：http://quranapi.azurewebsites.net/api/chapter/1

然后它将根据Surah Name更改列表值（获得阿拉伯语）所以列表将如下所示：

<ul>
    {% for surah in surahs %}
        <li>
            <a href='/quran/{{ surah.id }}/'> Al Fatiha - The Opening </a>
            <!-- Div Class Below -->
            <div class="d{{ surah.id }}">الفَاتِحَة</div>
        </li>
    {% empty %}
        <p>No Surah Added</p>
    {% endfor %}
</ul>

现在我尝试使用JQuery，但是我仍然坚持改变div标签。我可以提取数据并将其放入列表中。但是，我正在努力改变Div。这就是我的尝试：

//  _data = []
//  for (i = 0; i < $("li").length; i++) {
//      url = "http://quranapi.azurewebsites.net/api/chapter/" + (i + 1);
//      console.log(url);
//      $.getJSON(url, function(result) {
//          _data.push(_data[i] = result[0].Name)
//          //console.log(_data[i]);
//      });
//  }

（注意：我是新的JQuery＆amp; Javascript）

所以问题是我该怎么做？

Answer 1

我真的很困惑你正在尝试用＆＃34; _data.push（_data [i] = result [0] .Name）＆＃34;。这将导致两次添加相同的东西。你可以在这里看到：https://jsfiddle.net/6tw1L15f/

把它放在一边并回到主要问题上，你想要做什么＆＃34;改变＆＃34;关于div？你想把它们从ids变成他们的名字吗？如果是这样，您只需使用.text（）。另外，我会在你的div上使用一个类来找到它们。总而言之，这就是我要做的事情：

<ul>
    {% for surah in surahs %}
        <li>
            <a href="/quran/{{ surah.id }}/"> {{ surah }} </a>
            <!-- Div Class Below -->
            <div class="d{{ surah.id }} surah-div"> {{ surah.id }} </div>
        </li>
    {% empty %}
        <p>No Surah Added</p>
    {% endfor %}
</ul>

然后是Javascript：

i = 1;  // You should probably do this index thing differently
$(".surah-div").each(function()
{
    // It is proper to end your urls with slashes
    var url = "http://quranapi.azurewebsites.net/api/chapter/" + i + "/";
    var surah_div = $(this);

    $.getJSON(url, function(result)
    {
        surah_div.text(result[0].Name);
    });

    i++;
}

老实说，我不会这样做，我只想把你所拥有的东西和我要做的东西合并。这样做有一个严重的缺陷。将ajax放入循环内部时需要非常小心。老实说，我从来没有在＆＃34;每个＆＃34;内部尝试过ajax。像这样，但它可能会遇到同样的问题。

将ajax放入for循环的问题是你可能会使用＆＃34; i＆＃34;在ajax成功函数内部，但是当ajax完成时，它已经转移到for循环的下一次迭代，可能还有更多的迭代。 Ajax调用是＆＃34;异步＆＃34;这意味着它们不会停止代码的流动，因此for循环在发送下一个代码之前不会等待它返回。

我意识到你并没有使用＆＃34;我＆＃34;在你的情况下，但那是因为你有另一个相似的缺陷。你假设你将以特定的顺序得到所有东西（有点像＃34;我＆＃34;），但你无法保证。

为了保护自己免受所有这些废话，请确保将ajax放入其自己的功能中并调用它以便＆＃34; i＆＃34;按值传递，你不必担心它在for循环中的变化。像这样：

i = 1;  // You should probably do this index thing differently
$(".surah-div").each(function()
{
    // It is proper to end your urls with slashes
    var url = "http://quranapi.azurewebsites.net/api/chapter/" + i + "/";
    var surah_div = $(this);

    fill_in_surah_div(url, surah_div);
    i++;
}

function fill_in_surah_div(url, surah_div)
{
    $.getJSON(url, function(result)
    {
        surah_div.text(result[0].Name);
    });
}

更新

如评论中所述修改了答案。

在Web应用程序加载上加载JSON响应（JQuery，Django）

1 个答案:

更新