老师在html中标注了两处调用name属性为什么都失败了,没有反应,而调用id没问题

来源:3-6 自由编程

weixin_慕设计3058955

2020-01-04 17:07:05

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style>

input{

width:33%;

text-align:center;

}

#text{

text-align:center;

}

/* .text{

text-align:center;

} */调用失败调用失败调用失败调用失败调用失败调用失败调用失败调用失败调用失败调用失败调用失败

</style>

<script type="text/javascript" src="lib/jquery-3.4.1.min.js"></script>

<script type="text/javascript">

var song="";

$(function(){

$("input").click(function(){

song=$(this).attr("value");

$.ajax({

"url":"/songlist/song",

"type":"get",

"data":{"t":song},

"dataType":"json",

"success":function(json){

$("#text").html("");

$("#text").html(json);

//$(".text").html(json);调用失败调用失败调用失败调用失败调用失败调用失败调用失败调用失败

}

})

}) 

})

</script>

</head>

<body>

<input type="button" id="" name="" value="流行歌曲">

<input type="button" id="" name="" value="经典歌曲">

<input type="button" id="" name="" value="摇滚歌曲">

<div id="text" name="text"></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 SongList

 */

@WebServlet("/song")

public class SongList extends HttpServlet {

private static final long serialVersionUID = 1L;

       

    /**

     * @see HttpServlet#HttpServlet()

     */

    public SongList() {

        super();

        // TODO Auto-generated constructor stub

    }


/**

* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

*/

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

response.setContentType("text/html;charset=utf-8");

String value=request.getParameter("t");

List list=new ArrayList();

if(value!=null&&value.equals("流行歌曲")) {

list.add("<h1>稻香<br>晴天<br>告白气球</h1>");

}else if(value!=null&&value.equals("经典歌曲")){

list.add("<h1>千千阙歌<br>傻女<br>七友</h1>");

}else if(value!=null&&value.equals("摇滚歌曲")){

list.add("<h1>一块红布<br>假行僧<br>新长征路上的摇滚</h1>");

}else {

System.out.println("<h1>请输入正确的选项</h1>");

}

String json=JSON.toJSONString(list);

response.getWriter().println(json);

}

}


写回答

1回答

好帮手慕小班

2020-01-04

同学你好,1、在js与css中 “.”本身是类选择器,所以   .text是类选择器的写法,选择的标签是有class属性时,使用类选择器。

        2、在贴出的html页面中,并没有class属性为text的标签内容,所以也就没有对应获取到对应的标签,导致调用失败。

http://img.mukewang.com/climg/5e105bae09e7394f05360253.jpg

如果我的回答解决了你的疑惑,请采纳!祝学习愉快!

0

0 学习 · 9666 问题

查看课程