Como escrevi antes, quando completei essa demonstração, descobri que agora todos não usam mais o Ajax para concluir o menu conjunto. De fato, a demonstração do autor não é para concluir isso. A principal direção de aprendizado do autor é o desenvolvimento da lógica de negócios do histórico Javaweb. No entanto, ao trabalhar em segundo plano, você ainda precisa entender o front-end, especialmente a tecnologia de envio de dados assíncronos, como o Ajax, precisa ser entendido e dominado. Então, aqui eu uso um menu concatenado para praticar o envio assíncrono do Ajax e, em seguida, escreverei várias demos do formulário de envio assíncrono.
O histórico do autor usa a estrutura Spring+Springmvc. Esta parte não é explicada aqui, o foco está no jQuery e no Ajax.
Primeiro, faça o download do recurso jQuery.js
Link do site oficial do jQuery
Segundo, importe o JQuery.js baixado para o projeto
Em um projeto Javaweb, basta colocá-lo no WebContent (você também pode criar sua própria pasta, mas não o coloque no arquivo web-inf)
Terceiro, comece a escrever código
Crie um novo arquivo JSP
O código é o seguinte
<%@página import = "java.util.map"%> <%@página import = "java.util.list"%> <%@página idioma = "java" contentType = "text/html; charset = utf-8" Pagencoding = "utf-8"%> <! Transitória // en "" http://www.w3.org/tr/html4/loose.dtd"><html> <head> passou para o front-end do fundo. Ele pode ser separado do tópico Ajax e não há necessidade de prestar muita atenção-> <%List <map <string, object >> listMap = (list <map <string, objeto >>) request.getAttribute ("list"); %> <select id = "class" onchange = "getStudent (this.value)"> <opção value = "-1"> selecione classe </pption> <%para (int i = 0; i <listmap.size (); i ++) {map <string, object> map = listmap.get (i););%> <s%) {map %> <!-Selecione a classe primeiro e, em seguida, a segunda opção de menu sincronizará os dados do banco de dados em segundo plano de forma assíncrona de acordo com o conteúdo selecionado, definindo assim as opções do segundo menu-> </select> <!-Segundo menu, determine o nome de acordo com a classe selecionada-> <leclect = "Nome"> <! type = "text/javascript" src = "jQuery/jQuery-3.1.1.min.js"> </script> <!-use o ajax no jQuery para executar a sincronização assíncrona, quando o controle da interface-// syncronse da interface do controle da syncronização do controle do controle da síntese (do documento). Esta função $ ("#classe"). Alterar (function () {// Chame Ajax $ .AJAX em jQuery ({// Defina o método de envio, principalmente "Get" e "Post" Type: "P ost", // Defina o URL enviado, você pode selecionar apenas os locais aqui. Se você precisar chamar recursos de outros domínios, pesquise no Google para resolver o URL do problema de domínio cruzado: "ajax.html? ClassName ="+$ ("#classe"). Esta frase não pode ser perdida. Caso contrário, quando o plano de fundo retornar dados, o método de sucesso não será chamado de Datatype: "JSON", // Quando o plano de fundo retorna com sucesso dados, o método é chamado. O parâmetro de dados representa os dados JSON formatados pelo AJAX em jQuery (na verdade, precisamos formatá-los manualmente em Ajax não-jQuery, e também escrevi o método JS puro nos comentários. O método de formatação de dados JSON em JQuery é parse) Sucesso: função (dados) {// limpe o controle de identificação com um nome de#"name"#"). Opção $ ("#Nome"). Anexe ("<pution> Por favor, selecione o nome </ppthment>"); // Faça um percurso através de todos os dados (dados JSON) e adicione a opção $ .EECH (Data, function (i, n) {$ ("#nome"). Append (" <pution> "+dados [i] .Name+" </ppthment> ");});});});});});}); </script> <!-O método de envio não usa a biblioteca jQuery (que é usada JS pura, é usada, mas pode ser usado para entender" script> <cript> <script> " Adicione uma parte de compartilhamento ao controle de seleção para chamar esse método e, em seguida, o valor selecionado será armazenado automaticamente nesta função variável de nome da classe GetStudent (ClassName) {if (className! parâmetros usando o método aberto. O último verdadeiro significa que você usa o envio assíncrono, que pode ser omitido. O valor padrão é Truerequest.open ("Post", "Ajax.html? ClassName ="+ClassName, True); // Envie ajax request request.send (); // Envie ajax request request.send (); // o status do status é principalmente 0 1 2 3 4, mas em um lado, em um lado, ele só ouvirá 2 4 4, em um lateral, mas de um lado para outa. function () {// julgue que a próxima etapa será realizada apenas se (request.readyState === 4) {// julgar que o código de retorno da página da web estiver 200 quando ok, prossiga para a próxima etapa se (request.status === 200) {// formate o JSON devolvido var data = json.Parse (Solic.Responstext); document.getElementById ("Nome"). Length;Quarto, o diagrama de efeito final
O exposto acima é o desenvolvimento Javaweb que o editor apresentou a você. Usando jQuery e Ajax para obter efeitos de menu de ligação dinâmica. Espero que seja útil para todos. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a todos a tempo. Muito obrigado pelo seu apoio ao site wulin.com!