JQuery 가 배경 을 통 해 데 이 터 를 가 져 와 서 프론트 에 옮 겨 다 니 는 방법

프로젝트 를 할 때 백 엔 드 인 터 페 이 스 를 호출 하여 데 이 터 를 프론트 페이지 에 표시 하 는 경우 가 많 습 니 다.전에 겪 었 던 문 제 는 프론트 페이지 는 L+li 태그 로 썼 습 니 다.인터페이스 디 버 깅 을 할 때 돌아 오 는 데이터 가 여러 그룹 이 있 는 것 을 발 견 했 습 니 다.프론트 에 표 시 될 때 한 개의 데이터 만 있 습 니 다.의심 할 여지 가 없습니다.분명 옮 겨 다 닐 때 문제 가 생 겼 습 니 다.다음은 간단하게 분석 하 겠 습 니 다.
프론트 코드:
사례 1:

<div class="Record">
<div class="RecordLeft text-center fl">
<p><span>    </span></p>
</div>
<div class="RecordRight fl">
<ul class="fl">
<li>
<span>  </span>
<span>  </span>
<span>  </span>
</li>
 </ul>
<ul class="fl" id="PRO_UL">
</ul>
</div>
</div>

호출 인터페이스:(회사 마다 사용 하 는 방법 이 다 릅 니 다.제 쪽 은 잠시 봉 인 된 ajax 로 호출 합 니 다)

<script type="text/javascript">

var APPLICATIONID = "";
$(function(){
 var data = new Object();
 data.APPLICATIONID = CVCFrameWork.getUrlParam("id"); 

 //APPLICATIONID      CVCFrameWork.getUrlParam     id  

AjaxUtil.Ajax("../Server/Server.aspx/getHandleOpinions", JSON.stringify(data), null, AjaxSuccess, null, null);
});

//     ... ...
function AjaxSuccess(data)
 {
   var result = JSON.parse(data);
   if (result.state == "SUCCESS") 
   {
   var message=result.message;
   var info=JSON.parse(message);
   if(info.length>0)
   {
   for(var i=0;i<info.length;i++) {
   var myli = "<li><span>"+info[i].PRODATE+"</span><span >"+info[i].PRONAME+"</span><span >"+info[i].PROOPINION+"</span></li>";
   $('#PRO_UL').append(myli);

//                ，           
   //$("#PRODATE").html(info[i].PRODATE);
   //$("#PRONAME").html(info[i].PRONAME);
   //$("#PROOPINION").html(info[i].PROOPINION);
   }
   
     
   }
   }
 }

</script>

효과:(append 방법 을 통 해 배경 에 있 는 몇 개의 데 이 터 를 ul 에 추가 합 니 다)

사례 2:(배경 을 통 해 들 어 오 는 매개 변 수 는 li 태그 의 a 에 하위 수량/총 수량 을 추가 합 니 다.예 를 들 어 태그 1 2/12,...)

<div class="Mobile_left_con clearfix">
<ul class="clearfix">
<li id="T_00001"><a href="./UnitLicenseRuleSettingDetail.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span>  1</span><span class=" T_00002"></span></a></li>
<li id="T_00002"><a href="./UnitLicenseRuleSettingDetail.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span>  2</span><span class=" T_00002"></span></a></li>
<li id="T_00003"><a href="./UnitLicenseRuleSettingDetail.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span>  3</span><span class="T_00003"></span></a></li>
 </ul>
</div>

호출 인터페이스:

<script type="text/javascript">
var ABID = "";
var action = 0;
var ACCOUNT = "";
var ACENABLE = "";
$(function(){
Init(); 
});

function UnitRuleInit() {
var data = new Object();
data.ABID = "T_00001;T_00002;T_00003";//  
AjaxUtil.Ajax("../../Server/Server.aspx/LicenseInfo", JSON.stringify(data), null, AjaxSuccess, null, null);
 
};

function AjaxSuccess(data) {
   var result = JSON.parse(data);
   if (result.state == "SUCCESS") 
   {
   var message=result.message;
   var info=JSON.parse(message);
if(info.length>0)
   {
for(var i=0;i<info.length;i++) {
$("."+info[i].ABID).html(info[i].ACENABLE + "/" + info[i].ACCOUNT);
} 
   }
   }
   
  }

</script>

효과:(1/10,3/11,1/12 는 각각 배경 에서 얻 은 데이터)

요약:두 가지 데 이 터 를 얻 는 방법 중 하 나 는 append 의 방법 으로 li 를 ul 에 직접 연결 하 는 것 이다.하 나 는 프론트 데스크 가 죽 고 백 스테이지 데 이 터 는 프론트 데스크 의 id 에 따라 일일이 대응 하여 얻 을 수 있다.
이상 의 JQuery 가 백 엔 드 를 통 해 데 이 터 를 얻 고 프론트 에 옮 겨 다 니 는 방법 은 바로 편집장 님 께 서 여러분 께 공유 해 주신 모든 내용 입 니 다.참고 해 주시 고 많은 응원 부 탁 드 리 겠 습 니 다.