Question

enter image description here enter image description here如何在jsp屏幕中从数据库（地图）呈现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查找，第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响应（从数据库返回）

1 个答案: