Ajax数据交互扩展(二)

使用Ajax直接加载页面内容

使用Ajax返回HTML内容

前文介绍的Ajax实现中,复杂结构的响应数据有服务器通过JSON格式发送,客户端接收后再经过JavaScript提起数据并构建HTML文档结构进行展示。
除此之外,服务器端还可以直接产生HTML格式的响应结果,客户端则可以将响应结果直接套用在现有页面中。下面了解下。

示例:

$(document).ready(function(){
	function initNews(){//使用Ajax技术获取新闻列表数据
		$.ajax({
			"url":"../util/news",
			"type":"GET",
			"data":"opr=list",
			"dataType":"html",
			"success":process
		});
	}
	function process(data){//展示新闻列表
		$("#opt>ul").html(data);
	}
	......//其他代码
});

在回调函数中没有对data做任何的处理,而是将其直接设置成列表的内容。
调整代码示例:

List<News> list =newService.findAllNews();
News news=null;
StringBuffer sb=new StringBuffer("");
for(int i=0;i<list.size();){
	news=list.get(i);
	sb.append("<li>"+....+"</li>");
}
out.print(sb);

Servlet中按照页面展示需要,直接生成列表

  • 内容,客户端可以直接使用。或者为了避免在Servlet中编写大量构建HTML内容的代码,还可以将查询结果发送至专门的展示页面生成HTML内容。
  • .load()方法

    对于通过Ajax请求直接加载HTML内容到当前页面的使用场景,jQuery也提供了一个.load()方法作为简易实现。该方法通过发送Ajax请求从服务器加载数据,并把响应的数据直接添加到指定的元素中。
    语法:$(selector).load(url[,data][,complete]);

    表.load()方法常用参数。
    常用参数如下表:

    参数类型说明
    urlString必选,规定将请求发送到哪个URL
    dataPlainOBject 或 String可选,规定连同请求发送到服务器的数据
    completeFunction(String responseText,String textStatus,jqXHR jqxhr)可选,对每个匹配的元素设置完内容后都会触发该函数,参数 responseText可选:可选,服务器返回的结果数 参数textStatus :可选,描述请求状态的字符串 参数:jqxhr:可选,jqXHR 是XMLHttpRequest 的超集

    该方法默认使用GET方法发送请求。除非提供的data参数时一个对象,则使用POST方法发送。该方法是最简单的从服务获取数的Ajax()方法,它几乎与$.get(url,data,success)方法等价。不同的是它不是全局函数,而是针对与选择器匹配的元素执行,并且它拥有匿名的回调函数,当请求成功后,.load()方法自动将返回的数据设置为匹配元素的HTML内容。

    示例:

    $(documnet).ready(function(){
    	function initNews(){//使用Ajax技术获取新闻列表
    		$("#opt>ul").load("../util/news","opr=list");
    	}
    	initNews();//执行新闻列表初始化工作
    	...//省略其他部分代码
    
    });
    

    以上代码实现了异步发送GET请求到服务器端,并且当服务器端成功返回列表数据时,自动将HTML格式的结果隐式地添加到调用load()方法的JQuery对象中。上面代码部分等价下面:

    $.get("../util/news","op",function(data)){
    	$("#op>ul").html(data);
    });
    

    知识扩展 .load() 方法还可以仅加载远程文档的某个部分,通过url参数的特殊语法可以实现。url参数中可以通过空格连接决定加载内容的jQuery选择器,如下代码:

    $("#result").load("article.html #target");
    

    jQuery会取回article.html的内容,然后解析返回文档,查找id为target的元素。该元素连同其内容会被插入id的result的元素,所取回文档的其他部分则被丢弃。

    小结:

    以上介绍的 $.get(), $.post(), $.getJSON(), .load()等常用Ajax方法都是基于 $.ajax()方法封装的,相比于 $.ajax()方法更加简洁,方便。通常情况下,对一般的Ajax功能需求使用以上Ajax方法即可满足,如果需要更多的灵活性,可以使用 $.ajax()方法指定更多参数。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值