关于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内容,这是新的内容。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
YOLO高分设计资源源码,详情请查看资源内容中使用说明 YOLO高分设计资源源码,详情请查看资源内容中使用说明 YOLO高分设计资源源码,详情请查看资源内容中使用说明 YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明
### 回答1: 答:jQuery 可以使用 $.ajax() 方法来读取 XML 文件。下面是一个例子:$.ajax({url: "example.xml",dataType: "xml",success: function(xml) {// 读取 XML 文件成功之后执行的代码}}); ### 回答2: jQuery加载读取xml文件的代码范例如下: ```javascript $.ajax({ url: "data.xml", dataType: "xml", success: function(data) { $(data).find("book").each(function() { var title = $(this).find("title").text(); var author = $(this).find("author").text(); var year = $(this).find("year").text(); console.log("Title: " + title + ", Author: " + author + ", Year: " + year); }); }, error: function() { console.log("Failed to load XML file."); } }); ``` 以上代码使用`$.ajax()`方法加载指定的xml文件,并设置`dataType`为 "xml"。成功加载后,在`success`回调函数中,使用`$(data).find("book")`查找xml文件中的所有"book"元素,并使用`.each()`方法对每个 "book"元素进行处理。在处理过程中,通过`$(this).find("title")`和`$(this).find("author")`方法找到相应的元素,并使用`.text()`方法获取其文本内容。最后,将获取到的标题、作者和年份输出到控制台。 如果加载xml文件失败,将在`error`回调函数中输出错误信息"Failed to load XML file."。 注意:上述代码中的"url"应替换为实际的xml文件路径。 ### 回答3: JQuery是一个流行的JavaScript库,可以简化开发者对网页进行操作的过程。它提供了许多方便的方法来加载、读取和处理XML文件。 下面是一个JQuery加载读取XML文件的示例代码: 1. 首先,我们需要在HTML文件中引用JQuery库。可以通过CDN链接或本地文件的方式引入。 ```html <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> ``` 2. 接下来,我们可以使用JQueryajax()方法来加载XML文件。 ```javascript $.ajax({ url: "example.xml", dataType: "xml", success: function(data) { // 加载成功后的回调函数 // 在这里可以开始处理XML文件的数据 }, error: function() { // 加载失败后的回调函数 } }); ``` 在上面的代码中,我们指定了XML文件的url和数据类型为xml。成功加载后,可以执行一个回调函数来处理XML数据。加载失败时,则可以执行另一个回调函数来处理错误。 3. 在成功加载后的回调函数中,我们可以开始处理XML文件的数据。 ```javascript success: function(data) { // 使用JQuery的find()方法定位到XML文件中特定元素 $(data).find("book").each(function() { var title = $(this).find("title").text(); var author = $(this).find("author").text(); // 处理获得的数据 console.log("书名:" + title); console.log("作者:" + author); }); } ``` 在这个示例中,我们使用JQuery的find()方法定位到XML文件中的每个book元素,并从中读取title和author元素的文本内容。然后,我们可以对获得的数据进行处理,如显示在控制台上。 以上就是一个使用JQuery加载读取XML文件的简单示例。你可以根据自己的需求来进一步处理XML数据,如动态生成网页内容或提交到服务器等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值