<script>块必须要加到html的body里面吗？
来源：3-6 自由编程
邱虎666
2019-01-20 12:12:53
老师，我试了一下，加在head体中，程序出不来结果，放到body体中才行。这是为啥啊？看到视频上一节课script内容是放到head中的，谢谢。
3回答
-
你好！代码中有个问题，在Servlet中，第一个if语句后多了一个分号，导致分号后的大括号中的语句每次都会被执行，需要把分号去掉。
如果想清空之前的内容，使用$("#song").text("");或$("#song").html("");都可以，之前出问题，应该还是跟上面的分号有关。
关于放到body中才能被执行的问题，html文件的加载顺序是先加载head标签中的内容，然后才是body，如果加载head是，body中的标签还未被加载，就会出现你的问题。所以一般将js脚本写在页面底部。如果head标签中只是函数定义，到了body中才进行调用，这是可以的。
祝学习愉快！
0 -
邱虎666
提问者
2019-01-20
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>
<input id="pop" type="button" value="pop">
<input id="classic" type = "button" value ="classic">
<input id="rock" type = "button" value = "rock">
<div id="song"></div>
<script type="text/javascript">
$("#pop").click(function () {
$.ajax({
"url":"/ajax/ChooseSongServlet",
"type":"get",
"data":{"songtype":"pop"},
"dataType":"json",
"success":function(json){
console.log(json);
$("#song").text("");
for (var i = 0; i < json.length; i++) {
$("#song").append("<h1>"+json[i].name+"</h1>");
$("#song").append("<h1>"+json[i].type+"</h1>");
}
}
})
});
$("#classic").click(function () {
$.ajax({
"url":"/ajax/ChooseSongServlet",
"type":"get",
"data":{"songtype":"classic"},
"dataType":"json",
"success":function(json){
console.log(json);
$("#song").text("");
for (var i = 0; i < json.length; i++) {
$("#song").append("<h1>"+json[i].name+"</h1>");
$("#song").append("<h1>"+json[i].type+"</h1>");
}
}
})
});
$("#rock").click(function () {
$.ajax({
"url":"/ajax/ChooseSongServlet",
"type":"get",
"data":{"songtype":"rock"},
"dataType":"json",
"success":function(json){
console.log(json);
for (var i = 0; i < json.length; i++) {
$("#song").append("<h1>"+json[i].name+"</h1>");
$("#song").append("<h1>"+json[i].type+"</h1>");
}
}
})
})
</script>
</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 ChooseSongServlet
*/
@WebServlet("/ChooseSongServlet")
public class ChooseSongServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public ChooseSongServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<Song> list = new ArrayList<Song>();
String type = request.getParameter("songtype");
if(type!=null&&type.equals("pop"));{
list.add(new Song("here i am", "pop"));
list.add(new Song("here i am", "pop"));
list.add(new Song("here i am", "pop"));
}if(type!=null&&type.equals("classic")) {
list.add(new Song("contry road", "classic"));
list.add(new Song("contry road", "classic"));
list.add(new Song("contry road", "classic"));
}else if (type==null||type.equals("rock")) {
list.add(new Song("f", "rock"));
list.add(new Song("f", "rock"));
list.add(new Song("f", "rock"));
}
String json= JSON.toJSONString(list);
System.out.println(json);
response.getWriter().println(json);
}
/**
* @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);
}
}
这是歌曲那个自由编程的代码，两个问题，第一个是上面这段代码放在head里面输出不了，只能放到body里面。第二个问题是，点击每一个按钮后，输出的信息都是累积之前的信息，应该是要清除之前的，请问怎么处理。
0 -
一叶知秋519
2019-01-20
由于浏览器加载html页面时，是顺序加载的，而js写到头部和body中是有区别的，
在body部分中的JavaScripts会在页面加载的时候被执行；在head部分中的JavaScripts会在被调用的时候才执行。
同学可以把你的代码贴一下，我们帮助你更正或者同学可以根据上面的区别自己修改试一下哦~
祝学习愉快！
0
相似问题