ajax怎么回调html片段

最新推荐文章于 2022-11-13 02:09:43 发布

原创最新推荐文章于 2022-11-13 02:09:43 发布 · 206 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #java #测试 #ViewUI

jsp 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何利用SpringMVC框架通过AJAX请求返回HTML代码片段，实现前端局部更新。文章展示了如何配置Controller来响应请求并返回HTML内容，以及前端如何通过JavaScript处理这些返回的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ajax 直接一般可以返回一个数据，但是对于一个html片段，如果还是在后台慢慢拼接的话，那就太麻烦了，怎让他返回呢，其实很简单。下面我们一spring mvc为例，讲解一下：

一般我们从一个control调到页面：

@RequestMapping("templateManage2")

public String toManage2(Emp emp,Model model){

emp.setId(1);

emp.setName("haha");

model.addAttribute("emp", emp);

model.addAttribute("a", "123");

return "/empfile/emp";

}

这是服务器端跳转，这样我们就直接把值传到页面并且显示了。前段可能是一个a标签之类的直接跳转，或者JS的windows的open方法。

但是我们想过没有，如果前端用ajax请求呢？（ajax请求返回的类型是html切记）

这样ajax的function返回的是一个一大段html代码，这个html代码就是这个emp.jsp页面的代码，很好就这样。所以你可以定义一个emp.jsp的片段，并且你还可以在页面上运用你熟悉的C标签，可以把control的值带到页面上去。

看代码：

<%@ include file="/WEB-INF/include/taglib.jspf"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<c:forEach items="${userList}" var="user" varStatus="c">
	<dl onclick="writeLectureRecordsInnerInput(${user.id});">
		<dd>
			<jy:di key="${user.userId }" className="com.mainbo.jy.uc.service.UserService" var="u"/>
			<ui:photo src="${u.photo}"></ui:photo>
		</dd>
		<dt>
			<h2>${user.username}</h2>
		</dt>
	</dl>
</c:forEach>

你可以直接写你所需要返回的代码片段。

function updateState(id,state,obj){
	$.ajax( {    
	    url:_WEB_CONTEXT_+'jy/lecturerecords/changeShare',// 跳转到 action    
	    data:{    
	        id : id,
	        state:state
	    },    
	    type:'post',    
	    cache:false,    
	    dataType:'html',    
	    success:function(data) {
	    	var deleteFlag=$(data).find("#isdelete").val();//查找删除标记
	    	if(deleteFlag=="0"){//分享操作
	    		var quxiaofenxiang=$(data).find("#isshare").val();//取消分享操作
	    		if(quxiaofenxiang!=""){
	    			alert(quxiaofenxiang);
	    		}
	    		$(obj).parents("tr").html($(data).html());
	    	}else if(deleteFlag=="1"){//删除操作
	    		$(obj).parents("tr").remove();
	    	}
	    },    
	     error : function() {    
	          alert("修改听课状态异常！");    
	     }    
	});
}  这个function里面的data就是你要返回的html代码，你还可以用jQuery去取出里面的元素，哈哈 是不是很好用！！取出data之后，你可以直接用jQuery的html方法写入你所需要的地方。

var quxiaofenxiang=$(data).find("#isshare").val();用jQuery从返回的data里面找元素

$(obj).parents("tr").html($(data).html());jQuery写入到指定的地方