查询数据库并在同一页面上显示结果

Pranav247

我目前正在研究spring框架。我在abc.jsp页上有一个按钮,该按钮将GET请求发送到我的控制器。控制器调用DAO中的方法,并返回一个包含数据的列表,并将其转发到def.jsp。单击按钮时,有没有一种方法可以直接在abc.jsp上显示数据表。在我的研究中,我发现AJAX是一种实现方法。我以前没有使用过AJAX,我不确定如何使用它,因为我需要获取列表。任何帮助,将不胜感激。我在下面附上了我的代码的必要摘要。提前致谢,

abc.jsp

<form action="abcd" method="get">
          <button type="submit" onclick="startSpin()">Items in ABCD</button>
</form>

控制器代码

@Controller
@RequestMapping("application")
public class ApplicationController {

    @Autowired
    AppDAO AppDAO;

    private static final Logger LOGGER = LoggerFactory.getLogger(MasterDataObjectEntityController.class);

    @RequestMapping (value="/abcd",method=RequestMethod.GET)
    public String getItemsInABCD(ModelMap map, HttpServletRequest req){
        LOGGER.info("ApplicationController :: ");      
        try {
            map.addAttribute("ItemsInABCDList", AppDAO.getItemsInABCDList());
        } catch (SQLException e) {
            LOGGER.error("ApplicationController :: getItemsInABCDList:: SQLException ::"+e.getMessage());
        }
        return "def"; <-- goes to def.jsp
    }
}

def.jsp

<table class="table table-bordered table-striped table-hover"
                        id="mytable" style="width: 95%;">

                        <thead>
                            <tr style="font-weight: bold;">

                                <td>col 1</td>
                                <td>col 2</td>

                            </tr>
                        </thead>
                        <tbody>
                            <c:forEach var="myvar" items="${ItemsInABCDList}">
                                <tr>
                                    <td>${myvar.itemNumber}</td>
                                    <td>${myvar.itemName}</td>
                                </tr>

                            </c:forEach>
                        </tbody>
                    </table>

<script type="text/javascript">

var mytable= null;
$(document).ready(function() {
    mytable=  $('#mytable').dataTable(
             {
                //columnDefs: [ { orderable: false, targets: [0] }]
                columnDefs: [{
                    targets: "datatable-nosort",
                    orderable: false
                }]
             });

          $('[data-toggle="tooltip"]').tooltip(); 

        });
</script>
帕拉维

您需要在代码中进行一些小的更改。如果可行。您可以使用Javascript函数通过POST / GET调用Axaj请求

使用请求网址(即abcd)调用createAjaxRequest函数,并指定您的回调函数名称(即yourCallbackFuncationName)

createAjaxRequest("abcd",yourCallbackFuncationName);

function createAjaxRequest(requestURL,callbackFuncation){
    var xmlhttp;
    startStopLoader(true);
    if (window.XMLHttpRequest){
        xmlhttp=new XMLHttpRequest();
    } else {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 ){

            if(xmlhttp.status == 200){
                try{
                    callbackFuncation(xmlhttp.responseText);
                }catch(e){

                }               
             }

        }
    }
    xmlhttp.open("GET",requestURL,true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");   
}

function yourCallbackFuncationName(response) {
        // you can manupulate your list stored in response variable 
        // you can generate your tr/td here and put it back in your main  
          table using innerHTML
}

并且您需要在Java文件中使用@ResponseBody并返回项目列表。看起来像下面的代码

@RequestMapping (value="/abcd",method=RequestMethod.GET) 
@ResponseBody
    public ItemsInABCDListBean getItemsInABCD(ModelMap map, HttpServletRequest req){
        LOGGER.info("ApplicationController :: ");       
        try { 
           ItemsInABCDListBean ItemsInABCDList = AppDAO.getItemsInABCDList();
        } catch (SQLException e) { 
            LOGGER.error("ApplicationController :: getItemsInABCDList:: SQLException ::"+e.getMessage()); 
        } 
        return ItemsInABCDList; // returns List you want to show
    } 

希望这会帮助你。它可能是您的应用程序的通用代码

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何使用ColdFusion / jQuery发布表单,更新查询并在同一页面上显示结果?

来自分类Dev

django 1.8-如果表单条目查询结果与数据库不匹配,则在同一页面上显示警报消息,而不是“无”或引发异常页面

