Easyui + springMVC, easyuispringmvc

Easyui + springMVC, easyuispringmvc

The overall architecture of Colleges and Universities adopts springMVC + hibernate + easyui + mysql;

 

Easyui is used in the front-end framework of this project. It is quite easy to use for the first time. There are official Chinese websites and a lot of well-prepared Demos as a reference, basically, we can find commonly used controls in project development on the official website. In addition, the help documentation is provided, which can be downloaded from the official website. The help document provides specific methods for each control. The event has been used. It also provides some simple examples, which are basically simple.

 

EasyUI demo Chinese official website address: http://www.jeasyui.net/demo/321.html

EasyUI help: http://download.csdn.net/detail/lypf19900912/8400833

 

So for easyui learning, as long as there are some basic html and js basics, it is not difficult to learn. When easyui is used in the project, I think we should summarize the value transfer between easyui and the background. Now the first phase of the University has come to an end, in this gap, we will summarize some of the value transfer skills we have mastered during the development process.

 

1. The value passing method provided by the Easyui Control

Some controls in easyui provide the url attribute, through which you can directly access the background and display the data transmitted in the background directly on the bound control, which is similar to learning ASP.. NET.

In project development, many tables and tree types are used, as well as a combination of drop-down boxes. The following is an example of table and combo code.

Front-end

<% @ Page import = "com. tgb. itoo. assess. entity. courseAssessResult "%> <% @ 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"> 



These attributes (url, method, and so on) can be directly written on the control, but I am more accustomed to writing in js, otherwise it will become a very large part of the control on the page, as a whole, the page will look messy. Secondly, it is difficult to locate and debug the front-end code. (In my personal habits, writing these attributes on the control is completely OK)


Background
SpringMVC is used, so the url written on the page is the method in controller. There are two ways to accept url parameters in the background:
1. obtain from the request object

@RequestMapping(value="/queryData")public void queryData(HttpServletRequest request,HttpServletResponse response) throws Exception {request.getParameter("id");System.out.println(id);}



2. Add parameters in the url in the controller Method

@RequestMapping(value="/queryData")public void queryData(String id,HttpServletRequest request,HttpServletResponse response) throws Exception {System.out.println(id);}



Note the following two points:
1 easyui can only parse json strings. That is to say, if you want to bind the data transmitted in the background to the easyui control, you must convert the data into json strings.
2. Passing values is not only about passing URLs in code, but also important access parameters.



2. Ajax-based value passing through JQuery
Although we use the front-end framework, Ajax will be used if we want to implement some asynchronous calls. In fact, Ajax can be used even if it is not an asynchronous call. Because Ajax access can process the content in the url. The following describes the parameters in JQuery Ajax values and a small example.
Parameter introduction:

 

 
  
Url: String-type parameter (the current page address by default.
 
  
Type: a parameter of the String type. The request method (post or get) is get by default. Note other http request methods, such as put and
 
  
Delete can also be used, but only some browsers support it.
 
  
Timeout: a parameter of the Number type is required. Set the request timeout time (in milliseconds ). This setting overwrites the global settings of the $. ajaxSetup () method.
 
  
.
 
  
Async: A Boolean parameter. The default value is true. All requests are asynchronous requests.
 
  
To send a synchronization request, set this option to false. Note: Synchronous requests will lock the browser and other user operations are required.
 
  
The request can be executed only after the request is complete.
 
  
Cache: A Boolean parameter. The default value is true. When dataType is script, the default value is false ).
 
  
Setting false does not load request information from the browser cache.
 
  
Data: data sent to the server using an Object or String parameter. If it is no longer a string, it is automatically converted to a string
 
  
. The get request will be appended to the url. To prevent this automatic conversion, you can view the processData option. The object must be in the key/value format.
 
  
Format. For example, {foo1: "bar1", foo2: "bar2"} is converted to & foo1 = bar1 & foo2 = bar2. If it is an array, JQuery will automatically be different
 
  
The value corresponds to the same name. For example, {foo: ["bar1", "bar2"]} is converted to & foo = bar1 & foo = bar2.
 
  
DataType: it must be a String type parameter. The data type returned by the server is expected. If this parameter is not specified, JQuery automatically uses the http package mime
 
  
ResponseXML or responseText is returned and passed as the callback function parameter.
 
  
The available types are as follows:
 
  
Xml: the XML document is returned and can be processed by JQuery.
 
  
Html: returns plain text HTML information. The included script tag is executed when the DOM is inserted.
 
  
Script: returns plain text JavaScript code. Results are not automatically cached. Unless the cache parameter is set. Note that in the remote request
 
  
All post requests are converted to get requests.
 
  
Json: Return JSON data.
 
  
Jsonp: JSONP format. When a function is called in the form of SONP, such as myurl? Callback = ?, JQuery will automatically Replace the last
 
  
"?" For the correct function name to execute the callback function.
 
  
Text: returns a plain text string.
 
  
BeforeSend: a parameter of the Function type. Before sending a request, you can modify the Function of the XMLHttpRequest object, for example, adding a custom
 
  
HTTP header. In beforeSend, if false is returned, the ajax request can be canceled. The XMLHttpRequest object is the only parameter.
 
  
Number.
 
  
Function (XMLHttpRequest ){
 
  
This; // The options parameter passed when calling this ajax request
 
  
}
 
  
Complete: a parameter of the Function type. It is the callback Function called after the request is complete (all calls are called when the request is successful or fails ).
 
  
Parameter: XMLHttpRequest object and a string that describes the successful request type.
 
  
Function (XMLHttpRequest, textStatus ){
 
  
This; // The options parameter passed when calling this ajax request
 
  
}
 
  
Success: Required parameter of the Function type. The callback Function called after the request is successful has two parameters.
 
  
(1) data returned by the server and processed according to the dataType parameter.
 
  
(2) A string describing the status.
 
  
Function (data, textStatus ){
 
  
// Data may be xmlDoc, jsonObj, html, text, etc.
 
  
This; // The options parameter passed when calling this ajax request
 
  
Error: Required parameter of the Function type. The Function called when the request fails. This function has three parameters: XMLHttpRequest object and error
 
  
Optional ).
 
  
Ajax event functions are as follows:
 
  
Function (XMLHttpRequest, textStatus, errorThrown ){
 
  
// Generally, textStatus and errorThrown only contain one of the information.
 
  
This; // The options parameter passed when calling this ajax request
 
  
}

 
Commonly used: url, type, data, dataType, success, error

 $.ajax({<span style="white-space:pre"></span> type: "POST", url: 'queryCourseByTeacher?teacherId=' + teacherId, cache: false, dataType : "json", success: function(data){$("#course").combobox("loadData",data);} });  



3. Pass the value in JavaScript
In js code, we are familiar with some access URLs and passing parameter methods.
Js can only directly access the url and cannot process the content in the url. If you want to process the content in the url, you can use JQuery's Ajax method.
window.location.href=url;