Блог

Главная - Вопросы по программированию - Как отобразить AJAX-ответ в элементе JSP / HTML (возвращаемом из базы данных)

Как отобразить AJAX-ответ в элементе JSP / HTML (возвращаемом из базы данных)

#javascript #java #jquery #ajax #jsp

#javascript #java #jquery #ajax #jsp

Вопрос:

введите описание изображения здесьвведите описание изображения здесьКак отобразить ajax-ответ из базы данных (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 под окном поиска

[Журнал] объект данных ответа (oracle-lookup, строка 65)

данные: {Идентификатор ошибки: 298, код состояния: «2», …}

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

Комментарии:

1. Где это probStateName и priorityName поля?

2. Они содержатся в данных, возвращаемых в объекте map из контроллера. Но я не знаю, как отображать в пользовательском интерфейсе (извините, не интерфейсный разработчик). Если бы вы могли показать, какой html-элемент использовать для изменения.

3. Изменить renderDetails(data); на renderDetails(bugDetails);

4. Проверьте мой код, у меня есть изменения var id = document.getElementById("problemId"); и <td><input type="text" id="problemId" class="form-control"> потому что уже есть поле с именем bugId .

5. Да, я использую то же самое, и это не работает (ошибка связана с проблемой в моем коде, других изменений нет) var id = document.getElementById(«problemID»); и <td><тип ввода= «text» id=»problemID» class=»form-control»>

Ответ №1:

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

 <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;
    };

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