Ajax Operation __ajax in jquery

Source: Internet
Author: User
Tags commit flush json

Java software Development, in the background we can through a variety of frameworks, such as SSH, such as code encapsulation, convenient for us to write Java code, for example, STRUTS,SPRINGMVC the process from the foreground to the action to encapsulate control, So that we can do it with just a few simple configurations, and spring encapsulates the management of a variety of objects, provides a way for AOP programming, greatly facilitates us, while Hibernate and Ibatis encapsulate the JDBC code, We don't need to write the repetitive and complex JDBC code every time.

The front desk, for the page some effects, verification, etc., we are all done through the JavaScript language, but it is like our Java code, is the most basic of the foreground language, and jquery is to encapsulate the JS code to facilitate the writing of our foreground code, And it has a big advantage to solve the browser compatibility problem, which is one of the reasons we use it very important.

Now, in order to meet the needs of users, Ajax (asynchronous Javascript + XML) Asynchronous refresh has played an incomparable role, previously written AJAX operations, always need us to do the same as the JDBC code to do several necessary steps:

ajax--core XMLHttpRequest objects, and jquery encapsulates Ajax asynchronous operations, here are a few common ways to look at them. $.ajax,$.post, $.get, $.getjson.

One, $.ajax, this is the most basic step of jquery for Ajax encapsulation, which can be done with all the functions of asynchronous communication. That is, in which case we can perform an asynchronous flush operation with this method. But it has a lot of parameters, sometimes it can be troublesome. Take a look at the commonly used parameters:

var configobj = {

Method//Data submission: Get and post

URL//Data submission Road strength

Async//Whether asynchronous refresh is supported, by default True

Data//information required for submission

DataType//The type of data returned by the server, such as Xml,string,json

Success//callback function after successful request

callback function after error//request failed


$.ajax (configobj);//called Through the $.ajax function.

Well, let's look at a practical example, and look at an example of asynchronous deletion:

				$.ajax ({
					type: "POST",  //Submit by
					URL: "${pagecontext.request.contextpath}/org/dodelete.action") ,//Path data
					: {
						"org.id": "${org.id}"
					},//, using JSON format for transmission
					success:function (Result) {// The return data is processed accordingly according to the result
						if (result.success) {
							$ ("#tipMsg"). Text ("Delete data succeeded");
							Tree.deleteitem ("${org.id}", true);
						} else {
							$ ("#tipMsg"). Text ("Delete data Failed");}}

Second, $.post, this function is actually a further encapsulation of the $.ajax, reducing the parameters, simplifying the operation, but the scope of use is even smaller. $.post simplifies the way data is submitted and can only be submitted by post. It can only be an asynchronous access server, cannot be accessed synchronously, and cannot be handled incorrectly. In satisfying these cases, we can use this function to facilitate our programming, it's main several parameters, like Method,async, etc have been set by default, we can not change. Examples are no longer introduced.

URL: Send request address.

Data: The Key/value parameter to be sent.

Callback: callback function when sending successfully.

Type: Returns the content format, XML, HTML, script, JSON, Text,_default.

Three, $.get, and $.post, the function is to encapsulate the commit data of the Get method, using only the same way that the get commit data solves the asynchronous flush, using the same method as the top. No more demonstrations here.

Four, $.getjson, this is a further encapsulation, which is to manipulate the return data type as JSON. Inside the three parameters, we need to set, very simple: url,[data],[callback].

In fact, will be the $.ajax method, the other will be used, are the same, in fact, very simple.

But there is a problem, it is more troublesome, that is, if the page data volume is larger, how to do it. In the processing of regular forms, we use the framework Struts2 to get the encapsulation automatically through the domain-driven mode, so how to encapsulate it through Ajax. Here jquery has a plug-in, jquery form, by introducing this JS file, we can imitate form form to support STRUTS2 domain-driven mode, automatic data encapsulation. Usage and $.ajax Similar, take a look at the actual example, here write a save the user's foreground code:

	$ (function () {
		var options = {
			beforesubmit:function () {////handle previously required function
			    $ ("tipmsg"). Text ("Data is being saved, please wait ...");
			    $ ("#insertBtn"). attr ("Disabled", true);
		    success:function (Result) {//Returns the callback function if desired after success
				( result.success) {
					$ ("#tipMsg"). Text ("Institution saved successfully");
	                                   Here is a corresponding tree, which will be introduced in the back,
					//control the tree-shaped components, add new node
					var tree = window.parent.treeFrame.tree;
					Tree.insertnewchild ("${org.id}", Result.id, Result.name);
				} else {
					$ ("#tipMsg"). Text ("Institution save Failed");
				Enable Save button
				$ ("#insertBtn"). attr ("disabled", false);
		$ (' #orgForm '). Ajaxform (options); Commit through the Ajaxform method in Jquery.form

So we don't have to do the data package processing, greatly simplifying the operation of our AJAX operations such as asynchronous flush. In the jquery for the Ajax operation, the feeling of using more, and form forms of processing or very similar, but the implementation of the function is not the same. Learning programming, in fact, is to learn the flow of data processing, how to get from the foreground, transfer to the server for the corresponding processing, and then return to the relevant display, the process through a number of technical implementation, the completion of the software development, the feeling is very interesting.

Learn more about jquery and we need to do this by querying the API documentation: http://hemin.cn/jq/

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

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.