[关闭]
@ruoli 2017-03-20T13:46:41.000000Z 字数 3070 阅读 1841

Javascript jquery 请求 ElasticSearch

Web前端

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  8.     <title>搜索引擎示例页面</title>
  10.     <!-- Bootstrap -->
  11.     <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  13.     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  14.     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  15.     <!--[if lt IE 9]>
  16.       <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  17.       <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  18.     <![endif]-->
  19.     <style type="text/css">
  20.       .container{
  21.         padding-top: 50px;
  22.       }
  23.       .input-group-addon{
  24.         cursor: pointer;
  25.       }
  26.       .input-group-addon:hover{
  27.         background-color: #3A5C8B;
  28.         color: #fff;
  29.       }
  30.       #search-result{
  31.         margin: 50px 0;
  33.         display: none;
  34.       }
  35.     </style>
  37.   </head>
  38.   <body>
  40.     <div class="container">
  41.     <h2>搜索示例</h2>
  42.     <div class="input-group">
  44.       <input type="text" class="form-control" id="search-content">
  45.       <span class="input-group-addon" id="search-btn">搜索</span>
  46.     </div>
  47.     <h5>本示例采用ElasticSearch作为搜索引擎，所有数据均来源于搜索引擎</h5>
  49.     <div class="panel panel-default" id="search-result">
  50.       <div class="panel-heading">搜索结果</div>
  51.       <div class="panel-body" id="result-content">
  52.          <table class="table table-striped table-bordered table-hover">
  53.           <thead>
  54.             <tr>
  55.             <th>序号</th>
  56.             <th>时间</th>
  57.             <th>设备名称</th>
  58.             <th>厂站</th>
  59.             <th>电压等级</th>
  60.             <th>动作类型</th>
  61.             <th>区域</th>
  62.             <th>动作次数</th>
  63.             </tr>
  64.           </thead>
  65.           <tbody>
  67.           </tbody> 
  68.        </table>
  69.        <p>总共搜索到<span id="total"></span>条结果，耗时<span id="took"></span> 秒 </p>
  70.       </div>
  71.     </div>
  73.   </div>
  74.     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  75.     <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  76.     <!-- Include all compiled plugins (below), or include individual files as needed -->
  77.     <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  78.     <script type="text/javascript">
  79.       $(function(){
  80.          $("#search-btn").click(function(){
  81.            var searchContent=$("#search-content").val();
  82.            if(searchContent!=''){
  83.             var data= JSON.stringify({"query": {"multi_match": {"query": searchContent,"fields":["sbmc","cz","dydj","dzlx","qy","sj"]}}});
  85.              jQuery.ajax({
  86.                     url: "http://10.122.111.83:9200/library/tj_bhdz/_search",
  87.                     type: "POST",
  88.                     data: data,
  89.                     dataType: "json",
  90.                     success: function(msg) {
  92.                         $("#total").text(msg.hits.total);
  93.                         $("#took").text(msg.took/1000);
  94.                         loadData(msg.hits.hits);
  96.                     },
  97.                     error: function(XMLHttpRequest, textStatus, errorThrown) {
  98.                       alert("发生错误");
  99.                         // alert(JSON.stringify(XMLHttpRequest));
  100.                         // alert(XMLHttpRequest.readyState);
  101.                         // alert(textStatus);
  102.                     },
  103.                     complete: function(XMLHttpRequest, textStatus) {
  104.                         this; // 调用本次AJAX请求时传递的options参数
  105.                     }
  106.                 });
  107.            }
  111.          });
  112.       });
  114.       function loadData(data){
  115.         $(".table").find("tbody").html("");
  116.         $(data).each(function(i,n){
  117.            var td="<tr><td>"+(i+1)+"</td>"+ 
  118.                   "<td>"+n._source.sj+"</td>"+
  119.                   "<td>"+n._source.sbmc+"</td>"+
  120.                   "<td>"+n._source.cz+"</td>"+
  121.                   "<td>"+n._source.dydj+"</td>"+
  122.                   "<td>"+n._source.dzlx+"</td>"+
  123.                   "<td>"+n._source.qy+"</td>"+
  124.                   "<td>"+n._source.dzcs+"</td></tr>";
  125.             $(".table").find("tbody").append(td);
  126.         });
  127.         $("#search-result").fadeIn(200);
  128.       }
  130.       $('#search-content').keydown(function(e){
  131.         if(e.keyCode==13){
  132.              $("#search-btn").click();
  133.         }
  134.       }); 
  135.     </script>
  136.   </body>
  137. </html>
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注