交作业交作业交作业

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input {
            width: 33%;
            text-align: center;
        }
 
        #text {
            text-align: center;
        }
    </style>
</head>
<body>
<form>
    <input id="b1" type="button" value="流行歌曲">
    <input id="b2" type="button" value="经典歌曲">
    <input id="b3" type="button" value="摇滚歌曲">
    <div id="text"></div>
</form>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
    var list = document.getElementsByTagName("input");
    list[0].onclick = function () {
        f(0);
    };
    list[1].onclick = function () {
        f(1);
    };
    list[2].onclick = function () {
        f(2);
    };
 
    function f(i) {
        $.ajax({
            "url": "/3_6/songs",
            "type": "get",
            "dataType": "json",
            "success": function (json) {
                console.log(json[i]);
                document.getElementById("text").innerHTML = json[i];
            }
        });
    }
</script>
</body>
</html>

package com.imooc.song;
 
import com.alibaba.fastjson.JSON;
 
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 java.io.IOException;
import java.util.ArrayList;
import java.util.List;
 
@WebServlet(urlPatterns = "/songs")
public class SongServlet extends HttpServlet {
    public SongServlet() {
    }
 
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        List list = new ArrayList();
        String type = request.getParameter("t");
        list.add("<h1>稻香<br>晴天<br>告白气球</h1>");
        list.add("<h1>千千阙歌<br>傻女<br>七友</h1>");
        list.add("<h1>一块红布<br>假行僧<br>新长征路上的摇滚</h1>");
        String json = JSON.toJSONString(list);
        System.out.println(json);
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().println(json);
    }
}

除了输出部分的代码，其他和前面2-8作业代码很像啊

但是按我的做法就只能吧script放在后面，不能像老师的代码放在前面。要放在前面在该怎么做？

mixiaofan 2019-11-25

源自：jQuery与Ajax入门 3-6 自由编程

225

收起

2回答

好帮手慕柯南 2019-11-25 19:04:35

同学你好，两种方法都完成的不错，加油，祝学习愉快~

收起回答

提问者 mixiaofan 2019-11-25 16:30:23

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input {
            width: 33%;
            text-align: center;
        }
 
        #text {
            text-align: center;
        }
    </style>
</head>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
    $(function () {
        $("input").click(function () {
            var song = "";
            song = $(this).attr("value");
            $.ajax({
                "url": "/3_6/songs",
                "type": "get",
                "data": {"t": song},
                "dataType": "json",
                "success": function (json) {
                    $("#text").html("");
                    $("#text").html(json);
                }
            });
        });
    });
</script>
<body>
<form>
    <input id="b1" type="button" value="流行歌曲">
    <input id="b2" type="button" value="经典歌曲">
    <input id="b3" type="button" value="摇滚歌曲">
    <div id="text"></div>
</form>
 
</body>
</html>

package com.imooc.song;
 
import com.alibaba.fastjson.JSON;
 
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 java.io.IOException;
import java.util.ArrayList;
import java.util.List;
 
@WebServlet(urlPatterns = "/songs")
public class SongServlet extends HttpServlet {
    public SongServlet() {
    }
 
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        List list = new ArrayList();
        String type = request.getParameter("t");
        if (type != null && type.equals("流行歌曲")) {
            list.add("<h1>稻香<br>晴天<br>告白气球</h1>");
        }else if (type != null && type.equals("经典歌曲")) {
            list.add("<h1>千千阙歌<br>傻女<br>七友</h1>");
        }else if (type != null && type.equals("摇滚歌曲")) {
            list.add("<h1>一块红布<br>假行僧<br>新长征路上的摇滚</h1>");
        }
        String json = JSON.toJSONString(list);
        System.out.println(json);
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().println(json);
    }
}