As I wrote it before, when I completed this demo, I found that now everyone no longer uses Ajax to complete the joint menu. In fact, the author’s demo is not for completing this. The author’s main learning direction is the business logic development of the JavaWeb background. However, when working in the background, you still need to have some understanding of the front-end, especially the technology of asynchronous data submission such as Ajax needs to be understood and mastered. So here I use a concatenated menu to practice Ajax asynchronous submission, and then I will write several demos of the asynchronous submission form.
The author's background uses the spring+SpringMVC framework. This part is not explained here, the focus is on jQuery and Ajax.
First, download the resource jquery.js
Jquery official website link
Second, import the downloaded jquery.js into the project
In a javaweb project, just put it in WebContent (you can also create your own folder, but don't put it in WEB-INF file)
Third, start writing code
Create a new JSP file
The code is as follows
<%@page import="java.util.Map"%><%@page import="java.util.List"%><%@page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Ajax Test</title></head><body><!--This is the code to get data from the request passed to the front-end from the background. It can be separated from the topic Ajax, and there is no need to pay too much attention--><%List<Map<String,Object>> listMap = (List<Map<String,Object>>)request.getAttribute("list"); %><select id="class" onchange="getStudent(this.value)"><option value="-1">Please select class</option><%for(int i = 0; i < listMap.size(); i++){Map<String,Object> map = listMap.get(i);%><option><%=map.get("class").toString() %></option><%} %><!--Select class first, and then the second menu option will synchronize the data of the background database asynchronously according to the selected content, thus setting the options of the second menu --></select><!--Second menu, determine the name according to the selected class --><select id="name"><option>Please select class first</option></select></body><!--Import jquery resources --><script type="text/javascript" src="jquery/jquery-3.1.1.min.js"></script><!--Use ajax in jquery to perform asynchronous synchronization of the interface--><script>//jquery standard syntax $(document).ready(function(){// Listen to the change action of the select control with id class. When the control selected by this control changes, this function$("#class").change(function(){//Call ajax$.ajax in jquery({//Set the submission method, mainly "GET" and "POST" type:"P OST",//Set the submitted url, you can only select local ones here. If you need to call resources from other domains, please google to solve the cross-domain problem url:"ajax.html?className="+$("#class").val(),//Set the format of the background return, generally use json directly. This sentence cannot be missed. Otherwise, when the background returns data, the success method will not be called dataType:"json",//When the background successfully returns data, the method is called. The data parameter represents the json data formatted by ajax in jquery (in fact, we need to format it manually in non-jquery ajax, and I also wrote the pure JS method in the comments. The method of formatting json data in jquery is parse) success:function(data){//Clear the select control with id name$("#name").empty();//Add an option$("#name").append("<option>Please select name</option>");//Loop through the entire data (JSON data), and add option$.each(data,function(i,n){$("#name").append(" <option>"+data[i].name+"</option>");});});});});});});</script><!--The submission method does not use the Jquery library (this is used pure JS code, it is rarely used, but it can be used to understand ajax) <script><!-- type="text/javascript">//In fact, we need to add an onchange to the select control to call this method, and then the selected value will be automatically stored in this classname variable function getStudent(className){if(className!="-1"){//Use XMLHttpRequest method, this method is actually used in the above jquery, but we have already encapsulated the var request = new XMLHttpRequest();//Fill in the parameters using the open method. The last true means that you use asynchronous submission, which can be omitted. The default value is truerequest.open("POST","ajax.html?className="+className,true);//Send ajax request request.send();//Send ajax request request.send();//The status of the request is mainly 0 1 2 3 4, but on one side it will only listen 2 3 4, where 4 indicates successful request.onreadystatechange = function(){//Judge that the next step will be carried out only if(request.readyState===4){//Judge that the return code of the web page is 200 When OK, proceed to the next step if(request.status===200){//Format the returned json data var data = JSON.parse(request.responseText);//Tranquility for(var i = 0; i < document.getElementById("name").length; i++){document.getElementById("name").remove(document.getElementById("name").options[i]);}document.getElementById("name").add(new Option(data[0].name));}}}}}</script>--></html>Fourth, the final effect diagram
The above is the JavaWeb development that the editor introduced to you. Using jQuery and Ajax to achieve dynamic linkage menu effects. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!