Json data transmission from the servlet to the front page by easyui two methods

Json data transmission from the servlet to the front page by easyui two methods

 

Two ways to get the data in the transfer layer of the same servlet method, the following is the Servlet code to all the information as an example lookup table.

// override doGet method 
protected  void doGet (the HttpServletRequest request, the HttpServletResponse Response) throws ServletException, IOException {
     // the TODO Auto-Generated Method Stub 

    Request.setCharacterEncoding ( "UTF-. 8"); // Chinese REQUEST request when data to prevent distortion 
    String = request.getParameter flag ( "flag"); // determined CRUD operations by the value of flag IF (flag == null ) { 
        queryOffer (Request, Response); 
    } the else IF ( "the Add" .equals (flag) ) { 
        addOffer (Request, Response); 
    } the else IF ( "del"
      .equals (In Flag)) { 
        deleteOffer (Request, Response); 
    } the else  IF ( "Update" .equals (In Flag)) { 
        updateOffer (Request, Response); 
    } 
} 
// process the data from the database query to return the distal end 
protected  void queryOffer (the HttpServletRequest Request, the HttpServletResponse Response) {
     // the TODO Auto-Generated Stub Method 
    List <Offer Penalty for> = Offers new new the ArrayList <Offer Penalty for> (); 
    Offers = offerservice.queryOfferService ();
     the try { 
        String STR = JSONArray.toJSONString ( Offers); //Converted into a set of database query to JSON string 
        System.out.println (STR); 
        the response.setContentType ( "text / HTML; charset = UTF-. 8"); // Chinese prevent garbled data Response 
        response.getWriter () .print (STR); // forward transfer station string 
    } the catch (Exception E) {
         // the TODO Auto-Generated Block the catch 
        e.printStackTrace (); 
    } 
}

 

• By easyui included tableto acquire data transfer Tags rear properties

  jsp code:

  • url: Transfer address data (Benpian using a servlet, servlet path so that the path; action may be used or php)

  • field: Field name transfer JSON data, that is, the database field (column name)

  <table id="dg" title="用户列表" class="easyui-datagrid" style="width:80%;height:250px"
              url="<%=request.getContextPath() %>/OfferServlet"     
              toolbar="#toolbar"
              rownumbers="true" fitColumns="true" singleSelect="true">
          <thead>
              <tr>
                  <th field="offerid" width="50">商品ID</th>
                  <th field= "OfferName" width = "100" > tradename </ TH > 
                  < TH Field = "offertype" width = "200 is" > Product Types </ TH > 
                  < TH Field = "offerdesc" width = "200 is" > Product Description </ TH > 
                  < TH Field = ". price" width = "200 is" > commodities </ TH > 
              </ TR > 
          </ thead >
      </table>

   

• JS data to pass through to the front end JSON

  jsp code:

  <table id="dg" title="用户列表" class="easyui-datagrid" style="width:1000px;height:250px" toolbar="#toolbar">
  </table>

   

  js code:

  • title: Table column names displayed

  $ ( Function () { 
      $ ( '#dg' ) .datagrid ({ 
          URL: "$ {} pageContext.request.contextPath / OfferServlet", // the servlet path 
          Columns: [[ 
              {Field: 'OFFERID', title: ' product ID ', width: 100 }, 
              {Field: ' OfferName ', title:' product name ', width: 100 }, 
              {Field: ' offertype ', title:' product type ', width: 100 }, 
              {Field: 'offerdesc', title: 'product description', width: 300 }, 
              {Field: '. price', title: 'commodities', width: 150 } 
          ]]       
      });
  });