【JavaWeb】jQuery对Ajax的支持
发布时间:2020-12-15 05:28:59 所属栏目:Java 来源:网络整理
导读:jQuery对Ajax的支持 jQuery对Ajax进行封装,提供了$.ajax()方法 语法:$.ajax(options) 常用设置项 说明 url 发送请求地址 type 请求类型get|post data 向服务器传递的参数 dataType 服务器响应的数据类型 text|json|xml|html|jsonp|script success 接收响应
jQuery对Ajax的支持
实例代码MusicServlet.java package demo; import java.io.IOException; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.alibaba.fastjson.JSON; /** * Servlet implementation class MusicSetvlet */ @WebServlet("/music") public class MusicServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public MusicServlet() { super(); // TODO Auto-generated constructor stub } /** * @see HttpServlet#doGet(HttpServletRequest request,HttpServletResponse response) */ protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException { String songType = request.getParameter("songType"); System.out.println(songType); List<String> song = new ArrayList<>(); if(songType.equals("流行歌曲")) { song.add("稻香"); song.add("晴天"); song.add("告白气球"); }else if(songType.equals("经典歌曲")) { song.add("千千阙歌"); song.add("傻女"); song.add("七友"); }else if(songType.equals("摇滚歌曲")) { song.add("一块红布"); song.add("假行僧"); song.add("星长征路上的摇滚"); } String json = JSON.toJSONString(song); response.setContentType("text/html;charset=utf-8"); response.getWriter().println(json); } } musicList.java <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Insert title here</title> <style> div { text-align: center; } .mystyle { width: 30%; cursor: pointer; } </style> </head> <body> <div> <input class="mystyle" type="button" value="流行歌曲"> <input class="mystyle" type="button" value="经典歌曲"> <input class="mystyle" type="button" value="摇滚歌曲"> </div> <div id="divContent"></div> <script type="text/javascript" src="js/jquery-3.4.1.js"></script> <script type="text/javascript"> $(":button").click(function() { var songType = this.value; $(function() { $.ajax({ "url" : "/ajax/music","type" : "get","data" : { "songType" : songType },"dataType" : "json","success" : function(json) { $("#divContent>span").remove(); $("#divContent>br").remove(); for (var i = 0; i < json.length; i++) { var html = "<span>" + json[i] + "</span><br>"; $("#divContent").append(html); } } }) }) }) </script> </body> </html> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |