Как отобразить ответ AJAX в элементе JSP / HTML (возвращается из db) - PullRequest
Новая
       2

Как отобразить ответ AJAX в элементе JSP / HTML (возвращается из db)

0 голосов
/ 29 марта 2019

введите описание изображения здесь введите описание изображения здесь Как отобразить ответ ajax от db (map) на экране jsp

Я получаю ответ в консоли браузера, но не уверен, как отобразить его в jsp на экране браузера, например, в таблице или как-нибудь лучше 

$('#submit_btn').click(function(){

         var problemId = $('#search_data').val();

         $.ajax({
            type: "GET",
            dataType : "json",
            url : "http://localhost:8080/bugs/" + bugId,
            success: function(data){
                $("#response").html(data);
                console.log('response data',data);
            },
            error : function(err){
                console.log('error',err)
            }

         });
      });

JSP 

<body>
      <div>
         <div>
            <h1>Lookup from Oracle database</h1>
            Click on this <strong><a href="/success.jsp">link</a></strong> to visit home page.
         </div>
         <div>
            <h2>${message}</h2>
            <table>
            <tr>
               <td>Search Category:</td>
               <td>
                  <select name="searchcategories">
                     <option value="-1">-Select Category-</option>
                     <option value="bug">bug</option>
                     <option value="attachment">attachment</option>
                  </select>
               </td>
            </tr>
            <tr>
               <td>Entity Id:</td>
               <td><input type="text" name="bugId" id="search_data"  class="form-control" placeholder="Search bug no..">
               </td>
            </tr>
            <tr>
               <td></td>
               <td><button type="button" id="submit_btn" onclick="">Search</button>
               </td>
            </tr>
            <tr>
               <td>Bug Id:</td>
               <td><input type="text" id="bugId"  class="form-control">
               </td>
            </tr>
            <tr>
               <td>Prob State Name:</td>
               <td><input type="text" id="probStateName"  class="form-control">
               </td>
            </tr>
            <tr>
               <td>Priority Name:</td>
               <td><input type="text" id="priorityName"  class="form-control">
               </td>
            </tr>
         </div>
      </div>
   </body>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   <script type="text/javascript">
      $(document).ready(function(){


      });
       $('#submit_btn').click(function(){

         var bugId = $('#search_data').val();

         $.ajax({
            type: "GET",
            dataType : "json",
            url : "http://localhost:8080/bugs/" + bugId,
            success: function(data){
                $("#response").html(data);
                console.log('response data',data);
                 var bugDetails = data;
                 renderDetails(data);
            },
            error : function(err){
                console.log('error',err)
            }

         });
      });

       function renderDetails(data)
       {
           var id = document.getElementById("bugId");
           var name = document.getElementById("probStateName");
           var priority = document.getElementById("priorityName");

           id.innerHTML = data.bugId;
           name.innerHTML = data.probStateName;
           priority.innerHTML = data.priorityName;
       };
   </script>
</html>

ниже - это объект ответа, который я вижу в консоли с данными, полученными из бэкэнда. Я хочу сделать этот ответ ajax ниже поля поиска

[Журнал] данные ответа (поиск оракула, строка 65) Объект

data: {bugId: 298, stateCode: "2",…}

Прототип объекта

1 Ответ

0 голосов
/ 29 марта 2019

Вы можете заполнить данные в любое поле из следующего кода.Вероятно, лучше всего также добавить проверку, чтобы убедиться, что возвращаемые значения не пусты.

<script type="text/javascript">
    var bugDetails;

    $(document).ready(function(){
        $("#submit_btn").click(function(event){
            event.preventDefault();

        var bugId = document.getElementById("search_data").value;

        $.ajax({
            type: 'GET',
            url:  "http://localhost:8080/bugs/" + bugId,
            dataType: 'json',
            success: function(data, textStatus, jqXHR) {
                bugDetails = data;
                renderDetails(bugDetails);

                alert(data);
                alert(jqXHR.status);
                alert(textStatus);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                alert(textStatus);
                alert(jqXHR.status);
                alert(errorThrown);
            }
        });
    });
    });

    function renderDetails(bugs)
    {
        var id = document.getElementById("problemId");
        var name = document.getElementById("probStateName");
        var priority = document.getElementById("priorityName");

        id.value = bugs.bugId;
        name.value = bugs.probStateName;
        priority.value = bugs.priorityName;
    };
</script>

Итак, теперь ваш код должен выглядеть следующим образом: 

<body>
      <div>
         <div>
            <h1>Lookup from Oracle database</h1>
            Click on this <strong><a href="/success.jsp">link</a></strong> to visit home page.
         </div>
         <div>
            <h2>${message}</h2>
            <table>
            <tr>
               <td>Search Category:</td>
               <td>
                  <select name="searchcategories">
                     <option value="-1">-Select Category-</option>
                     <option value="bug">bug</option>
                     <option value="attachment">attachment</option>
                  </select>
               </td>
            </tr>
            <tr>
               <td>Entity Id:</td>
               <td><input type="text" name="bugId" id="search_data"  class="form-control" placeholder="Search bug no..">
               </td>
            </tr>
            <tr>
               <td></td>
               <td><button type="button" id="submit_btn">Search</button>
               </td>
            </tr>
            <tr>
               <td>Bug Id:</td>
               <td><input type="text" id="problemId"  class="form-control">
               </td>
            </tr>
            <tr>
               <td>Prob State Name:</td>
               <td><input type="text" id="probStateName"  class="form-control">
               </td>
            </tr>
            <tr>
               <td>Priority Name:</td>
               <td><input type="text" id="priorityName"  class="form-control">
               </td>
            </tr>
         </div>
      </div>
   </body>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   <script type="text/javascript">
    var bugDetails;

    $(document).ready(function(){
        $("#submit_btn").click(function(event){
            event.preventDefault();

        var bugId = document.getElementById("search_data").value;

        $.ajax({
            type: 'GET',
            url:  "http://localhost:8080/bugs/" + bugId,
            dataType: 'json',
            success: function(data, textStatus, jqXHR) {
                bugDetails = data;
                renderDetails(bugDetails);

                alert(data);
                alert(jqXHR.status);
                alert(textStatus);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                alert(textStatus);
                alert(jqXHR.status);
                alert(errorThrown);
            }
        });
    });
    });

    function renderDetails(bugs)
    {
        var id = document.getElementById("problemId");
        var name = document.getElementById("probStateName");
        var priority = document.getElementById("priorityName");

        id.value = bugs.bugId;
        name.value = bugs.probStateName;
        priority.value = bugs.priorityName;
    };
</script>
</html>

Я создал Text Fields для извлечения данных, поступающих из вызова AJAX.Убедитесь, что вы используете эти ids. 

            <tr>
               <td>Bug Id:</td>
               <td><input type="text" id="problemId"  class="form-control">
               </td>
            </tr>
            <tr>
               <td>Prob State Name:</td>
               <td><input type="text" id="probStateName"  class="form-control">
               </td>
            </tr>
            <tr>
               <td>Priority Name:</td>
               <td><input type="text" id="priorityName"  class="form-control">
               </td>
            </tr>

. И когда данные поступают из вызова AJAX, они извлекают поля выше с помощью этого метода, 

function renderDetails(bugs)
    {
        var id = document.getElementById("problemId");
        var name = document.getElementById("probStateName");
        var priority = document.getElementById("priorityName");

        id.value = bugs.bugId;
        name.value = bugs.probStateName;
        priority.value = bugs.priorityName;
    };

Так чтоВам нужно позаботиться о том, чтобы идентификаторы текстовых полей были правильными.

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

Нет похожих вопросов

...