如何在JSP / HTML元素中呈現AJAX響應（從db返回）

Question

在此處輸入圖像描述在此處輸入圖像描述如何在jsp屏幕中從db（map）呈現ajax響應

我在瀏覽器控制台中得到響應，但不知道如何在瀏覽器屏幕上的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響應

[Log]響應數據（oracle-lookup，第65行）對象

數據：{bugId：298，stateCode：“2”，...}

對象原型

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

所以你需要關心的是確保文本字段ID正確。

如何在JSP / HTML元素中呈現AJAX響應（從db返回）

問題描述

1 個解決方案

解決方案1
0 2019-03-29 03:20:07

如何在JSP / HTML元素中呈現AJAX響應（從db返回）

問題描述

1 個解決方案

解決方案1 0 2019-03-29 03:20:07

解決方案1
0 2019-03-29 03:20:07