Question

我是前端脚本中的noob，需要一些关于制作javascript的帮助。

使用谷歌，我能够取得一些进展，但无法获得所需的结果。

我有shell脚本，它按预期工作。现在我需要为用户创建简单的UI，他们将输入start_date和end_date作为报告，这需要被抓取并传递给shell脚本。

我已经读过，不可能直接从javascript调用shell脚本，所以我调用简单的PHP文件，然后执行shell脚本。

截至目前，我的javascript可以执行此操作并且shell脚本正在执行。

我需要添加抓取start_date和end_date的功能，重要的是将其转换为unix tick格式并将其传递给shell脚本。

这是我的脚本

的javascript

＆＃13;

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/jquery-ui-timepicker-addon.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/jquery-ui-timepicker-addon.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datetimepicker1,#datetimepicker2" ).datetimepicker();
  });
  </script>
<script type="text/javascript">

function submitAction()  {

$.ajax({
  url:"report.php",
  type: "POST"
})
}

</script>
</head>
<body>
 
<p>Start Date: <input type="text" id="datetimepicker1"></p>
<p>End Date: <input type="text" id="datetimepicker2"></p>
<p><input type="button" onclick="submitAction()" value="Get Report" /></p>

 
</body>
</html>

＆＃13;

PHP

＆＃13;

<?php
$output = exec("./exceptions_report.sh 1427955771711 1427998971711");
echo 'Report will be sent to your mail';
?>

＆＃13;

壳

＆＃13;

startdate=$1
enddate=$2
curl -X POST  {http://localhost:9200/_search?} -d '{"query":{"filtered":{"query":{"bool":{"should":[{"query_string":{"query":"*"}}]}},"filter":{"bool":{"must":[{"range":{"@timestamp":{"from":$startdate,"to":$enddate}}},{"terms":{"level.raw":["ERROR"]}}]}}}},"size":1900,"fields":["logdate","level","device_id","thread","category","messagetext"],"sort":[{"@timestamp":{"order":"asc","ignore_unmapped":true}},{"@timestamp":{"order":"asc","ignore_unmapped":true}}]
      }' > input.json
#
cat input.json | jq '.hits.hits[].fields' --compact-output | sed 's/[][]//g' | recs tocsv --key logdate,level,device_id,thread,category,messagetext > report.csv
#
mail -s "Exceptions report" -a report.csv "mail_adress" << EOM
Please find exceptions report attached.
EOM
#

＆＃13;

Answer 1

在你的html中，添加一个表单，如下所示：

<form id="form" action="" method="POST">
  <p>Start Date: <input type="text" name="date_1" id="datetimepicker1"></p>
  <p>End Date: <input type="text" name="date_2" id="datetimepicker2"></p>
  <p><input type="submit" value="Get Report" /></p>
</form>
<div id="AjaxResult"></div>

<script type="text/javascript">
$(document).ready(function(){
  $('#form').on('submit', function(e){
    e.preventDefault();
    data = $(this).serialize();
    $.ajax({
      url:"report.php",
      type: "POST",
      data: data,
      success: function(data){
        $('#AjaxResult').html(data);
      }
    });
  });
});
</script>

此处我们使用.serialize()作为表单数据
并在提交#form
report.php的结果将返回到html

#AjaxResult

e.prventDefault()取消默认表单提交操作阻止页面刷新，

<小时/> 在PHP（report.php）中，您可以获得这样的输入值：

<?php

$date_1 = $_POST['date_1'];
$date_2 = $_POST['date_2'];

echo $date_1 . "<br>";
echo $date_2 . "<br>";

$output = exec("./exceptions_report.sh 1427955771711 1427998971711");
echo 'Report will be sent to your mail';

?>

将输出：

04/08/2015 00:00 // user selection
04/10/2015 00:00 // user selection
Report will be sent to your mail

使用成功回调

中的.html()方法在<div id="AjaxResult"></div>内部

Answer 2

小修正，可能对其他人有用。在测试期间，我发现为了确保将变量正确传递给shell脚本，需要在php中使用escapeshellarg。

$ date_1 = escapeshellarg（$ _ POST ['date_1']）;
$ date_2 = escapeshellarg（$ _ POST ['date_2']）;

从jquery timepicker读取输入并将其传递给php脚本

2 个答案: