jQuery is a cross-platform client-side scripting language used widely across the globe. jQuery is a library that is a wrapper of JavaScript and it also supports handling of events, DOM, effects and AJAX. The jQuery library is available in a lot of public servers, and it can be downloaded and integrated by simply linking it to the web page document. As the tagline of jQuery states “write less, do more”, so it is powered by a simple syntax that provides easy navigation, AJAX applications and handling of events.
JSON (JavaScript Object Notation) is a format used for data-interchange. JSON is a very light-weight format which is very easy to read and write by humans. JSON is a format that is purely platform-independent with a format that is similar to some other languages.
JSON is basically built on two different structures or a combination of both:
1) A collection of name – value or key – value pairs, which are called objects in most of the languages.
Learn AJAX, jQuery and JSON from scratch at Udemy.com
JSON Basic Syntax –
{
key : value,
key : value
}
Example –
{
“name”: “json syntax”,
“comments”: “Syntax for multiple key – value pairs”
}
2) An ordered list of values which can be a string enclosed in double quotes, number, or Boolean value (True or False) or may be null sometimes.
Learn the basics of this programming language using a tutorial at Udemy.com
Syntax –
[{key : value,key : value},{key : value,key : value}]Example –
[{"name": "json array syntax","comments": "Syntax for array json"},{"name": "json array syntax","comments": "Syntax for array json"},{"name": "json array syntax","comments": "Syntax for array json"}]Both these structures resemble one or the other structure of most programming languages in some way or the other and thus, JSON is widely used across platforms and languages.
HTTP Communication -
HTTP is a response and request based communication between the client and server. HTTP request communications are done by two methods:
1) GET – This request type is used to request some data from the server.
2) POST – This request type is used to submit data for processing to the specified server.
The HTTP post method is used in most of the web sites to send the data to be processed to the specific server.
Learn jQuery and JSON basics from scratch using a tutorial at Udemy.com
jQuery POST -
jQuery supports HTTP post request using two basic methods :
1) post()
The jQuery post() method is used to load data from the server using a HTTP post request.
Syntax –
$.post(URL, data, callback, type);
The first parameter is the URL that denotes the URL to which the request has to be sent.
The second parameter is an optional parameter. It’s the data (JSON) or any serialized name/value pairs. The second parameter accepts a plain object or string.
The third parameter is another optional parameter. It denotes a function that has to be executed once the data is successfully loaded from the server. This callback method has to be declared if the data type parameter is added. This callback method is also known as success handler.
The fourth parameter is another optional parameter. It denotes the data type that is expected as a response from the server. The data type can be xml, text, html, json, script and many more.
Example -
$.post("getPostData.asp",{"name":"JSON_Request"},function(result){$("span").html(result);});The jQuery JSON request has found a distinct advantage while sending form data to the server.
2) AJAX -
AJAX is used for communication HTTP requests asynchronously between the client and the server.
Syntax -
$.ajax({type: "POST",url: url,data: data,success: success,dataType: dataType});An AJAX request accepts five parameters :
1) type – This denotes the type of request. This parameter takes values GET, POST, PUT etc.
2) URL – This parameter denotes the URL to which the request has to be submitted.
3) Data – This parameter takes the request data that has to be sent along with the request. In this case, this parameter is one which is used to assign the JSON data.
4) success – This parameter denotes the function that is to be called once the AJAX request is completed.
5) dataType – This parameter is used to denote the expected dataType for the response from the server after processing the request data. Some smart data types include xml, JSON, txt, script etc.
NOTE -
1) This is one syntax by which you can process an AJAX request. There are more ways of writing an AJAX request syntax, but this one is standard and accepted by most programming communities.
2) You can also add a parameter called error. This parameter is used to execute when the server request fails.
3) The order of the parameter is not mandatory to be followed in the mentioned sequence and can be changed.
Example -
jQuery.ajax({url : getPostData.asp,type: 'POST',dataType : "json",data: {"name":"JSON_Request"},success:function(data) { alert(data); },error: function() {alert(data); }});Example -
<!DOCTYPE html><html><head><script src="https://code.jquery.com/jquery-1.9.1.js" type='text/javascript'>/* Adding a handler to the submit event */$("#form1").submit(function(event) {/*Stop the usual form submission event*/event.preventDefault();/* get the elements required for the post method*/var $form = $( this ),url = $form.attr( 'action' );/* post method */var posting = $.post( url, { name: $('#name').val()}, function( data ) {alert('success');});});</script></head><body><form id="form1" action="getPostData.php" title="" method="post"><div><label class="title">Enter your Name</label><input type="text" id="name" name="name" ></div><div><input type="submit" id="submitButton" name="submitButton" value="Submit"></div></form></body></html>This example program basically gets input from the textfield of the form and sends it to a file named sample.php.
Steps-
1) In the <script> tag we first get the action of the submit button also known as handler.
2) Then we stop the submit button action to perform the submission normally.
3) After the submission is stopped, we then get the elements of the page that will be used to perform the post action.
4) We then get the url from the form attribute action, and then store it in a variable.
5) Then we add the post method with three parameters, one is the url, the second parameter is the text field value in the form and the third parameter is the completion block that is to be called after the completion of the post action.
联系客服
