jQuery AJAX API 交互。如何使用 html 视图处理数据输出？

Posted 2023-02-26

【中文标题】jQuery AJAX API 交互。如何使用 html 视图处理数据输出？

【英文标题】：jQuery AJAX API interaction. How to use a html view to handle data output?

【发布时间】：2013-02-11 04:42:45

【问题描述】：

目前，我的互动是这样的：

对我的站点控制器的 AJAX 调用 -> 通过 php 加载的 API 内容和 输出 -> javascript 将视图直接输出到页面中

有没有办法从某种外部文件加载 html？

我不想最终做这样的事情，因为它会使更改 html 变得混乱。

html = '';

for (i = 0; i < jsonData.length; i++) 
    html += '<div class="blah"><b>Content goes here<b><br>';
        html += '<div class="blah_nested">' + jsonData[i].awesomeness + '</div>';
    html += '</div>';

    $("#some_div").html(html);

【参考方案1】：

创建一个包含该代码并在请求中获取 json 响应的 php 文件。

示例（data.php）：

 <div class="blah"><b>Content goes here<b><br>
    <div class="blah_nested"><?php echo $_GET['jsondata']; ?></div>
 </div>

然后做：

html = "";
for (i = 0; i < jsonData.length; i++) 
     $.get('data.php?jsondata=' + jsonData[i].awesomeness, function(response)
        html += response;
     );

我进行了编辑以使其更直接地匹配他的原始代码。

【讨论】：

谢谢伙计。很有帮助！

这对我来说是一个完美的答复，直到我尝试访问该视图。问题是我在视图中使用了特定于框架的方法，并且由于我只加载视图，因此它们不起作用。

【参考方案2】：

是的，您可以制作一个包含所有可重复代码的 html 文件。

例如，在您的名为模板的 html 文件中，您可能有：

<div class="blah"><b>Content goes here<b><br>
    <div class="blah_nested"></div>
</div>

然后在您的 js 中您可以使用 .get 来获取该代码。

       $.get('templates.html', function(html)
            var h = $(html);
            var blah = h.find('.blah').html();
       ); 

现在您已经获得了您的代码。您仍然必须将其放入 for 循环中，并且您仍然必须输入您的信息，看起来像这样：

$('blah_nested').text(jsonData[i].awesomeness);

但是现在你不必去你的 js 去修改 html。这是一个多一点的 js 代码，但它把所有的东西都分开了。