在PHP循环中运行jQuery AJAX从PHP脚本中获取HTML

时间:2012-11-11 13:56:59

标签: php ajax jquery

我不得不再次问这个,对不起。所以我运行这个jQuery来滑动切换我的PHP循环输出中的span。我有一些PHP生成一些调用数据库,以获取每个项目的更详细信息。

我知道到目前为止我已经调用了PHP脚本。我可以看到返回的数据包是从PHP文件中回显的。但我很难让jQuery将返回的数据插入到指定的范围内。

这是循环项目的简化版本:

<span class="searchitem">

 <span style="visibility:hidden;" class="name">some name</span>

 <span class="btn">Details</span>

 <span class="itemdetails" style="display: none;">
   //hidden area to populate with returned ajax html from php script 
 </span>

</span>


<span class="searchitem">

 <span style="visibility:hidden;" class="name">another name</span>

 <span class="btn">Details</span>

 <span class="itemdetails">
   <div>
     <p>
     this is the area i need the html to populate
     </p>
   </div>
</span>

</span>.................

这是我正在尝试运行的jQuery。我知道一切都取得了成功。我无法从那里获得数据。

<script type="text/javascript">   
      var ajax_load = "<img src='images/loading.gif' style='width:50px;' alt='loading...' />"; 
      var loadUrl = "ajax/item_details.php";
      $(document).ready(function ()
              {
                    $('.searchitem').each(function () {

                    var itemname = $(this).find('.name').text();
                    var ename = encodeURI(itemname);
                    var requestUrl = loadUrl + ename;
                        $(this).find('.itemdetails').hide();
                        $(this).find('.btn').click(function ()
                        {
                            var returned = "";
                                $.ajax({
                                type: "GET",
                                url: loadUrl,
                                data: "name=" + ename,
                                dataType: "text",
                                error: function () { alert("error") },
                                success: function (data) { $(".ptavail").append(data); alert("successful") }
                                }); 
                    $(this).parent().find('.ptavail').html(ajax_load).slideToggle(1500).html(returned);
                        });
                    });
              });
</script>

正如您从代码中看到的那样,我正在尝试获取点击功能。我知道PHP文件正在接收调用并返回数据,但是我试图让jQuery用返回的数据填充.itemdetails。

这有什么问题?我是否需要将AJAX放入一个单独的函数中,以使其表现得像我需要的那样,或者我是否需要让它同步才能工作?我试图基本上替换.itemdetails之间的所有内容,首先是一个加载符号然后用AJAX返回的数据....现在我得到错误警告所以ajax调用有问题我知道它做了请求正确地,PHP返回结果但是让AJAX读取它们证明是有问题的。

我可以看到标题中的内容类型是文本,那么如何让AJAX正确地进行调用呢?

1 个答案:

答案 0 :(得分:1)

$(this).parent().find('.itemdetails').html(ajax_load).slideToggle(1500).html(data);

在Ajax请求的“成功”部分内部。

success: function(data) {
  $(this).parent().find('.itemdetails').html(ajax_load).slideToggle(1500).html(data);
}

成功函数就是说“当Ajax工作时,执行此操作”