jquery and Ajax Usage Summary

Source: Internet
Author: User
Tags add array object json min modify

Although mostly done on the back end, however, because some of the time to write the front of the interface, so I learned the next jquery and Ajax knowledge, although this writing for the front of the great God for some of the feeling of teaching, but in order to deepen their memories, or to sum up, What's wrong is welcome to point out ~

Preparatory work

Because I am using the bootstrap, so some operations are based on it, such as modal boxes, and so on bootstrap knowledge can be here to learn. The project then uses the Struts framework. Well, the basic situation is purple.

    1. Import jquery's packages and BOOTSTRP packages in.
    2. Introduced in JSP pages.

Just like this:

<script src= "Js/bootstrap.min.js" ></script>
<script src= "Js/main.js" ></script>
<script src= "Js/html5shiv.js" ></script>
<script src= "Js/respond.js" ></script>
<link href= "Css/bootstrap.min.css" rel= "stylesheet" >
<link href= "Css/main.css" rel= "stylesheet" >
<script src= "Js/jquery-1.11.1.min.js" ></script>

After using the technique the data is displayed in the foreground

The first is to use the S tag library to the background of the data in the foreground of the JSP page to display the operation, the operation in the background is to instantiate an object, and then the object exists in a list table. Here is some of the code:

Vmmanage vmmanage = new Vmmanage (); And then:

Vmmanage.sethostname (Server.gethost ());
Vmmanage.setcreattime (server.getcreated (). toString (). ReplaceAll ("(?: TZ)", ""));
Vmlist.add (Vmmanage);

Where Vmmanage was an object, as to Vmlist,

Private list<vmmanage> vmlist = new arraylist<vmmanage> ();

Of course, there must be a get and set method, otherwise the foreground cannot be received. The front desk can then get the data and display it as follows:

<s:iterator value= "vmlist" var= "VM" >
<td><s:property value= "#vm. HostName"/></td>
<td><s:property value= "#vm. Creattime"/></td>
</s:iterator>

PS: The definition of Alias, that is, Var, and then use the S tag, value to use "#" to read data, so that the background data in the foreground to display.

Use tips to get the current row is displayed in a modal box

Operation of the database most operations is crud, that is, additions and deletions to check, and after the data acquisition naturally have to modify the option, click the Modify button, the line of data obtained and then displayed in the Modal box is very basic operation, this time you can take advantage of some properties will just get the value from the background, for example, to do:

<a href= "#" class= "migrate" rel= ' ${VM} ' >

Note: The value at this time needs to be obtained with $.

Then you can use jquery to get the value you just sent, in the following way:

$ (". Migrate"). Click (
function () {
var VM = $ (this). attr (' rel ');
obj = Json.parse (VM);

Because this gets the value of the JSON type, you need to parse it, and then obj is similar to the VM above, at which point Obj.hostname is the #vm.hostname of the previous section.

Above is just one of the methods, there is also a method can be implemented, and is directly from the background data, do not put in the body of the JSP, in the <script language= "JavaScript" > tags can be used, the specific methods are as follows:

<script language= "JavaScript" >
var array = new Array ();
<s:iterator value= "hostList" id= "Item" >
Array.push ("<s:property value=" #item. Name "/>");
</s:iterator>
</script>

This is to place the name of a hostlist list in an array, note: Do not use aliases, or VAR, to replace the previous VAR with an ID, but the effect is equivalent, and you can add it dynamically to the Select option:

<td><select class= "Input-group-lg form-control" name= "Vmmanage.hostname" id= "Dhost" >
</select></td>

Add the method as follows:

for (var i = 0; i < Array.Length; i++) {
if (Array[i]!= obj.hostname) {
$ ("#dhost"). Append ("<option>" + array[i]+ "</option>");
}

}

Ajax Summary of Usage tips

A summary of the knowledge of jquery is here, followed by Ajax-related knowledge, the main implementation is dynamic from the background to get the value, and the page does not refresh the update, the time is 5s to get a value and a refresh, basic Ajax is written:

Self.setinterval (
function () {
$.ajax ({
URL: "Vmmanage_getvmstatus.action",
Type: ' Post ',
timeout:15000,
Beforesend:function (
XMLHttpRequest) {},
Success:function (Result) {
},
Complete:function (
XMLHttpRequest,
Textstatus) {
},
Error:function (
XMLHttpRequest,
Textstatus,
Errorthrown) {

}
});
}, 5000);

Servletactioncontext.getresponse (). Getwriter (). print (vmlist);

Then in the foreground of Ajax through the result of the receiver, received as usual JSON format, do not forget to parse, and then is to make the table in need of updated field positioning, I used the method is through the ID to locate, that is, in the table of TR in the value set to ID, This guarantees the uniqueness of the value, does not locate the error causing all the rows to be changed, and then passes the

var s = document.getElementById (obj[o].id). Cells[5];

Get the value of that line, and then use cells to get the column that you want to modify in that row, then the dynamic update of the value, and replace the current field with the field from the background, and I did this:

s.innerhtml = STA

An STA is a value that is passed back to the background obtained from result.

The above is a summary of the recent use of jquery and Ajax.



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.