вызвать функцию JavaScript через кнопку HTML - PullRequest
0 голосов
/ 02 апреля 2019

У меня есть простая проблема, которую задавали много раз, но я не могу ее решить.Я просто хочу из html-компонента вызвать файл javascript для запуска команды, нажав кнопку.

Но когда я нажимаю кнопку, ничего не происходит.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">

</head>
<body>

<p id="counter">Loading button click data.</p>


<button  id="buttonForScrapping">begin to scrap!</button>
<script>
  function startScrap(){
    jQuery.ajax({
      type:'get',
      url:'../../../scrapping.js',
      data:[],
      dataType:'json',
      success: function(rs)
      {},
      failure : function(rs)
      {}
    });
  }
</script>
</body>

</html>

This is the html code, and the js file is : 


const {exec}  = require('child_process');
const button = window.document.getElementById('buttonForScrapping');
button.addEventListener('click', function(e) {

exec('scrapy crawl address', (err, stdout, stderr) => {


  console.log(`stdout: ${stdout}`);
  console.log(`stderr: ${stderr}`);

});});

команда scrapyэто команда python, поэтому мне нужно сделать ajax-вызов, чтобы запустить его на сервере, я думаю.

Спасибо за помощь!

Ответы [ 3 ]

1 голос
/ 02 апреля 2019

Чтобы запустить код на стороне сервера, вам действительно нужен сервер для ответа на запросы.Это может выглядеть так:

const { exec }  = require('child_process');
const app = require("express")(); // "npm install express" to install this dependency

app.get("/adress", (req, res) => { // server this path
 exec('scrapy crawl address', (err, stdout, stderr) => {

   res.json({ // respond to client if the command was done
     stdout: "" + stdout,
     stderr: "" + stderr
   });

});

app.listen(80,() => console.log("server started"));

Это откроет сервер на порту 80, если вы запустите скрипт с node ./scrapping.js, и ответит JSON, если вы посетите его на http://localhost/adress

Теперь при каждом нажатии кнопки на внешнем интерфейсе вы должны запустить aJAX-запрос к бэкэнду:

// "async" lets us write callbacks more gracefully
button.addEventListener('click', async function(e) {
 try {
  // fetch is like $.ajax, but its native
  // 'await' is like a callback
  const { stdout, stderr } = await fetch("http://localhost/adress").then(res => res.json());
   console.log(stdout, stderr);
 } catch(err) {
   console.error("error occured while pinging server", err);
 }
});
0 голосов
/ 02 апреля 2019

Чтобы выполнить функцию JavaScript при нажатии кнопки, вы можете использовать пример, подобный этому .

Сначала создайте кнопку HTML и используйте onClick ():

<button onClick="doSomething()">Button Text</button>

onClick () сообщает браузеру выполнить функцию JavaScript. Теперь в файле JavaScript поставьте свою функцию:

function doSomething() {
  alert('do something');
  console.log('do something ')
}

Эта простая функция выводит в журнал консоли и выдает предупреждение, но функции могут быть намного более сложными, чем это.

Чтобы выполнить серверный метод или команду python со страницы HTML, вам, вероятно, потребуется более сложная архитектура.

0 голосов
/ 02 апреля 2019

Вы должны включить файл js в файл html, как в примере. Примечание: Убедитесь, что путь к файлу js указан правильно в атрибуте src script. <script src ="myScript.js"></script>

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...