AJAX调用可在JSP页面上使用,但不能在其导入上使用

时间:2019-10-21 12:22:44

标签: javascript jquery html ajax jsp

所以我有这个ajax电话:

$.ajax({
        url: '${pageContext.request.contextPath}/filial/select.json',
        method: 'GET',
        success: function (json) {
            var itens=[];

            for (var i = 0; i < json.length; i++) {
                itens.push('<input id= "idFilial'+json[i][0]+'" type = checkbox class=checkbox1 name = filiaisId value="'+json[i][0]+'">' +json[i][1]+"-"+ json[i][2]  + '</input></br>');
            }
            $('#idFilial').html($("<tbody/>", {html:itens}));
            $('.filiaisId').each(function(){
                $( "#idFilial"+ $(this).attr('value')).prop( "checked", true);
            });
        },
        error: function () {
            console.log("Path \"/filial/select.json\" not found!");
        }

    });

在此JSP页面中它可以正常工作:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="security" uri="http://www.springframework.org/security/tags" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="icon" href="${pageContext.request.contextPath}/resources/landing_page/img/dunning_16.ico">
    <title>DUNNING - Relatórios Personalizados</title>

    <c:import url="template/include_css.jsp"/>
</head>
<body>
<div id="wrapper">
    <c:import url="template/menu.jsp" />
    <div id="page-wrapper" class="gray-bg">
        <c:import url="template/header.jsp" />
        <!--Some code here-->
        <c:import url="template/footer.jsp"/>
    </div>
</div>
<c:import url="template/include_js.jsp"/>
<c:import url="template/include_js_datatables.jsp" />
<c:import url="template/include_js_highcharts.jsp"/>
<script src="${pageContext.request.contextPath}/resources/js/plugins/chosen/chosen.jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#menu-relatorios').addClass("active");
        $('#menu-relatorios-in').addClass("collapse in");
        $('#menu-relatorio-personalizado').addClass("active");
        $('#botao-download').click(function() {
            window.location='${pageContext.request.contextPath}/relatorio_personalizado/download';
        });
        $.ajax({
            url: '${pageContext.request.contextPath}/filial/select.json',
            method: 'GET',
            success: function (json) {
                var itens=[];

                for (var i = 0; i < json.length; i++) {
                    itens.push('<input id= "idFilial'+json[i][0]+'" type = checkbox class=checkbox1 name = filiaisId value="'+json[i][0]+'">' +json[i][1]+"-"+ json[i][2]  + '</input></br>');
                }
                $('#idFilial').html($("<tbody/>", {html:itens}));
                $('.filiaisId').each(function(){
                    $( "#idFilial"+ $(this).attr('value')).prop( "checked", true);
                });
            },
            error: function () {
                console.log("Caminho \"/filial/select.json\" não encontrado!");
            }
        });
    });
</script>
</body>
</html>

现在,如果您注意到了,还有一个导入到另一个名为“ header.jsp” <c:import url="template/header.jsp" />的JSP页面,对吗?这就是ID idFilial所在的位置!这是波纹管:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="security" uri="http://www.springframework.org/security/tags" %>

<!-- HEADER jsp fragment -->
<div class="row no-padding">

	<nav class="navbar navbar-static-top" role="navigation">
		
		<!-- Some Code here-->
						<div class="col-md-12" id="idFilial">
		<!--Some more code here-->
	</nav>
</div>
<script type="text/javascript">
	$(document).ready(function () {
		<!-- some more pointless code here-->
		$.ajax({
			url: '${pageContext.request.contextPath}/filial/select.json',
			method: 'GET',
			success: function (json) {
				var itens=[];

				for (var i = 0; i < json.length; i++) {
					itens.push('<input id= "idFilial'+json[i][0]+'" type = checkbox class=checkbox1 name = filiaisId value="'+json[i][0]+'">' +json[i][1]+"-"+ json[i][2]  + '</input></br>');
				}
				$('#idFilial').html($("<tbody/>", {html:itens}));
				$('.filiaisId').each(function(){
					$( "#idFilial"+ $(this).attr('value')).prop( "checked", true);
				});
			},
			error: function () {
				console.log("Caminho \"/filial/select.json\" não encontrado!");
			}

		});
	});
</script>

现在就是这样!我将此标题页导入到代码的其他部分。但是由于某种原因,ajax调用仅在页面本身上运行,例如在我作为示例的relatorio_personalizado.jsp上运行,而没有对header.jsp本身进行调用!我将此ID为ID的标头页导入到代码中十亿个不同的位置,因此,将AJAX调用绑定到此导入是理想的,而不是四处复制并将ajax调用粘贴到我网站中的所有视图!有人知道我在做什么错吗?我什至可以在导入中使用<script>标签吗?

0 个答案:

没有答案