`
747017186
  • 浏览: 331591 次
社区版块
存档分类
最新评论

ajax怎么回调html片段

    博客分类:
  • jsp
 
阅读更多

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写入到指定的地方
分享到:
评论

相关推荐

    jQuery AJAX加载片段

    这个函数接受一个配置对象作为参数,包含了请求的所有细节,如URL、类型(GET或POST)、数据、回调函数等。例如: ```javascript $.ajax({ url: 'https://example.com/data', type: 'GET', dataType: 'json', ...

    unigui_ajax Post Callback -返回参数 HTMLFrame 事件_1

    在“Post Callback”部分,我们讨论的是当Ajax POST请求完成后执行的回调函数。这个回调函数通常用来处理服务器返回的数据,如解析JSON,更新UI,或者处理错误信息。理解如何正确编写和使用回调函数是确保Ajax请求...

    HTML使用极简的方式通过ajax请求实现前后端交互代码实现

    // 成功回调函数,处理返回的数据 console.log(response); }, error: function(xhr, status, error) { // 错误回调函数,处理错误信息 console.error('Error:', status, error); } }); ``` 在上述代码中,...

    ASP.NET 2.0客户端回调实例代码

    服务器接收到请求后,仅处理与回调相关的部分,然后返回更新的HTML片段。最后,这些更新的片段由JavaScript动态地插入到页面的相应位置,用户看到的是局部更新的结果,而没有感受到页面的刷新。 在"ASP.NET 2.0...

    简单Ajax实例AjaxSample

    在“AjaxSample”中,可能返回的是HTML片段,用于更新页面的部分内容。 5. **状态检查**:通过监听XMLHttpRequest对象的`onreadystatechange`事件,可以检查请求的状态。当`readyState`属性值变为4(表示请求已完成...

    jquery+ajax例子

    - **$.ajax()**:这是jQuery中最全面的Ajax方法,可以设置各种参数,如URL、类型(GET或POST)、数据、回调函数等。 - **$.get()**和**$.post()**:简化版的Ajax请求,分别用于GET和POST操作。 - **$.getJSON()**...

    传智播客 jQuery ajax 课件

    - `$.get()`: 用于发起GET请求,简化了`$.ajax()`的使用,只需提供URL和回调函数即可。 - `$.post()`: 与`$.get()`类似,但用于发起POST请求。 2. **AJAX请求的生命周期** - **初始化**: 创建`$.ajax()`调用,...

    ajax资源包,jquery

    6. **回调函数**:jQuery的Ajax方法允许定义success、error和complete回调,以便在请求完成后执行特定的代码。 7. **全局事件和事件处理器**:jQuery提供了全局Ajax事件,如ajaxStart、ajaxStop、ajaxSuccess和ajax...

    jquery ajax源代码

    - **错误处理**:确保提供 error 回调函数来优雅地处理请求失败的情况。 - **跨域问题**:如果涉及到跨域请求,需要服务器端进行相应的配置支持 CORS(Cross-Origin Resource Sharing)。 - **安全性考虑**:在处理...

    jq_ajax练习

    - `$.load()`: 加载HTML片段,并将其插入到DOM中。 8. **异步和同步请求** 默认情况下,AJAX请求是异步的,这意味着请求不会阻塞页面的其他操作。如果需要同步请求,可以在`.ajax()`中设置`async: false`,但这会...

    ajax (部分案例使用jquery)实例集锦

    4. `$.load()`:用于加载HTML片段到DOM元素中,常用于局部更新页面。 三、Ajax实例应用 1. 数据提交:通过Ajax实现表单数据的异步提交,避免页面刷新,提高用户交互性。 2. 分页加载:利用Ajax实现分页功能,只加载...

    jquery,ajax的几个小例子

    2. **$.load()**:用于加载HTML片段并插入到DOM中,例如: ```javascript $('#target').load('your-url #element-to-load'); ``` 3. **$.getScript()**:用于异步加载JavaScript文件: ```javascript $....

    达内-ajax jquery

    1. **$.ajax()**:这是jQuery提供的最全面的Ajax方法,可以自定义请求的每一个细节,如URL、类型(GET或POST)、数据、回调函数等。 2. **$.get()**和**$.post()**:简化版的Ajax请求,用于GET和POST操作。例如: ...

    ajax的jquery代码

    1. `$.ajax()`: 这是jQuery中最基础的Ajax函数,它可以接受一个包含各种选项的对象作为参数,如URL、类型(GET或POST)、数据、回调函数等。例如: ```javascript $.ajax({ url: 'http://example.com/api/data', ...

    基于 jQuery 实现的 Ajax 异步分页

    5. **更新页面内容**:在Ajax回调函数中,接收到服务器返回的数据后,更新页面中显示数据的容器。如果是JSON数据,可以使用jQuery的`.html()`或`.append()`方法动态插入新的HTML内容。 6. **分页导航**:根据返回的...

    php无刷新简便超实用的ajax类附带实例

    这样的类通常会提供简单的方法,如`sendRequest(url, data, callback)`,允许开发者传入URL、数据参数和回调函数,以执行Ajax请求。 接下来,我们关注文件`form(1).html`。这是用来展示和触发Ajax请求的HTML表单。...

    AJAX效果选项卡

    5. **服务器端处理**:服务器端需要为AJAX请求提供接口,接收参数(如当前选中的标签ID),并返回相应的HTML片段或JSON数据。这些数据会被插入到页面的相应位置,更新选项卡内容。 6. **事件监听**:JavaScript需要...

    jQuery之ajax应用

    `$.ajax()`是jQuery提供的更通用的Ajax请求方式,它允许开发者自定义更多的选项,如请求类型(GET或POST)、数据类型、回调函数等。在`getA()`函数中,我们看到了`$.ajax()`的使用。它设置了URL、请求类型、POST...

    AJax详细解释AJax详细解释

    然而,这也意味着开发者需要处理好回调函数,确保在适当的时候更新页面。 四、局部刷新 AJAX可以实现网页的部分更新,而无需重新加载整个页面。这使得用户能快速地看到数据变化,比如在动态加载评论、实时搜索建议...

Global site tag (gtag.js) - Google Analytics