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

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