交作业交作业交作业

交作业交作业交作业

<!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放在后面,不能像老师的代码放在前面。要放在前面在该怎么做?

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

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);
    }
}

对照其他同学的做了修改,请问哪里还需要修改?

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师