ajax加载过的内容,通过Ajax加载内容

4 个答案:

答案 0 :(得分:3)

您想为链接设置ajax。要求:

为链接编写处理程序。

当有人点击某个链接(重定向到该页面)时,我们必须取消浏览器的默认行为。

删除从服务器收到的旧数据ajax并使#ajax-wrap保持新鲜。

通过ajax加载远程页面并将其设置为#ajax-wrap。

现在将其滑下来。

醇>

// Document Ready

$(function () {

// attaching click handler to links

$("a.home-right").click(function (e) {

// cancel the default behaviour

e.preventDefault();

// get the address of the link

var href = $(this).attr('href');

// getting the desired element for working with it later

var $wrap = $('#ajax-wrap');

$wrap

// removing old data

.html('')

// slide it up

.slideUp()

// load the remote page

.load(href + ' #content', function () {

// now slide it down

$wrap.slideDown();

});

});

});

答案 1 :(得分:1)

您可以像这样使用ajax:

$("a.home-right").click(function () {

$.ajax({

type: "get",

url: "YOUR URL HERE",

success: function(data){

$('#ajax-wrap').html(data);

$('#ajax-wrap').slideToggle();

},

error: function(){

alert("An error occured");

}

});

});

答案 2 :(得分:0)

使用get:

// Inside click handler

$.get('url_that_returns_data')

.done(function(response){

var $response = $(response);

$('#ajax-wrap').html($response.find('#content')).slideToggle();

});

答案 3 :(得分:0)

试试这个:

$(function(){

$("a.home-right").click(function () {

$('#ajax-wrap').slideUp();

var url = $(this).attr("href")

$.ajax({

type: "get",

url: url,

success: function(msg){

$('#ajax-wrap').html(msg)

$('#ajax-wrap').slideDown();

},

error: function(){

alert("An error occured");

}

});

})

})

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的Java示例,演示如何使用Ajax动态加载内容: 1. 创建一个名为"index.jsp"的JSP页面,其中包含一个按钮和一个<div>标签: ``` <!DOCTYPE html> <html> <head> <title>Ajax Example</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> $(document).ready(function(){ $("#loadBtn").click(function(){ $.ajax({ url: "loadContent.jsp", success: function(result){ $("#content").html(result); } }); }); }); </script> </head> <body> <h1>Ajax Example</h1> <button id="loadBtn">Load Content</button> <div id="content"></div> </body> </html> ``` 2. 创建一个名为"loadContent.jsp"的JSP页面,其中包含一些要加载内容: ``` <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <div> <h2>Loaded Content</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod nibh in suscipit dapibus. Morbi vitae fermentum lorem. Sed vel commodo massa. Nulla facilisi. Nulla tincidunt tortor sit amet nisi laoreet, vitae dapibus elit dictum. Sed sed enim euismod, commodo magna eu, bibendum metus. Mauris euismod, sapien a lacinia commodo, nisl eros egestas sem, nec consectetur eros urna sit amet turpis. Praesent euismod, lectus id hendrerit dictum, tellus neque tincidunt tellus, et commodo ligula ex in urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed vel velit ac arcu faucibus mollis non a velit. Nam non augue vel nunc ultricies dignissim. Duis euismod nisi nec eros ullamcorper, vel dignissim lorem tincidunt. Nulla facilisi.</p> </div> ``` 3. 运行"index.jsp"页面,单击"Load Content"按钮,将会动态加载"loadContent.jsp"页面中的内容,并显示在<div>标签中。 以上就是一个简单的Java示例,演示如何使用Ajax动态加载内容。这个示例使用了jQuery库来简化Ajax的开发过程。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值