模态框传Json数据的值

Posted 2021-04-30 Java引导者

我们在使用Bootstrap的时候经常会使用到模态框，但是模态框中的值如何传到后台中呢？

我们可以使用JsonObject来传值。首先在eclipse中使用JSONObject需要引用org.json包。然后我们可以直接实例化一个JSONObject对象，比如：

JSONObject json = new JSONObject();
json.put(key, value);

而后调用其put()方法，将数据写入。put()方法的第一个参数为key值，必须为String类型，第二个参数为value，可以为boolean、double、int、long、Object、Map以及Collection等。当然，double以及int等类型只是在Java中，写入到json中时，统一都会以Number类型存储，然后PrintWriter来输出json对象。

使用Bootstrap中的模态框时，在修改模态框中数据的时候点击修改的图标进行修改。这时候使用onclick点击事件，通过js传入json值到后台的Action中。

下面给大家举一个简单的例子：

1.首先是前台jsp页面的部分代码表单循环：

<c:forEach items="${list}" var="dtfy">
         <tr>
              <td>${dtfy.id}</td>
              <td>${dtfy.dtproject}</td>
              <td>${dtfy.dtmoney}</td>
              <td class="col-xs-1"><a
              onclick="update(${dtfy.id})" id="dtfy_update"
              class="glyphicon glyphicon-pencil"> </a></td>
              <td class="col-xs-1"><a
              class="glyphicon glyphicon-trash"
              href="<c:url value='/dtfy/delete.action?id=${dtfy.id}'/>">
              </a></td>
         </tr>
</c:forEach>

2.然后是js中的函数调用：

function update(id) {
          $.ajax({ 
          url:"dtfy/findById.action?id=" + id,
          type:"POST",            
          dataType:"json",//(接收后台action传到前台的json对象)
          success:function(data)
         //$('#dtproject').val(date.dtproject);
         //$('#dtmoney').val(result.dtfy.dtmoney) */
          $('#saveId').prop("value",id);
          $('#inputXm').prop("value",data.dtfy.dtproject);
          $('#inputJe').val(data.dtfy.dtmoney);//获取到的值放到模态框中的Input中，$('#InputJe')是选择input的id
             
         //$("#myUpdateModal").modal();
          $("#myUpdateModal").modal({
          backdrop : "static"
                  });                  
                }
                 });    
             }

3.后台的Action中的代码：

@RequestMapping("findById")
    
     public void findByIdDtfy(Integer id,ModelMap map,HttpServletResponse
     response) throws IOException{
     System.out.println("=======dtfy======findById=====");
     response.setContentType("text/html;charset=UTF-8");
     JSONObject json=new JSONObject();
     Dtfy dtfy= service.findById(id);
     System.out.println(dtfy);
     json.put("dtfy", dtfy);
    
     PrintWriter out=response.getWriter();
     out.print(json);
     out.flush();
     out.close();
     }

4.最后点击模态框中的保存，把修改过的值在传到Action中。