JSON Tutorials
- What is Json
- Json Example
- Json Object Example
- Json with php
- How to Convert Data from MySQL to JSON using PHP
- How to store json Data into MySQL database using PHP
- How to insert json data into mysql database using PHP
- validate json string in php
- Json with AJAX
- Json with javascript
- Json Program example
Important Links
Json with Ajax
$.ajax() method
File name : index.php
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Your URL",
data: "{}",
dataType: "json",
success: function (data) {
alert(data);
},
error: function (result) {
alert("Error");
}
});
The dataType setting controls how data we receive from the server is treated. So if we want JSON from the server to be treated as text in our Javascript on the client side, for example, then we set this value as text
type, which is the HTTP verb that we want to use. since jQuery 1.9.0, you can use method instead of type.
type is contentType. This is where understanding how HTTP requests and responses work helps a lot. What we set here gets sent as part of the HTTP header field Content-Type. That's important to note because we're letting the server know ahead of time what type of content we're sending, which allows the server to interpret the response correctly. For example, if you see a Content-Type of application/json you would know to process the content as JSON in your server-side code
File name : index.php
Now, the data setting is the data we're going to send to the server. We can send data to the server in a variety of different formats, but the default is application/x-www-form-urlencoded. That means we'll be sending text to our server with our form data formatted in key-value pairs, like first-name=John&last-name=Doe. Most, if not all, web server languages will pick up the key-value pairs and separate them for you either natively or through the use of libraries or frameworks.
File name : index.php
The $.ajax() method has several events we can hook into to handle our AJAX responses accordingly: success, error, complete, and beforeSend.
File name : index.php
One important thing to note is that the data parameter for the success function will be dependent on the dataType setting. So it's completely possible to treat JSON coming from the server as a string by setting dataType to text. Many developers, including myself, occasionally get tripped up attempting to output their request in the html() method and then wonder why nothing is showing up when they try to render JSON as HTML, which doesn't work at all.
File name : index.php
It's important to note that we need to format the response data correctly according to the Content-Type we want to send back. If we want to send a simple text message we would respond with Content-Type: plain/text. If we want to respond with JSON, we'll send a Content-Type: application/json and a properly formatted JSON string without any extra characters before or after the string,
File name : index.php
$.ajax({
url: 'users.php',
dataType: 'json',
type: 'post',
contentType: 'application/json',
data: JSON.stringify( { "first-name": $('#first-name').val(), "last-name": $('#last-name').val() } ),
processData: false,
success: function( data, textStatus, jQxhr ){
$('#response pre').html( JSON.stringify( data ) );
},
error: function( jqXhr, textStatus, errorThrown ){
console.log( errorThrown );
}
});
File name : index.php
File name : index.php
File name : index.php
File name : index.php
File name : index.php
File name : index.php
File name : index.php
File name : index.php
File name : index.php
File name : index.php
File name : index.php
File name : index.php
File name : index.php
File name : index.php