Load database data by adding functions in jquery to send AJAX requests to the page in JSON format

Source: Internet
Author: User

Load Database data by adding functions in jquery to send Ajax requests to the page in JSON format

Query the warehouse information from the database, displayed in the drop-down menu:

first of all, introduce JS plugin, here use Jquery-1.8.3.js

<script type= "Text/javascript" src= "${pagecontext.request.contextpath}/js/jquery-1.8.3.js" ></script>

when the page is loaded, the AJAX request should be sent to the database to load the data into the down menu

So this is a page load event

$ (function() {

Dom initialization after loading

$.post (request URL, request parameter, callback function, return type);

$.post ("${pagecontext.request.contextpath}/store_listajax.action",function(data) {

Data: Converted object: JSON object array-dom object

alert (data);

});

});

</script>

the response to the page should be JSON-formatted data

therefore , the returned result set type in store_listajax.action must be in JSON format

The type of the result set that corresponds to the Struts.xml

When this is done, the JSON-formatted data returned to the page will be placed in the drop-down menu

depending on the jquery API, you can find $ (object). each ([callback]) method, which is another common method that you can use to iterate over objects and arrays, object is an array of objects that need to be traversed, Callback is a callback function that each member /element needs to execute

Replace alert (data) with the following code

$ (data). Each (function() {

var option=$ ("<optionvalue=" + this. id+ "' >" + this. name+ "</option>");

Add to drop-down list

$ ("#store_id"). Append (option);

});

In this case, you can add data from the database to the drop-down menu.

Load database data by adding functions in jquery to send AJAX requests to the page in JSON format

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.