Ajax调用的JSON响应 [英] Ajax call for the json response

问题描述

我想申请Ajax调用从JSON收到的响应。

下面我的HTML。

 ＆LT; D​​IV ID =标签＆GT;
＆LT; UL＆GT;
＆LT;李＆GT;＆LT; A HREF =＃ed_pro＆GT;产品类别＆LT; / A＆GT; ＆LT; /李＆GT;
＆LT;李＆GT;＆LT; A HREF =＃ed_img＆gt;添加图片＆LT; / A＆GT; ＆LT; /李＆GT;
＆LT;李＆GT;＆LT; A HREF =＃ed_txt＆gt;添加文字＆lt; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; D​​IV ID =ed_pro＆GT;
＆LT; / DIV＆GT;
＆LT; D​​IV ID =ed_img＆GT;
＆LT; / DIV＆GT;
＆LT; D​​IV ID =ed_txt＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

和

 函数handleTabSelect（数据）{
    VAR项目='＆LT; UL＆GT;';
    $每个（数据，功能（我，对象）{
        项目+ ='＆LT;李＆GT;＆LT;一个ID =main_cat的href =＃＆GT; + object.img_cat_des +'＆LT; / A＆GT;＆LT; /李＆GT;';
    }）;
    项目+ ='＆LT; / UL＆GT;';
    $（'＃ed_img）追加（项目）。
    标志= 1;
}

$（'＃main_cat）。点击（函数（）{
    VAR为url1 = $（本）.attr（HREF）;
    警报（URL1）;
}）;

$（＃标签）选项卡（）。

$（＃标签）。绑定（tabsselect功能（即标签）{

    如果（旗== 0）{
        jQuery.ajax（{
            键入：POST，
            网址：'？Q =设计/ lab_tab'，
            数据类型：JSON，
            数据：'slider_value ='+ tab.index，
            成功：handleTabSelect，
            错误：函数（XHR，状态）{
                警报（xhr.statusText）;
            }

        }）;
    }
}）;
 

获取从JSON响应后，上面的脚本将追加为列表

 ＆LT; UL＆GT;
＆LT;李＆GT;
＆LT;一个ID =main_cat的href =＃＆GT;动物＆LT; / A＆GT;
＆LT; /李＆GT;
＆LT;李＆GT;
＆其中;一的id =main_cat的href =＃＆GT;占星与所述; / a取代;
＆LT; /李＆GT;
＆LT; / UL＆GT;
 

我如何申请进一步Ajax调用了。

在单击A HREF，它永远不会调用

  $（'＃main_cat）。点击（函数（）{
VAR为url1 = $（本）.attr（HREF）;
警报（URL1）;
}）;
 

在此先感谢。

解决方案

 ＆LT;一个ID =main_cat的href =＃＆GT;动物＆LT; / A＆GT;
  ＆其中;一的id =main_cat的href =＃＆GT;占星与所述; / a取代;
 

• 编号应该是唯一的，你有相同的 ID =>多个元素的无效的HTML
• 在来创建一个委托的事件处理程序。
使用

---

固定标记：

 ＆LT;一类=main_cat的href =＃＆GT;动物＆LT; / A＆GT;
  ＆其中;一类=main_cat的href =＃＆GT;占星与所述; / a取代;
 

JavaScript的：

  $（'staticContainer'）。在（'点击'，'.main_cat'，函数（）{
    VAR为url1 = $（本）.attr（HREF）;
    警报（URL1）;
}）;
 

您应该替换选择： staticContainer 获取最近的静态包含新的锚元素（DOM的准备存在）

I am trying to apply ajax call for the response received from json.

Below my HTML.

<div id = "tabs">
<ul>
<li><A href="#ed_pro">Product Category</A> </li>
<li><A href="#ed_img">Add Image</A> </li>
<li><A href="#ed_txt">Add Text</A></li>
</ul>    
<div id="ed_pro">
</div>
<div id="ed_img">
</div>
<div id="ed_txt">
</div>
</div>

and

function handleTabSelect(data) {
    var items = '<ul>';
    $.each(data, function(i, object) {
        items += '<li><a id="main_cat" href=#>' + object.img_cat_des + '</a></li>';
    });
    items += '</ul>';
    $('#ed_img').append(items);
    flag = 1;
}

$('#main_cat').click(function() {
    var url1 = $(this).attr("href");
    alert(url1);
});

$("#tabs").tabs();

$("#tabs").bind("tabsselect", function(e, tab) {

    if (flag == 0) {
        jQuery.ajax({
            type: 'POST',
            url: '?q=design/lab_tab',
            dataType: 'json',
            data: 'slider_value=' + tab.index,
            success: handleTabSelect,
            error: function(xhr, status) {
                alert(xhr.statusText);
            }

        });
    }
});​

After getting the response from json, the above script will append list of as

<ul>
<li>
<a id="main_cat" href="#">Animals</a>
</li>
<li>
<a id="main_cat" href="#">Astrology</a>
</li>
</ul>

How I can apply further ajax call for .

On clicking the a href, it never invokes

$('#main_cat').click(function () {
var url1 = $(this).attr("href");
alert (url1);
});

Thanks in advance.

解决方案

  <a id="main_cat" href="#">Animals</a>
  <a id="main_cat" href="#">Astrology</a>

• Id should be unique, you have multiple elements with the same id => invalid HTML
• use on to create a delegate event handler.

---

Fixed markup:

  <a class="main_cat" href="#">Animals</a>
  <a class="main_cat" href="#">Astrology</a>

Javascript:

$('staticContainer').on('click', '.main_cat', function(){
    var url1 = $(this).attr("href");
    alert (url1); 
});

You should replace selector: staticContainer to fetch the closest static(exist on DOM ready) element that contains the new anchors.

这篇关于Ajax调用的JSON响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！