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

抽象逻辑，创建执行您想要实现的任务的函数（在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)
             }

Answer 2

无需重写大量代码的最简单方法就是使用函数

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

否则，如果您对Promises很熟悉/熟悉，您可以更好地控制程序流程，如下所示

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

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

2 个答案: