1. 程式人生 > >關於JQueryAjax檔案載入顯示文字內容

關於JQueryAjax檔案載入顯示文字內容

關於JQueryAjax檔案載入顯示文字內容

1.webContextPath

Jsp程式碼:

request.getContextPath()

<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>

<base href="<%=basePath%>">

Ajax:

通過:$.ajax() 返回其建立的

XMLHttpRequest 物件

2.程式碼分析

2.1.jquery_load.html

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="js/lib/jquery/1.8.3/jquery.js"></script>
    <script type="text/javascript" src=

"js/my_jquery_load.js"></script>

</head>

<body>

<div id="myDiv"><h2>hello world</h2></div>
<button>通過jquery-ajax改變Div內容</button>

</body>
</html>

2.2.my_jquery_load.js

/** * Created by kikop on 2017/6/6. */// http://www.w3school.com.cn/jquery/jquery_events.asp

$(document).ready(function () {
    $("button").click(function () {

        //var path=request.getContextPath();   //ERROR        //$.ajax() 返回其建立的 XMLHttpRequest 物件var htmlObj = $.ajax({
                //url: "<%=path %>/requestContent.txt",  //注意:這裡路徑要取全url: "js/requestContent.txt",  //注意:這裡路徑要取全async: false})
            ;
        $("#myDiv").html(htmlObj.responseText);
    });
});

2.3.requestContent.txt

通過jquery-ajax改變Div內容,這是新的內容。