Updated April 15, 2023
Introduction to jQuery ajax send JSON
Basically, Ajax is used to exchange the data with the server and update the current webpage without refreshing and reloading the whole page. By using the jQuery ajax method we can call them or we can say that we can request the different types of text and post such as HTML, XML, and JSON from the remote server as well as it uses the get and post method that is HTTP protocol. So with the help of this request and method, we can easily load the external data directly into the current webpage. The JSON is a JavaScript library and it is used to traverse the HTML document.
What is jQuery ajax send json?
jQuery takes a lot of normal errands that require many lines of JavaScript code to achieve and wraps them into strategies that you can call with a solitary line of code. jQuery likewise works on a ton of the convoluted things from JavaScript, similar to AJAX calls and DOM control.
The jQuery library contains the accompanying components:
- HTML/DOM control
- CSS control
- HTML occasion techniques
- Impacts and activities
- AJAX
- Utilities
jQuery improves on HTML report navigating, occasion dealing with, vivifying, and Ajax communications for fast web advancement. jQuery is a JavaScript tool compartment intended to work on different errands by composing less code. Here is the rundown of significant center components upheld by jQuery −
- DOM control: JQuery simplified it to pick DOM parts, orchestrate them, and change their substance by using a cross-program open source selector engine called Sizzle.
- Occasion taking care of JQuery offers an exquisite method to catch a wide assortment of occasions, for example, a client tapping on a connection, without the need to mess the HTML code itself with occasion overseers.
- AJAX Support: By using jQuery we can respond to a well-structured webpage as per our requirement.
- Activities: JQuery accompanies a lot of underlying liveliness impacts which you can use in your sites.
- Lightweight: It is very lightweight.
- Cross Browser Support: The jQuery has cross-program backing, and functions admirably in IE 6.0+, FF 2.0+, Safari 3.0+, Chrome, and Opera 9.0+
- Most recent Technology: JQuery upholds CSS3 selectors and fundamental XPath grammar
JSON represents JavaScript Object Notation. It’s a language-autonomous, text-based arrangement, which is regularly utilized for communicating information in web applications. In this article, we’ll take a gander at stacking JSON information utilizing an HTTP GET demand (we can likewise utilize different action words, like POST).
For what reason would we pick JSON over say XML? The vital benefit of utilizing JSON is productivity. JSON is less verbose and jumbled, bringing about fewer bytes and a quicker parse measure. This permits us to handle a greater number of messages sent as JSON than as XML. Besides, JSON has an exceptionally effective and regular item portrayal prompting configurations, for example, BSON, where JSON-like articles are put away in a twofold organization.
The syntax for JSON jQuery is as follows.
The $.getJSON() technique is a convenient partner for working with JSON straightforwardly in the event that you don’t need a lot of additional design. Basically, it comes down to the more broad $.ajax() assistant, with the ideal choices being utilized certainly.
How to send JSON instead of a query?
Now let’s see how we can send JSON instead of a query as follows.
There are different ways to use JSON instead of the query as follows.
In the first way we need to use JSON.stringify to initially serialize your item to JSON, and afterwards determine the contentType so your worker comprehends its JSON. As shown below code.
$.ajax({
url: specified url,
type: "POST",
data: JSOM.stringify(data),
contentType: "app/json",
complete:
});In the second way we can use the dataType option to parse the received data. For the second way, we need to use the following code as follows.
$.ajax({
url: specified url,
type: "POST",
data: JSOM.stringify(data),
contentType: "app/json: charset=UTF-8",
complete:
});The third way, we realize numerous structures like ASP.NET MVC have inherent usefulness to deal with JSON.stringify as the contentType my circumstance is somewhat unique so perhaps this might help somebody later on.
jquery ajax send json code examples
Now let’s see the example of ajax sending JSON for better understanding as follows.
First, we need to create a new project and assign any name that you want. After that we need to create the Html file with any specified name, here we created the index.html file and write the below-mentioned code.
<!DOCTYPE html>
<html>
<head>
<meta name="view" content="width=device-width" />
<title>Json sent with JQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/json2/20130526/json2.min.js"></script>
<script>
$(document).ready(function () {
$("#btnSend").click(function () {
var Book = [{ BookId: 1, BookName: 'ABX', BookPrice: 1520 }
, { BookId: 2, StockName: 'DEMO', BookPrice: 520 }
, { BookId: 3, BookName: 'Sample', BookPrice: 120 }];
$.ajax({
type: "POST",
url: '@Url.Action("GetJsonData", "Book")',
dataType: "json",
data: JSON.stringify({ Book }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
let output = data.map(i => "<tr><td>" + i.bookId + "</td><td>" + i.BookName + "</td><td>" + i.BookPrice + "</td></tr>");
$("#output").html(output);
$("#tbstock").show();
}
});
});
});
</script>
</head>
<body>
<p>
<table style="display:none" id="tbstock" class="table table-bordered">
<tr class="table-head">
<th>Book Id</th>
<th> Book Name</th>
<th> Book Price</th>
</tr>
<tbody id="output">
</table>
</p>
<br />
<input type="Submit" id="btnSend" name="Send Array" value="Send Array" />
</body>
</html>
After that, we need to create the Models and write the following code.
public class Bookkmodel
{
public int bookid { get; set; }
public string BookName { get; set; }
public decimal BookPrice { get; set; }
}
Now create a Book Controller as follows.
public class BookController : Controller
{
public ActionResult Index()
{
return View();
}
public JsonResult GetJsonData(List<Bookmodel> Book)
{
return Json(Book);
}
}Explanation
The output of the above program will be illustrated by using the following screenshot as follows.
Conclusion
We hope from this article you learn more about the jQuery ajax send JSON. From the above article, we have taken in the essential idea of the jQuery ajax and we also see the representation and example of jQuery ajax send JSON. From this article, we learned how and when we use jQuery ajax to send JSON.
Recommended Articles
This is a guide to jQuery ajax send JSON. Here we discuss the essential idea of the jQuery ajax and we also see the representation and example of jQuery ajax send JSON. You may also have a look at the following articles to learn more –
