如何区分ajax响应和HTML代码？

我具有低于一个AJAX请求：如何区分ajax响应和HTML代码？

$.ajax({ 
      url: "/geodata", 
      data: {'lat':lat,'lng':lng}, 
      type: "POST", 
      success: function(result) { 
       if (typeof result == "string") { 
        console.log("helo"); 
       } else { 
       // do things with the result here

结果是一个数组作为这样：

arr = [{address: '1300 BRYANT ST', 
    block: '3903', 
    cnn: '517000', 
    latitude: '37.7690871267671', 
    longitude: '-122.411527667132', 
    received: '2016-05-06' }, 

    more objects];

我要使用的地址和块信息，并显示它们作为要素的列表我html页面。

我担心的是，我不希望让我的ajax函数过长，并在请求中执行我的HTML编码。我如何分离DOM代码（用于列出信息）和收到的结果？我试图避免写意大利面代码。

来源

2016-09-20 newenthusiast

，您无需重新编写大量代码的最简单的方法是只使用功能

function getLocations(lat, lng) { 
    let req = $.post('/geodata', {lat: lat, lng: lng}); 
    req.done(function(result) { renderLocations(result); }); 
    req.fail(function(jqxhr, textStatus, err) { console.error(err); }); 
    return req; 
} 

function renderLocations(locations) { 
    locations.foreach(function(location) { 
    // render location node 
    // <div class="location"> 
    // <p>{location.address}</p> 
    // <p>{location.lat} {location.lng}</p> 
    // </div> 
    $('#locations').append(childNode); 
    }); 
}

否则，如果你是OK /熟悉的承诺，你可以得到对这样的程序的流程有更好的控制

function getLocations(lat, lng) { 
    return new Promise(function(resolve, reject) { 
    let req = $.post('/geodata', {lat: lat, lng: lng}); 
    req.done(function(data, textStatus, req) { resolve(data); }); 
    req.fail(function(req, textStatus, err) { reject(err); }); 
    }); 
} 

function renderLocations(parentNode) { 
    return function(locations) { 
    locations.foreach(function(location) { 
     // render location node 
     // <div class="location"> 
     // <p>{location.address}</p> 
     // <p>{location.lat} {location.lng}</p> 
     // </div> 
     parentNode.append(childNode); 
    }); 
    }; 
} 

function logError(err) { 
    console.error('an error occurred:', err.message); 
} 

// put them together 
getLocations(37, -122).then(renderLocations($('#locations')), logError);

来源

2016-09-20 21:29:45 naomik

对返回的承诺使用本地承诺是否有优势通过jQuery的Ajax方法？ – 1252748

如果你想要我的意见，一个是本地垃圾，另一个是第三方垃圾。与第三方专有材料相比，我发现合理投资时间本地人更容易。 JavaScript Promise是我们得到的，所以你不妨去了解它：s – naomik

你觉得缺乏这两种实现的感觉如何？有没有可以接受的库（节点，角等）？ – 1252748

抽象逻辑，创建执行你想要实现的任务的函数（在ajax调用之外声明它们），只要你有ajax响应就调用它们;

function insertDataInDom(data){ 
    document.getElementById("data1").innerHTML = data.block 
    document.getElementById("data2").innerHTML = data.address 
} 

$.ajax({ 
     url: "/geodata", 
     data: {'lat':lat,'lng':lng}, 
     type: "POST", 
     success: function(result) { 
      if (typeof result == "string") { 
       console.log("helo"); 
      } else { 
       insertDataInDom(result.data) 
      }

来源

2016-09-20 21:28:17 StackOverMySoul

如何区分ajax响应和HTML代码？

回答

相关问题