如何从AJAX请求传递两个回调函数相同的变量?

时间:2017-08-24 17:49:38

标签: javascript jquery ajax

我对编码很新,目前正致力于FCC上的Wikipedia查看器项目。我有两个依赖于AJAX请求并使用相同数据的回调函数,一个用于在用户输入输入时建议搜索,一个用于在输入时显示结果。

有关建议:

function searchSuggest(data) {
  $('.suggestions').empty();

  var title = Array.from(data[1]);
  var url = Array.from(data[3]);
  var listLength = title.length;

  for (var i = 0; i < listLength; i++) {
    var listItem = `
      <li>
        <a href="${url[i]}" target="_blank">${title[i]}</a>
      </li>
    `;
    $('.suggestions').append(listItem);
  }
}

结果:

function display(data) {
  $('.results').empty();
  $('.suggestions').empty();

  var title = Array.from(data[1]);
  var snippet = Array.from(data[2]);
  var url = Array.from(data[3]);
  var listLength = title.length;

  for (var i = 0; i < listLength; i++) {
    var result = `    
      <a href="${url[i]}" target="_blank">
        <li>
          <span>${title[i]}</span>
          <p>${snippet[i]}</p>
        </li>
      </a>
    `;
    $('.results').append(result);
  }
  $('.results').addClass('show');
}

AJAX请求返回this

有没有办法将变量传递给两个函数而不重复自己?试图创建一个对象变量来包含数组但是没有用。

完整代码位于codepen here

2 个答案:

答案 0 :(得分:0)

您可以根据需要将变量/值传递给任意数量的函数:

ajax(query, function(data) {
  // maybe check keycode here?
  display(data);
  searchSuggest(data);
});

答案 1 :(得分:0)

我认为这符合您的想法。 https://codepen.io/anon/pen/jLpLYL?editors=0010

<table><tr><th>Col1</th><th>Col2</th><th>Col3</th><th>Col4</th><th>Col5</th></tr><tr><td>1a<br></td><td>1b</td><td>1c</td><td>1d</td><td>1e</td></tr><tr><td>2a</td><td>2d</td><td>2e</td><td><br></td><td><br></td></tr><tr><td>3a</td><td>3d</td><td>3e</td><td><br></td><td><br></td></tr><tr><td>4a</td><td>4b</td><td>4c</td><td>4d</td><td>4e</td></tr></table>

我创建了一个dataGlobal变量,只调用searchSuggest的ajax请求。

我将dataGlobal变量设置为ajax请求的结果,然后使用这些存储的结果来调用display。

希望这会有所帮助:)