如何在JSP / HTML元素中呈现AJAX响应（从db返回）

问题描述 投票：0回答：1

enter image description hereenter image description here如何在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”，...}

对象原型

javascript java jquery ajax jsp
1个回答
0
投票

您可以从以下代码将数据填充到任何字段。可能最好也添加一个检查以查看返回的值是否为空。

<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正确。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.