Question

我创建了一个单页应用程序。基本上，我创建了一个HTML页面，该页面接受来自用户的输入并调用Javascript，该Javascript进行ajax调用以进行休息服务。返回响应后，我将数据追加到表并在同一页面中显示结果。但是现在我希望一页中的输入文本框和表格在另一页上显示。我该如何实现？

我的HTML代码：

   <!DOCTYPE html>
   <html>
   <head>
   <script type="text/javascript" src="index.js"></script>
   <style>
   .ApplicationName{
     font-family: 'Times New Roman';
     font-style: normal;
     font-size:40px;
     color: rgba(66,138,201,1);
     height:38px;
     width:auto;
     font-weight: bold;
     margin-left: 380px;
     text-align:center;
    }
   table{
     font-family:arial,sans-serif;
     border-collapse: collapse;
     width:100%
    }
   td,th{
     border:1px solid #dddddd;
     text-align: left;
     padding: 20px;
   }
   #table {
     margin-left: -850px;
    }
  </style>
  </head>
   <body>
    <div class ="container" style="background-color: rgba(66,138,201,1)">
            <div class ="navbar-header">
            <p  class="ApplicationName" style="color: white;">JIRA-STATUS TRACKER</p>
            </div>
    </div>
    <br>
    <div class="col-sm-4"></div>
    <div class="row">

                  <div class="form-group col-sm-4">
                     <label for="name">Search by Manager</label>

    <input type="managerid" class="form-control" id="ManagerId"   type ="text" autocomplete="off"  maxlength="8" onkeyup="alphanumOnly(this)" placeholder="ManagerId"></input>
    <button id="submit" class="btn btn-primary" style="margin-top: 3px;" onclick="getReporteeList(); this.disabled = true;" >Submit</button></a>
    <input type="reset" class="btn btn-primary" style="margin-top: 3px;" value="Reset" onClick="window.location.reload()"></input>   

   </div>
    <br>
    <div id ="table" style="display:none">
            <div class="container text-center" >
                    <div class="row">
                    <div class="col-sm-4"></div>
                    <div class="col-sm-4">
                       <div class="panel panel-primary">
                       <div class="panel-heading" >Reportees  List</div>
    <table id = "employee_table" class="table table-hover" cellspacing="0" width="100%">
                <tr>
                    <th>Number</th>
                    <th>Name</th>
                    <th>UserId</th>
                    <th>Count</th>
                </tr>

            </table>
    </div>
    </div>
    <div id ="jiratable" style="display:none"> 
            <div class="container text-center" >
                    <div class="row">
            <div class="col-sm-4"></div>
            <div class="col-sm-4">
                <div class="panel panel-primary" style="width: 220%;">
                    <div class="panel-heading">JIRA - List</div>
                    <table class="table table-hover">   
            <table id = "Jira_table"  class="table table-hover" cellspacing="0" style="width:220%;table-layout:fixed">
                            <thead>
                            <tr>
                                <th width="80">Number</th>
                                <th>JiraNumber</th>
                                <th>JiraStatus</th>
                                <th>EmailId</th>
                            </tr>  
                           </thead> 
              </table>
            </div>
            </div>
            </div>
            </div>
            <html>
</html>

我的Javascript代码：

            function getReporteeList() {
            var name = document.getElementById('ManagerId').value;
            var start = new Date().getTime();
            console.log(start);
        $.ajax({

           url:'http://localhost:8088/JirasTrackingApp/reporter/
          Reportees/ReporteeList/'+ $("#ManagerId").val(),
           type:'GET',
         "crossDomain": true,

          dataType: 'json',
success: function(result){   
         var end = new Date().getTime();
         var dur = end - start;
         console.log("millisecs passed",dur);   
           var  size = result.length;
           var content = '';
           var number = 1;
           if(size>0){
            document.getElementById('table').style.display="block";
           $.each(result,function(key,value){
               var num    = number++;
               content += '<tbody>';
               content += '<tr>';
               content += '<td>'+num+'</td>';
               content += '<td>'+value.Name+'</td>';
               content += '<td>'+value.UserId.toUpperCase()+'</td>';
               content += '<td>'+'<a href="#" onclick ="getJira(\'' + value.UserId + '\')">'+value.count+'</a>'+'</td>';
               content += '</tr>';
               content += '<tbody>';
           });

           $('#employee_table').append(content);

        }   
          ....There is one more table jiratable in a similar way.

现在，我将在一个页面中显示2个表，但是如何在一个页面中显示输入字段。然后单击提交按钮，它应该重定向到另一个页面以显示表格。请帮我解决这个问题。谢谢！

Answer 1

您将需要以下内容：

    guard let url = URL(string: "https://dev-api.authenticateuser") else { return }
    var request = URLRequest(url: url)
    request.httpMethod = "POST"
    request.addValue("application/json", forHTTPHeaderField: "Content-Type")
    request.addValue("*/*", forHTTPHeaderField: "Accept")
    let jsonData = "'{\"api_secret\":\"asdfg\",\"uniqueid\":\"LDM23564GQQP\",\"pin\":\"94729\",\"password\":\"test1\",\"api_key\":\"key_api1234\"}'".data(using: .utf8)

    request.httpBody = jsonData
    let session = URLSession.shared
    session.dataTask(with: request) { (data, response, error) in
        if let response = response {
            print(response)
        }

        if let data = data {
            do {
                let json = try JSONSerialization.jsonObject(with: data, options: [])
                print(json)
            } catch {
                print(error)
            }
        }

    }.resume()

如何从一个HTML页面重定向到另一HTML

1 个答案: