Using Struts2 and jquery Easyui to implement a simple crud system (v)--jsp,json,easyui combination

Source: Internet
Author: User

This part is more complex, before the students have seen their own development of a class selection system when the use of JSON, but has not known what the use. It's useless to write anything. So he didn't go to school. And now with such curiosity, what is the use of this, and how it is used. This is how to combine the mentality to learn, the effect is very good.


This time using the Easyui data grid, the DataGrid.

You need to reference the JSON data that came from a URL. And then neatly and beautifully show up on the page today. Think about what you did before. directly to the database data and HTML table code stitching, neat is neat, but the code is particularly awkward.

Let me take a look at the idea of a designer, assuming I now provide a table template. Then I'm going to read your data in order to sort it out, then we need to define a common format that I can read whatever follows the data in this format and show it to the Datagird now. This is the function of Easyui, and the function of the format is who realizes it--json debut.


Json,javascript Object Notation,js Objects (representations), similar XML is smaller and faster than XML. XML extracts the elements of the word using the DOM operation, need child these things.


JSON can be transmitted via JS parsing and Ajax. Yes, that's what you want.


Talking about Ajax by the way also looked again, once used to forget. Ajax does the function of the page is not refreshed and secretly connected to the server to get the data back to the front.



I have this form show here now. In fact, the data I asked for was secretly using Ajax to get the data. And by JS parsing and then accurately put back into the table.


(i) JSON

Syntax rules:

divide name and value pairs, data delimited: {} save Object [] Save array"A": 1 a = 1 in the corresponding JS.

Sample JSON data:
[{"id": 1, "name": "ee", "Password": "1"},
{"id": 2, "name": "DF2", "Password": "123"},
{"id": 3, "name": "45ty", "Password": "123"},
{"id": 4, "name": "Sdfy", "Password": "123"},
{"id": Ten, "Name": "Sdfy", "Password": "123"}]

Note: Some people's data is not displayed properly and I stepped on it.

The problem was discovered today.

because in the background processing is. Some people want to avoid using escape characters. Change the double-lead directly to single-cited.
String json = "[{' id ': 1, ' name ': ' ee ', ' password ': ' 1 '}]";

In this way, the DataGrid simply does not load data. Change to escape character is ok
String json = "[{\" id\ ": 1,\" name\ ": \" ee\ ", \" password\ ": \" 1\ "}]";

There are 4 elements in the array, and an element is an object: There are id,name and password.


(ii) The DataGrid in Easyui gets the JSON data.

Datagrid:

<%@ page language= "java" contenttype= "text/html; Charset=utf-8 "pageencoding=" UTF-8 "%><! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >

Url= "List_ej"

The point is, Url,url wrote it. If you return the URL of the JSON-formatted data, we use the action to jump to the responsive JSP page.

List_ej after the data is received by the action below. Then jump to list_ej.jsp.


Action inside to get the database data and JSON data conversion, all the online search is copied paste with the JSON framework. Those with the code are also written in eight bad. I have been groping for a long time.

Jsonarray can convert the data in the list into JSON format.

Public String List_ej () {Actioncontext ctx=actioncontext.getcontext (); Connection C = Connecttosql.getconn (); Statement st = CONNECTTOSQL.GETST (c); list<user> list = new arraylist<user> (); String result= "{}"; try {ResultSet rs = st.executequery ("SELECT * from User"), while (Rs.next ()) {User U = new user (); U.setid ( Rs.getint ("userid")), U.setname (rs.getstring ("username")), U.setpassword (rs.getstring ("password")); List.add (U);}} catch (SQLException e) {//TODO auto-generated catch Blocke.printstacktrace ();} list<user> o  = jsonarray.fromobject (list); result=o.tostring (); try {//servletactioncontext.getresponse () . Getwriter (). println (Jsonarray.fromobject (list)); Ctx.put ("json", result);} catch (Exception e) {//TODO auto-generated catch Blocke.printstacktrace ();} return "Success";}

after we get the data, we use the native JSON class to convert the JSON format and then return the string to another page list_ej.jsp. This page is where the DataGrid finally takes the data.


The problem lies

Here I dug a big hole: I wrote the JSP before.

<% @page import= "com.opensymphony.xwork2.ActionContext"%><%@ page language= "java" contenttype= "text/html; Charset=utf-8 "pageencoding=" UTF-8 "%><! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" ><%@ page Import= "util.*, Org.apache.struts2.ServletActionContext"%> <%@ taglib prefix= "s" uri= "/struts-tags"%> <% @ Page import= "java.sql.*,java.util.*,net.sf.json.*"%><%! Connection c = null; Statement st = null; ResultSet rs = null; String s = "";%><%string path = Request.getcontextpath (); String basepath = request.getscheme () + "://" +request.getservername () + ":" +request.getserverport () +path+ "/";%> 

There is no problem with such logic, that is, it has not been shown. It has been tuned for a long time.

The problem is that ———— I write too much stuff.

List_jsp only need to:

<%string json= (String) request.getattribute ("JSON");%><%=json%>

Finally, Datagird successfully fetch the database data.



Using Struts2 and jquery Easyui to implement a simple crud system (v)--jsp,json,easyui combination

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.