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写入到指定的地方
相关推荐
这个函数接受一个配置对象作为参数,包含了请求的所有细节,如URL、类型(GET或POST)、数据、回调函数等。例如: ```javascript $.ajax({ url: 'https://example.com/data', type: 'GET', dataType: 'json', ...
在“Post Callback”部分,我们讨论的是当Ajax POST请求完成后执行的回调函数。这个回调函数通常用来处理服务器返回的数据,如解析JSON,更新UI,或者处理错误信息。理解如何正确编写和使用回调函数是确保Ajax请求...
// 成功回调函数,处理返回的数据 console.log(response); }, error: function(xhr, status, error) { // 错误回调函数,处理错误信息 console.error('Error:', status, error); } }); ``` 在上述代码中,...
服务器接收到请求后,仅处理与回调相关的部分,然后返回更新的HTML片段。最后,这些更新的片段由JavaScript动态地插入到页面的相应位置,用户看到的是局部更新的结果,而没有感受到页面的刷新。 在"ASP.NET 2.0...
在“AjaxSample”中,可能返回的是HTML片段,用于更新页面的部分内容。 5. **状态检查**:通过监听XMLHttpRequest对象的`onreadystatechange`事件,可以检查请求的状态。当`readyState`属性值变为4(表示请求已完成...
- **$.ajax()**:这是jQuery中最全面的Ajax方法,可以设置各种参数,如URL、类型(GET或POST)、数据、回调函数等。 - **$.get()**和**$.post()**:简化版的Ajax请求,分别用于GET和POST操作。 - **$.getJSON()**...
- `$.get()`: 用于发起GET请求,简化了`$.ajax()`的使用,只需提供URL和回调函数即可。 - `$.post()`: 与`$.get()`类似,但用于发起POST请求。 2. **AJAX请求的生命周期** - **初始化**: 创建`$.ajax()`调用,...
6. **回调函数**:jQuery的Ajax方法允许定义success、error和complete回调,以便在请求完成后执行特定的代码。 7. **全局事件和事件处理器**:jQuery提供了全局Ajax事件,如ajaxStart、ajaxStop、ajaxSuccess和ajax...
- **错误处理**:确保提供 error 回调函数来优雅地处理请求失败的情况。 - **跨域问题**:如果涉及到跨域请求,需要服务器端进行相应的配置支持 CORS(Cross-Origin Resource Sharing)。 - **安全性考虑**:在处理...
- `$.load()`: 加载HTML片段,并将其插入到DOM中。 8. **异步和同步请求** 默认情况下,AJAX请求是异步的,这意味着请求不会阻塞页面的其他操作。如果需要同步请求,可以在`.ajax()`中设置`async: false`,但这会...
4. `$.load()`:用于加载HTML片段到DOM元素中,常用于局部更新页面。 三、Ajax实例应用 1. 数据提交:通过Ajax实现表单数据的异步提交,避免页面刷新,提高用户交互性。 2. 分页加载:利用Ajax实现分页功能,只加载...
2. **$.load()**:用于加载HTML片段并插入到DOM中,例如: ```javascript $('#target').load('your-url #element-to-load'); ``` 3. **$.getScript()**:用于异步加载JavaScript文件: ```javascript $....
1. **$.ajax()**:这是jQuery提供的最全面的Ajax方法,可以自定义请求的每一个细节,如URL、类型(GET或POST)、数据、回调函数等。 2. **$.get()**和**$.post()**:简化版的Ajax请求,用于GET和POST操作。例如: ...
1. `$.ajax()`: 这是jQuery中最基础的Ajax函数,它可以接受一个包含各种选项的对象作为参数,如URL、类型(GET或POST)、数据、回调函数等。例如: ```javascript $.ajax({ url: 'http://example.com/api/data', ...
5. **更新页面内容**:在Ajax回调函数中,接收到服务器返回的数据后,更新页面中显示数据的容器。如果是JSON数据,可以使用jQuery的`.html()`或`.append()`方法动态插入新的HTML内容。 6. **分页导航**:根据返回的...
这样的类通常会提供简单的方法,如`sendRequest(url, data, callback)`,允许开发者传入URL、数据参数和回调函数,以执行Ajax请求。 接下来,我们关注文件`form(1).html`。这是用来展示和触发Ajax请求的HTML表单。...
5. **服务器端处理**:服务器端需要为AJAX请求提供接口,接收参数(如当前选中的标签ID),并返回相应的HTML片段或JSON数据。这些数据会被插入到页面的相应位置,更新选项卡内容。 6. **事件监听**:JavaScript需要...
`$.ajax()`是jQuery提供的更通用的Ajax请求方式,它允许开发者自定义更多的选项,如请求类型(GET或POST)、数据类型、回调函数等。在`getA()`函数中,我们看到了`$.ajax()`的使用。它设置了URL、请求类型、POST...
然而,这也意味着开发者需要处理好回调函数,确保在适当的时候更新页面。 四、局部刷新 AJAX可以实现网页的部分更新,而无需重新加载整个页面。这使得用户能快速地看到数据变化,比如在动态加载评论、实时搜索建议...