Question

我使用ajax来调用一个看起来像的页面：

<div class="ui-block-a">
    <div class="jqm-block-content invoicehomepage">
        <h3>Invoices</h3>
        <p><a href="pages/" data-ajax="false" class="ui-link">Pages</a></p>
        <p><a href="navigation/" data-ajax="false" class="ui-link">Navigation</a></p>
        <p><a href="loader/" data-ajax="false" class="ui-link">Loader</a></p>
        <p><a href="transitions/" data-ajax="false" class="ui-link">Transitions</a></p>
    </div>
</div>

我的ajax电话是：

var pageContent = '';
         $.ajax({
              url: 'jsp/home/home.jsp',
              type: 'POST',
              dataType:'json',
              success:function(data) {

                  $.each(data, function(i, v) {
                        $.ajax({
                              url: 'tmpl/homePortlet/'+v.link+'.html',
                              dataType : "html",
                              success: function(html_data) {
                              //var result = $('</div>').append(html_data).find('h3').html();
                                  //$('h3').html(v.portletName);
                                  pageContent +=  html_data;
                                  //console.log(pageContent);
                              }
                        });
                        console.log(pageContent+'sssss');
                  });

              }
        });

我想用我从第二次ajax调用获得的值更改h3标签中的文本。

感谢您的帮助。

Answer 1

使用：$('h3').text(v.portletName);

Answer 2

您需要通过在Ajax Call中获得的内容中找到它来更改HTML元素h3：

pageContent = $(html_data).find("h3:first").html(" YOUR-TEXT-YOU-WANNA-PUT ").parent();

<强>更新

我认为你应该在第二次ajax调用中使用async: false。其次，我不认为您需要使用pageContent将html存储/更新到某个变量中。您应该使用JQuery .append() method：

$.ajax({
    url: 'jsp/home/home.jsp',
    type: 'POST',
    dataType:'json',
    success:function(data) {
        $.each(data, function(i, v) {
            $.ajax({
                url: 'tmpl/homePortlet/'+v.link+'.html',
                dataType : "html",
                async: false,
                success: function(html_data) {

                    var new_html_data = $(html_data).find("h3:first").html(v.portletName).parent();
                    $('.ui-grid-a').append(pageContent);
                }
            });
        });
    }
});

Answer 3

您的AJAX请求似乎是异步的..

您可以在ajax请求中添加async : false,选项，因此当请求结束，第二个请求开始并且第二个ajax请求成功时，您可以更改H3标记的文本。

var pageContent = '';
$.ajax({
     url: 'jsp/home/home.jsp',
     type: 'POST',
     dataType:'json',
     async:false,// add this line so the success callback execute after response receive.
     success:function(data) {
         $.each(data, function(i, v) {
               $.ajax({
                     url: 'tmpl/homePortlet/'+v.link+'.html',
                     dataType : "html",
                     async:false,// add this line so the success callback execute after response receive.
                     success: function(html_data) {
                         $('h3').html(v.portletName);
                         pageContent +=  html_data;
                     }
               });
               console.log(pageContent+'sssss');
         });

     }
);

j3标签中的JQuery文本更改

3 个答案: