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