導航欄頁面如何根據請求重新整理頁面的一部分
阿新 • • 發佈：2019-02-19
問題：前端使用bootstrap寫了一個帶導航欄的JSP頁面，現在要完成點選導航欄選單是重新整理頁面的一部分內容而不是整個頁面。
背景：
首頁包含頂部的導航欄<nav>，中間包含<div>作為展示內容和使用者操作的主要區域，底部包含一個<footer>現實版權資訊等。頁面程式碼如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/views/include/common/normal.jsp" 對應的js檔案內容如下：
$(function() {
$(".dropdown").mouseover(function () {
$(this).addClass("open");
});
$(".dropdown").mouseleave(function(){
$(this).removeClass("open");
});
//使用iframe方式載入頁面
$('a').click(function(){
var val = $(this).attr('href');
$("#center").attr("src","example");
})
//使用Ajax請求內容賦值給div的方式動態載入頁面
// $('a').click(function(){
// var url = $(this).attr("name");
// if(url){
// $(".container").html("");
// $.ajax({
// type: "post",
// url: url,
// data: {},
// dataType: "html",
// success: function(data){
// $(".container").html(data);
// }
// });
// }
// })
function a(){
alert($("#test").baseUrl);
}
})
後臺使用SpringMVC處理請求。示例程式碼如下：
@RequestMapping(value="example")
private ModelAndView example() {
// TODO Auto-generated method stub
ModelAndView mo = new ModelAndView();
mo.setViewName("example/example");
mo.addObject("color", "green");
return mo;
}需求：現在想要在點選導航欄頁面時，能夠重新整理iframe的內容。
從網上搜到的解決思路：
1、中間部分使用一個iframe，點選導航欄選單時，更改iframe的src即可，JS程式碼如下：
$('a').click(function(){
var val = $(this).attr('href');
$("#center").attr("src","example");
})2、使用Ajax傳送請求，返回檢視作為div的html內容，JS程式碼如下：
$('a').click(function(){
var url = $(this).attr("name");
if(url){
$(".container").html("");
$.ajax({
type: "post",
url: url,
data: {},
dataType: "html",
success: function(data){
$(".container").html(data);
}
});
}
})兩種方法的區別在於：
1、使用更改iframe的方法傳送的是get請求，使用Ajax可以更改請求方式，可以傳遞表單資訊。
2、返回之後前端的處理方式不一樣，iframe的方式相當於是載入了一個example.jsp和example.js兩個檔案。在瀏覽器開發工具中能夠輕易的找到相應的JS程式碼，這有利於除錯前端程式碼。而使用Ajax的方式，實際上是給div寫入了已經載入好的程式碼。在瀏覽器開發工具請求列表裡面能看到example.js，但是在source裡卻找不到example.js，這不利於除錯JS程式。PS：通過在原始碼裡面新增debugger;斷點Chrome瀏覽器可以跟蹤除錯，但是火狐瀏覽器卻只是阻塞，依然不能看到JS程式碼，無法除錯。
