ajaxどのように振り返ってhtmlの一部分を書きますか?
3185 ワード
ajaxは直接に普通は1つのデータに帰ることができて、しかし1つのhtmlの一部分について、それとも舞台裏でゆっくりつづり合わせるならば、それはあまりに面倒で、どのように彼を帰らせますか?実はとても簡単です.次に私達のspring mvcを例にして説明します.
一般的に私達は一つのcontrolからページに異動します.
@Request Mapping(「templateManage 2」)
public String toManage 2(Emp emp,Model model){
emp.setId(1)
emp.setName(「hahaha」)
model.addAttribute(「emp」、emp);
model.addAttribute(“a”、“123”);
return"/empfile/empp"
)
これはサーバー側のジャンプです.これで直接ページに値を伝えて表示します.この前はaラベルとか直接ジャンプしたり、JSのwindowsのオープン方法かもしれません.
でも、私達はないと思っています.もしフロントエンドがajaxでお願いすればいいですか?(ajax要求の戻りタイプは)切記)
このようにajaxのfunctionは大きい段のhtmlコードを返します.これはこのemp.jspページのコードです.いいです.だから、あなたはemp.jspのセグメントを定義することができます.また、ページでおなじみのCタグを使って、controlの値をページに持ち帰ることができます.
コードを見る:
一般的に私達は一つのcontrolからページに異動します.
@Request Mapping(「templateManage 2」)
public String toManage 2(Emp emp,Model model){
emp.setId(1)
emp.setName(「hahaha」)
model.addAttribute(「emp」、emp);
model.addAttribute(“a”、“123”);
return"/empfile/empp"
)
これはサーバー側のジャンプです.これで直接ページに値を伝えて表示します.この前はaラベルとか直接ジャンプしたり、JSのwindowsのオープン方法かもしれません.
でも、私達はないと思っています.もしフロントエンドがajaxでお願いすればいいですか?(ajax要求の戻りタイプは)切記)
このようにajaxのfunctionは大きい段の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