Как реализовать различное поведение для функции в анонимной функции JavaScript - PullRequest
Новая
       7

Как реализовать различное поведение для функции в анонимной функции JavaScript

0 голосов
/ 03 июня 2018

Я новичок в JavaScript и хочу использовать функцию send_request дважды, но с другим поведением.Элемент с именем button1 должен показывать ответ на элемент, тогда как button2 нет.

  function send_request(url) {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', url, true);
    xhr.send('data=test');
    xhr.onload = function () {document.getElementById('reply').innerHTML = xhr.responseText;};
  }
  document.getElementById('button1').addEventListener('click', function() { send_request("/data.php"); });
  document.getElementById('button2').addEventListener('click', function() { send_request("/clear_data.php"); });

Возможно ли это?

Ответы [ 2 ]

0 голосов
/ 03 июня 2018

Вы могли бы дать send_request другой параметр, функцию, которая вызывается с responseText, чтобы вы могли передать одну функцию, которая присваивает reply, и другую функцию, которая вместо этого делает все, что вы хотите: 

function send_request(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', url, true);
  xhr.send('data=test');
  xhr.onload = () => callback(xhr.responseText);
}
document.getElementById('button1').addEventListener('click', function() {
  send_request("/data.php", (responseText) => {
    document.getElementById('reply').innerHTML = responseText;
  });
});
document.getElementById('bitton2').addEventListener('click', function() {
  send_request("/clear_data.php", (responseText) => {
    console.log('bitton 2 response: ' + responseText);
  });
});
0 голосов
/ 03 июня 2018

Есть несколько способов сделать это, но если мы просто начнем с вашего основного требования, вы могли бы send_request просто взять аргумент, который определяет, должен ли элемент показывать ответ. 

function send_request(url, showResponse) {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', url, true);
    xhr.send('data=test');
    xhr.onload = function () {
      // If showResponse is true, log the response. If not, don't
      showResponse ? document.getElementById('reply').innerHTML = xhr.responseText : null;
    };
  }

  document.getElementById('button1').addEventListener('click', function() { 
    // Call the function and indicate that the response should be shown
    send_request("/data.php", true); 
  });

  document.getElementById('bitton2').addEventListener('click', function() { 
    // Call the function and indicate that the response should not be shown
    send_request("/clear_data.php", false); 
  });
...