代码之家  ›  专栏  ›  技术社区  ›  Huskie69

jQuery-将服务器上的文件内容发布到页面

  •  0
  • Huskie69  · 技术社区  · 6 年前

    <!DOCTYPE html>
    <html>
     <head>
      <title></title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <style>
      #result {
       position: absolute;
       width: 100%;
       max-width:870px;
       cursor: pointer;
       overflow-y: auto;
       max-height: 400px;
       box-sizing: border-box;
       z-index: 1001;
      }
      .link-class:hover{
       background-color:#f1f1f1;
      }
      </style>
     </head>
     <body>
      <br /><br />
      <div class="container" style="width:900px;">
       <h3 align="center">Search ...</h3>   
       <br /><br />
       <div align="center">
        <input type="text" name="search" id="search" placeholder="Search ..." class="form-control" />
       </div>
       <ul class="list-group" id="result"></ul>
       <br />
      </div>
     </body>
    </html>
    
    <script>
    $(document).ready(function(){
     $.ajaxSetup({ cache: false });
     $('#search').keyup(function(){
      $('#result').html('');
      $('#state').val('');
      var searchField = $('#search').val();
      var expression = new RegExp(searchField, "i");
      $.getJSON('data.json', function(data) {
       $.each(data, function(key, value){
        if (value.name.search(expression) != -1 || value.location.search(expression) != -1)
        {
         $('#result').append('<li class="list-group-item link-class"><img src="'+value.image+'" height="40" width="40" class="img-thumbnail" /> '+value.name+' | <span class="text-muted">'+value.location+'</span></li>');
        }
       });   
      });
     });
     
     $('#result').on('click', 'li', function() {
            $.post("https://123.xyz/endpoint",
        
        -- payload here ---
        
        function(data,status){
          alert("Data: " + data + "\nStatus: " + status);
        });
       
     });
    });
    
    </script>
    

    json数组以以下格式存储对象:

    {
        "name":"Apples",
        "image": "images/apples.jpg",
        "location":"Depot 1, 12",
        "path":"https://123.xyz/data/343r.xml"
      },
      {
        "name":"Oranges",
        "image": "images/oranges.jpg",
        "location":"Depot 1, 13"
        "path":"https://123.xyz/data/331r.xml"
      },
    

    数组中的“path”对象表示文件在服务器上的物理位置。

    当用户搜索并单击相关信息时,我希望使用一个函数将服务器上平面文件的内容发布到服务器上的另一个端点(即传递XML文件--> https://123.xyz/endpoint ).

    这些文件是XML数据—有点资源密集型,但它们是否可以读入另一个变量,然后作为字符串发布到端点?

    非常感谢您的建议。

    0 回复  |  直到 6 年前
    推荐文章