在Servlet中打开Bootstrap模式

时间:2014-08-19 06:52:33

标签: html twitter-bootstrap servlets bootstrap-modal

这就是我现在所拥有的:

<a href="../../modal/add-training-program.jsp" class="btn btn-primary" data-toggle="modal" data-target="#modal" data-keyboard="false">
            <span class="glyphicon glyphicon-plus-sign"></span>
            Add</a>

这将打开一个bootstrap模式,其中包含用于添加训练程序的表单。 我想重复使用它来编辑一个培训程序,但我希望在数据库中初始化表单字段的值。

有没有办法首先调用servlet(从数据库中处理记录),那个servlet将是加载模式的那个?

如果不可能,你能推荐一种方法来实现这个目标吗?

1 个答案:

答案 0 :(得分:1)

以下是ajax调用的代码

为你的href提供一个id,然后点击下面的函数将调用ajax调用servlet

<script type="text/javascript">
    $("#modalData").click(function(){

var request = ({"message":'Hello from browser'});
var jsonobj=JSON.stringify(request);
$.ajax({
    data: {para:jsonobj},
    dataType: 'json',
    url: './TestServlet',
    type: 'POST',
    success: function(jsonObj){
        // set value in input text of modal form
        (#address).val(jsonObj.address);  
    // open modal
        $('#myModal').modal('show');  
    },
    error: function() {
        alert('Ajax readyState: '+xhr.readyState+'\nstatus: '+xhr.status + ' ' + err);
    }
});

// on hidden reset bootstrap modal

// on close or hidden modal value will be reset
   $('#myModal').on('hide.bs.modal', function () {

      $(this).find('form')[0].reset();
   })

 });

 </script>

Servlet代码返回json数据

    request.setCharacterEncoding("utf8");
    response.setContentType("application/json");
    PrintWriter out = response.getWriter();

    // below code to parse json receive from ajax call
    JSONObject jsonObj = (JSONObject) JSONValue.parse(request.getParameter("para"));
    System.out.println(jsonObj.get("message"));
    JSONObject obj = new JSONObject();
    obj.put("address", "address of the users");
    out.print(obj);