ajaxレスポンスとHTMLコードを区別する方法は？

Question

私は以下のAJAXリクエストを持っている：

$.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コード（情報を表示するために）と結果をどのように分けることができますか？私はスパゲティコードを書くのを避けようとしています。

Answer 1

あなたは多くのコードを書き換えることなく、最も簡単な方法は、あなたが約束を熟知/ OKならちょうど、

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); 
    }); 
} 

---

そうでない関数を使用することで、あなたが得ることができますこのようなプログラムの流れをはるかに良く制御する

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); 

Answer 2

抽象的な論理、あなたが達成したいタスクを行う（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) 
      }