javascript - 从 JQuery 函数返回 html。

Question

我正在尝试通过使用 Web 服务并解析 xml 来动态构建一系列复选框...

我尝试使用以下代码将其返回到已经存在的模式: html+=“你好”; html += loadSeviceLineXML(); html += “世界”;但得到这个:Hello [object Object] World

如果我让它写入它自己的窗口，它就会正确写入。奇怪的是，如果在函数末尾弹出alert():，[object Object]仍然会显示，但在它之后，所有html都会在“World”之前正确显示:你好[对象对象]咨询 商业咨询服务 商业智能与分析 变革和计划管理 性能提升

这是我的函数的代码:

    function loadSeviceLineXML()  //buildParams
    {     

        jQuery.support.cors = true;     
        var URL = "http://sharepoint.com/_layouts/TaxonomyService/TaxonomyWebService.asmx/GetTermsXML?search=Service%20Line";
        var html = $.ajax({
            type: "GET",
            url: URL,
            dataType: "xml",
            contentType: "application/xml; charset=utf-8",
            data: {},
            success: function (data) {

               // var myWindow = window.open("", "MsgWindow", "width=400, height=600,  scrollbars=yes");
                //myWindow.document.write("<form action='' method='get'>");

                $(data).find("MainTerm").each(function() {

                     var mainTerm = $(this).attr("Name");
                     var mainTermId = $(this).attr("Id");                       
                    if(mainTerm != undefined){
                        html += "<li><input type='checkbox' name='mainTerm[]' value='" + mainTermId + "'>" + mainTerm + "</li>";
                        html +="<ul>";
                        $(data).find("Sector").each(function() {
                                var sector = $(this).attr("Name");
                                var sectorId = $(this).attr("Id");   //$(this).find("Name").text();
                                var sectorParent = $(this).attr("Parent");
                                if(sector != undefined  && sectorParent == mainTerm ){
                                    html +="<li><input type='checkbox' name='mainTerm[]' value='" + sectorId + "'>" + sector + "</li>";
                                    html +="<ul>";

                                    $(data).find("SubSector").each(function(){
                                            var subSector = $(this).attr("Name");
                                            var subSectorId = $(this).attr("Id");
                                            var subSectorParent = $(this).attr("Parent");
                                            if(subSector != undefined && subSectorParent == sector ){
                                                html +="<li><input type='checkbox' name='mainTerm[]' value='" + subSectorId + "'>" + subSector +"</li>";
                                            }                                                   
                                    });  
                                    html +="</ul>";
                                }                               
                        });
                        html +="</ul>";

                    }

                    //myWindow.document.write("</ul>") 

                });  
                //alert("html " + html);   <--- this displays all the tags.
                // myWindow.document.write("</form>");
             }
        }); 

        return html;        
    }

任何帮助将不胜感激。

Answer 1

排序的答案是您返回一个 Ajax 回调，而不是您尝试在其中构建的字符串。长的答案是你需要重新组织你的方法。与其尝试创建一个返回 html 的同步函数，为什么不尝试一个内部包含代码的函数来设置它自己的输出(当异步调用完成时)。要以这种方式修改您的函数，您可以尝试:

function loadSeviceLineXML() //buildParams
  {
    jQuery.support.cors = true;
    var URL = "http://sharepoint.com/_layouts/TaxonomyService/TaxonomyWebService.asmx/GetTermsXML?search=Service%20Line";
    $.ajax({
      type: "GET",
      url: URL,
      dataType: "xml",
      contentType: "application/xml; charset=utf-8",
      data: {},
      success: function(data) {
        var html = "";
        $(data).find("MainTerm").each(function() {
          var mainTerm = $(this).attr("Name");
          var mainTermId = $(this).attr("Id");
          if (mainTerm != undefined) {
            html += "<li><input type='checkbox' name='mainTerm[]' value='" + mainTermId + "'>" + mainTerm + "</li>";
            html += "<ul>";
            $(data).find("Sector").each(function() {
              var sector = $(this).attr("Name");
              var sectorId = $(this).attr("Id");
              var sectorParent = $(this).attr("Parent");
              if (sector != undefined && sectorParent == mainTerm) {
                html += "<li><input type='checkbox' name='mainTerm[]' value='" + sectorId + "'>" + sector + "</li>";
                html += "<ul>";

                $(data).find("SubSector").each(function() {
                  var subSector = $(this).attr("Name");
                  var subSectorId = $(this).attr("Id");
                  var subSectorParent = $(this).attr("Parent");
                  if (subSector != undefined && subSectorParent == sector) {
                    html += "<li><input type='checkbox' name='mainTerm[]' value='" + subSectorId + "'>" + subSector + "</li>";
                  }
                });
                html += "</ul>";
              }
            });
            html += "</ul>";
          }

          $('[ELEMENT YOU WANT TO UPDATE]').html(html);
        });
      }
    });
  }

这里函数不返回任何内容，而是由成功回调负责插入它生成的 HTML。您需要这样做，因为对 $.ajax() 的调用将立即触发，但对其成功回调的调用只有在返回 AJAX URL 后才会触发。