老师帮我看看
来源：3-6 自由编程
Wonwayshon
2020-10-14 08:57:24
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax2</title>
<style type="text/css">
input{
width:200px;
height:25px;
}
</style>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
$(".btn").click(function(){
$.ajax({
"url" : "/Ajax/Ajax2",
"type" : "get",
"data" : "name="+name,
"dataType" : "json",
"success" : function(json){
var str="";
for(var i=0;i<json.length;i++){
str+="<b style="font-size:25px;">"+json[i]+"</b></br>";
}
document.getElementById("div1").innerHTML=str;
}
})
})
})
</script>
</head>
<body>
<div style="text-align:center;">
<input type="button" value="流行歌曲" class="btn" name="0">
<input type="button" value="经典歌曲" class="btn" name="1">
<input type="button" value="摇滚歌曲" class="btn" name="2">
<div id="div1"></div>
</div>
</body>
</html>package com.imooc.ajax;
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 Ajax2
*/
@WebServlet("/Ajax2")
public class Ajax2 extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public Ajax2() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List lx=new ArrayList();
List jd=new ArrayList();
List yg=new ArrayList();
lx.add("稻香");
lx.add("晴天");
lx.add("告白气球");
jd.add("千千阙歌");
jd.add("傻女");
jd.add("七友");
yg.add("一块红布");
yg.add("假行僧");
yg.add("新长征路上的摇滚");
String lxs=JSON.toJSONString(lx),
jds=JSON.toJSONString(jd),
ygs=JSON.toJSONString(yg),
name=(String)request.getParameter("name"),
responseStr=null;
if(name.equals("0")) {
responseStr=lxs;
}else if(name.equals("1")) {
responseStr=jds;
}else if(name.equals("2")) {
responseStr=ygs;
}
response.setContentType("text/html;charset=utf-8");
response.getWriter().println(responseStr);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}写回答
1回答
-
同学你好，代码的问题如下
1，双引号中再嵌套引号的时候需要使用单引号，所以这里的font-size:25px应该使用单引号
2，如下位置的name未进行定义，所以会出现错误
修改后如下
$(function(){ $(".btn").click(function(){ var name=this.name; $.ajax({ "url" : "/ajax/Ajax2", "type" : "get", "data" : "name="+name, "dataType" : "json", "success" : function(json){ var str=""; for(var i=0;i<json.length;i++){ str+="<b style='font-size:25px'>"+json[i]+"</b></br>"; } document.getElementById("div1").innerHTML=str; } }) }) })如果我的回答解决了你的疑惑，请采纳！祝学习愉快！
0
相似问题