来自分类Dev

显示成功消息并清除发布数据并在同一页面上重定向

来自分类Dev

有没有办法从同一页面上的数据库中检索数据

来自分类Dev

Rails 4-错误消息和所有数据库记录在同一页面上

来自分类Dev

PHP结果页面将显示在同一页面上

来自分类Dev

在同一页面上显示表单结果,对不同页面进行操作

来自分类Dev

调试下拉菜单并在同一页面上显示用户表单输入

来自分类Dev

从用户处获取输入,并在同一页面上显示相同的输入

来自分类Dev

用于运行 PHP 脚本并在同一页面上显示输出的表单

来自分类Dev

在同一页面上显示表单结果时,只能显示客户端脚本?

来自分类Dev

使用在同一页面上显示的相同功能将结果相乘

来自分类Dev

选择输入中的onChange事件,然后在同一页面上显示处理结果

来自分类Dev

表单和PHP结果显示在同一页面上

来自分类Dev

如何通过在React的同一页面上显示结果来替换表单

来自分类Dev

使用在同一页面上显示的相同功能将结果相乘

来自分类Dev

多个计算,显示在同一页面上

来自分类Dev

在同一页面上显示内容

来自分类Dev

在同一页面上显示错误的PHP

来自分类Dev

在同一页面上显示搜索到的项目

来自分类Dev

多个计算,显示在同一页面上

来自分类Dev

在同一页面上显示多个Google图表

来自分类Dev

在同一页面上显示PHP登录错误?

来自分类Dev

Ember.js:在同一页面/路由中显示多个数据库支持的资源/模型?

来自分类Dev

Ember.js:在同一页面/路由中显示多个数据库支持的资源/模型?

来自分类Dev

RAILS - 将表单提交到同一页面并显示查询结果

来自分类Dev

Birt报表查看器如何在同一页面上显示所有结果

来自分类Dev

单击链接应在同一页面上显示结果。“返回”和“刷新”按钮必须正常工作

来自分类Dev

Angular2/5 搜索数据库并在新页面上显示结果

Related 相关文章

  1. 1

    如何使用ColdFusion / jQuery发布表单,更新查询并在同一页面上显示结果?

  2. 2

    django 1.8-如果表单条目查询结果与数据库不匹配,则在同一页面上显示警报消息,而不是“无”或引发异常页面

  3. 3

    显示成功消息并清除发布数据并在同一页面上重定向

  4. 4

    有没有办法从同一页面上的数据库中检索数据

  5. 5

    Rails 4-错误消息和所有数据库记录在同一页面上

  6. 6

    PHP结果页面将显示在同一页面上

  7. 7

    在同一页面上显示表单结果,对不同页面进行操作

  8. 8

    调试下拉菜单并在同一页面上显示用户表单输入

  9. 9

    从用户处获取输入,并在同一页面上显示相同的输入

  10. 10

    用于运行 PHP 脚本并在同一页面上显示输出的表单

  11. 11

    在同一页面上显示表单结果时,只能显示客户端脚本?

  12. 12

    使用在同一页面上显示的相同功能将结果相乘

  13. 13

    选择输入中的onChange事件,然后在同一页面上显示处理结果

  14. 14

    表单和PHP结果显示在同一页面上

  15. 15

    如何通过在React的同一页面上显示结果来替换表单

  16. 16

    使用在同一页面上显示的相同功能将结果相乘

  17. 17

    多个计算,显示在同一页面上

  18. 18

    在同一页面上显示内容

  19. 19

    在同一页面上显示错误的PHP

  20. 20

    在同一页面上显示搜索到的项目

  21. 21

    多个计算,显示在同一页面上

  22. 22

    在同一页面上显示多个Google图表

  23. 23

    在同一页面上显示PHP登录错误?

  24. 24

    Ember.js:在同一页面/路由中显示多个数据库支持的资源/模型?

  25. 25

    Ember.js:在同一页面/路由中显示多个数据库支持的资源/模型?

  26. 26

    RAILS - 将表单提交到同一页面并显示查询结果

  27. 27

    Birt报表查看器如何在同一页面上显示所有结果

  28. 28

    单击链接应在同一页面上显示结果。“返回”和“刷新”按钮必须正常工作

  29. 29

    Angular2/5 搜索数据库并在新页面上显示结果

热门标签

归档