如何从 ajax 请求中获取数据以显示在 div 中？

Posted 2023-04-13

【中文标题】如何从 ajax 请求中获取数据以显示在 div 中？

【英文标题】：How can I get the data from an ajax request to appear inside a div?

【发布时间】：2012-11-22 04:23:01

【问题描述】：

我无法从我的 ajax 请求中获取 data 以显示在 <div class="l_p_i_c_w"></div> 中。我究竟做错了什么？我知道my_file.php 中的函数有效，因为如果我刷新页面，那么数据就会显示在它应该显示的位置。

jQuery:

$.ajax(
        type: "POST",
        url: "my_file.php",
        dataType: 'html',
        success: function(data)
            $('div#myID div.l_p_c div.l_p_i_c_w').prepend(data);
        
);

HTML：

<div class="l_p_w" id="myID">
    <div class="l_p_c">
        <div class="l_p_i_c_w">
       <!-- stuff, or may be empty. This is where I want my ajax data placed. -->
        </div>
    </div>
</div>

CSS：

.l_p_w 
    width:740px;
    min-height:250px;
    margin:0 auto;
    position:relative;
    margin-bottom:10px;


.l_p_c 
    position:absolute;
    bottom:10px;
    right:10px;
    width:370px;
    top:60px;


.l_p_i_c_w 
    position:absolute;
    left:5px;
    top:5px;
    bottom:5px;
    right:5px;
    overflow-x:hidden;
    overflow-y:auto;

【问题讨论】：

我怀疑是CSS，因为我之前用过很多次ajax，从来没有遇到过问题。

检查你的 div .l_p_i_c_w 是否有萤火虫检查数据，也在成功功能中提醒数据

我做了alert(data)，我看到了应该插入到div中的html，但是如果我使用...prepend(data)，它就不起作用。我仍然无法弄清楚发生了什么。

【参考方案1】：

我认为，如果您使用 prepend，您需要在附加之前将数据对象包装在 jquery 标记中，例如 $(data)，因为 prepend 会附加子项（对象）

$.ajax(
            type: "POST",
            url: "my_file.php",
            dataType: 'html',
            success: function(data)
                $('div#myID div.l_p_c div.l_p_i_c_w').prepend($(data));
            
    );

但是，如果您只想使用数据设置 div 的 html，请执行以下操作：

$.ajax(
        type: "POST",
        url: "my_file.php",
        dataType: 'html',
        success: function(data)
            $('div#myID div.l_p_c div.l_p_i_c_w').html(data);
        
);

第三个选项，尝试 prependTo

http://api.jquery.com/prependTo/

$.ajax(
    type: "POST",
    url: "my_file.php",
    dataType: 'html',
    success: function(data)
        $(data).prependTo($('div#myID div.l_p_c div.l_p_i_c_w'));
    
);

最后一次尝试：

$.ajax(
            type: "POST",
            url: "my_file.php",
            dataType: 'html',
            success: function(data)
                $('div#myID div.l_p_c div.l_p_i_c_w').html(data + $('div#myID div.l_p_c div.l_p_i_c_w').html());
            
    );

【讨论】：

<div class="l_p_i_c_w">里面可能还有其他的div，我想把我的ajaxed数据插入到顶部。

添加了第三个选项，使用 prependTo

这些答案都不起作用。它们只是我已经尝试过的不同版本。当我刷新页面时，我尝试 ajax 到 <div class="l_p_i_c_w"> 的数据就在那里，所以我知道我的 php 可以工作。我仍然无法让 ajax 工作。

您的 php 页面相对于 javascript 位于何处？它们是否在同一个域、子域、端口等上？这可能违反了同源政策...en.wikipedia.org/wiki/Same_origin_policy

它在同一个域上。我正在使用的 jquery 脚本将数据发送到我的 php 文件，然后插入到数据库中。所有这些工作正常。它只是不会将数据“ajax”回给我。我只有在刷新页面时才能看到它有效。

【参考方案2】：

 $('div#myID div.l_p_c div.l_p_i_c_w').prepend(data);

应该是

 $('#myID .l_p_c .l_p_i_c_w').html(data);

【讨论】：

这将替换 div 中的所有内容，对吗？我不想那样做。

【参考方案3】：

prependTo() 呢？

$.ajax(
            type: "POST",
            url: "my_file.php",
            dataType: 'html',
            success: function(data)
                $(data).prependTo('#myID .l_p_c .l_p_i_c_w');
            
    );

正如@rajesh 在他对您的问题的评论中提到的那样，尝试在成功时提醒数据以确保它按预期返回：

$.ajax(
            type: "POST",
            url: "my_file.php",
            dataType: 'html',
            success: function(data)
                alert(data);
            
    );

【参考方案4】：

试试这个：

$.ajax(
        type: "POST",
        url: "my_file.php",
        dataType: 'html',
        complete: function(jqXHR, settings)
            if (jqXHR.status == 200)
               $('div#myID div.l_p_c div.l_p_i_c_w').prepend(jqXHR.responseText);
        
);

或

$.ajax(
        type: "POST",
        url: "my_file.php",
        dataType: 'html'
).done(function(data) 
     $('div#myID div.l_p_c div.l_p_i_c_w').prepend(data);
);

【讨论】：

在dataType 之后出现意外的,。