javascript - 如何刷新模式弹出窗口中的数据或转发到模式弹出窗口

Question

我的程序是这样工作的：

我面前有一张桌子，当我点击一行时，表格会打开一个 boostrap 模式弹出窗口。在模态弹出窗口中，我们可以找到一些值和 3 个按钮。问题就在这里，当我点击这个按钮时，这应该在数据库中搜索一些值并刷新模式弹出窗口。取而代之的是，我在 servlet 中获取我的值，我只能在我的第一个 JSP 中返回这一行

request.getServletContext().getRequestDispatcher("/myFirstJSP.jsp").forward(request, response);

这张图片是我的模态弹出窗口。主要目标是当我单击“替换”按钮时，它应该在数据库中搜索值并将其显示在右侧的小表中

我的模态弹出窗口的代码

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="mediumModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <div class="col-md-5">
                    <img src="images/myImage.png">
                </div>
                <div class="col-md-5">
                    <h5 class="modal-title" id="mediumModalLabel">Title</h5>
                </div>
                <div class="col-md-1">
                    <label><%=dateFormat.format(date)%></label>
                </div>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-5">
                            <label>AAA</label>
                        </div>
                        <div class="col-md-5">
                            <label>General</label>
                        </div>
                        <div class="col-md-1">
                            <label><%=heureFormat.format(date)%></label>
                        </div>
                        <div class="col-md-7">
                            <form method="get" action="myServlet" name="myForm">
                            <input type="hidden" name="buttonPressed" />
                            <input type="hidden" name="OF"/>
                            <input type="hidden" name="Reference"/>

                                <div class="form-group row" style="margin-bottom :0px;">
                                    <label class="col-md-4 col-form-label"><b>A</b></label>
                                    <label class="col-md-3 col-form-label" id="A"></label>
                                </div>
                                <div class="form-group row" style="margin-bottom :0px;">
                                    <label class="col-md-3 col-form-label"><b>B</b></label>
                                    <label class="col-md-4 col-form-label" id="B"></label>
                                </div>
                                <div class="form-group row" style="margin-bottom :10px;">
                                    <label class="col-md-3 col-form-label"><b>Date/time</b></label>
                                    <label class="col-md-5 col-form-label" id="DateTime"></label>
                                </div>
                                <div class="form-group row" style="margin-bottom :2px;">
                                    <label class="col-md-3 col-form-label"><b>C</b></label>
                                    <label class="col-md-4 col-form-label" id="C" name="C" value=""></label>
                                    <button type="button" class="btn btn-primary" value="btnC" name="btnC" onclick="ReplaceC()">Replace</button>&nbsp;
                                    <button type="button" class="btn btn-primary" onclick="createFileC()">Label</button>
                                </div>
                                <div class="form-group row" style="margin-bottom :2px;">
                                    <label class="col-md-3 col-form-label"><b>D</b></label>
                                    <label class="col-md-4 col-form-label" id="D" name="D" value=""></label>
                                    <button type="button" class="btn btn-primary" value="btnD" name="btnD" onclick="ReplaceD()">Replace</button>&nbsp;
                                    <button type="button" class="btn btn-primary" onclick="createFileD()">Label</button>
                                </div>
                                <div class="form-group row" style="margin-bottom :2px;">
                                    <label class="col-md-3 col-form-label"><b>E</b></label>
                                    <label class="col-md-4 col-form-label" id="E" name="E" value=""></label>
                                    <button type="button" class="btn btn-primary" value="btnE" name="btnE" onclick="ReplaceE()">Replace</button>&nbsp;
                                    <button type="button" class="btn btn-primary" onclick="createFileE()">Label</button>
                                </div>
                            </form>
                        </div>
                        <div class="col-md-5">
                            <label><b>Replace : </b></label>
                            <label id="Replace"></label>
                            <table id="myTable" class="table table-striped table-bordered" data-page-length='100'>
                                <thead>
                                    <tr class="tableHeader">
                                        <th style="width: 50%">Selection</th>
                                        <th style="width: 50%">ID</th>
                                    </tr>
                                </thead>
                                    <tr>
                                        <td>1</td>
                                        <td>1000</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>1111</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>1000</td>
                                    </tr>
                                    <tr>
                                        <td>4</td>
                                        <td>1111</td>
                                    </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <label> Copyright LEONI LWSF <i class="fa fa-copyright"></i></label>
        </div> 
    </div>
</div>

我应该使用 AJAX 吗？

有人可以帮忙吗？

谢谢。

标签： javascriptjavajakarta-eebootstrap-modal