JSon 데이터 비동기 인터페이스 에 연 결 된 Table 및 자동 새로 고침 원리 및 코드

7623 단어 JSON 데이터비동기 로 묶 기자동 새로 고침
Winform 을 만 드 는 것 에 습관 이 되 었 습 니 다.모두 datasource 라 는 쓰기 에 익숙 합 니 다.페이지 가 정시 에 새로 고침 되 려 면.net 으로 봉 인 된 updatepanel 과 timer 두 컨트롤 을 실현 하 는 것 이 쉽 습 니 다.이렇게 하면 제어 할 수 없 는 요 소 를 많이 넣 었 습 니 다.예 를 들 어 upddatepanel 을 사용 한 후에 설정 한 스타일 이 바 뀔 수 있 습 니 다.그리고 이런 것들 을 조정 해 야 합 니 다.그래서 스스로 통제 성 이 높 은 코드 를 사용 하 는 것 이 좋 습 니 다.오늘 은 이 updatepanel 에 timer 를 추가 하여 페이지 가 자동 으로 새로 고침 되 는 예 를 들 어 시작 하 겠 습 니 다.먼저 제 일반 처리 프로그램 을 살 펴 보 겠 습 니 다.이 안에서 저 는 데이터베이스 에서 datatable 을 찾 은 다음 에 json 으로 클 라 이언 트 
 
/// <summary> 
/// getData       
/// </summary> 
public class getData : IHttpHandler 
{ 
public void ProcessRequest(HttpContext context) 
{ 
context.Response.ContentType = "text/plain"; 
//context.Response.Write("Hello World"); 
//        
string strSql = "select ckrID,chrCarNumber,cncName,bcrName from T_CarNumberCategory,T_CheckResult,t_BusinessCategory where ckrcheckresult is null and cncID=ckrcarnumbercategoryid and ckrBusinessCategory=bcrID"; 
//        
string strConn = "Data Source=(DESCRIPTION=(ADDRESS=(PROTOCOL=TCP)(HOST=192.168.24.173)(PORT=1521))(CONNECT_DATA=(SERVICE_NAME=ORCL)));User Id=admin;Password=123123"; 
//           
OracleConnection conn = new OracleConnection(strConn); 
conn.Open(); 
//       ， 
OracleCommand cmd = new OracleCommand(strSql, conn); 
//       ，    Datatable ; 
OracleDataAdapter adp = new OracleDataAdapter(cmd); 
//    DataTable            
DataTable dt = new DataTable(); 
adp.Fill(dt); 
context.Response.Write(JsonConvert.SerializeObject(dt)); 
//              datatable，     Json         Json 
////           ，            ，         
////          ，        ，          
////        json   ，      ，          。。。   
//var json = "[{'CKRID':'1359374764563','CHRCARNUMBER':'123123','CNCNAME':'    ','BCRNAME':'        '},{'CKRID':'1359371470153','CHRCARNUMBER':'asdfsadf','CNCNAME':'    ','BCRNAME':'    '},{'CKRID':'1359343210678','CHRCARNUMBER':'111222','CNCNAME':'    ','BCRNAME':'    '},{'CKRID':'1359354395618','CHRCARNUMBER':'123asd','CNCNAME':'    ','BCRNAME':'    '},{'CKRID':'1359355217314','CHRCARNUMBER':'123asdqwe','CNCNAME':'    ','BCRNAME':'    '},{'CKRID':'1359355356271','CHRCARNUMBER':'1111111','CNCNAME':'    ','BCRNAME':'    '},{'CKRID':'1359355490374','CHRCARNUMBER':'123123123','CNCNAME':'    ','BCRNAME':'    '},{'CKRID':'1358074597852','CHRCARNUMBER':'323232','CNCNAME':'    ','BCRNAME':'        '}]"; 
//context.Response.Write(json.Replace('\'','\"')); 
} 
public bool IsReusable 
{ 
get 
{ 
return false; 
} 
} 
}
에 전 송 된 서버 엔 드 프로그램 에 대한 설명 이 상세 하고 모 르 는 댓 글 이 있 습 니 다.라 이브 러 리 는 Newtonsoft.JSon.dll 을 사용 합 니 다.여러분 이 클릭 하면 제 네트워크 에서 다운로드 할 수 있 습 니 다.비용 은 전혀 들 지 마 세 요.친 하 게 클 라 이언 트 코드 입 니 다.
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>  </title> 
<script src="jquery-1.7.1.js" type="text/javascript"></script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<table id="data"> 
<tr id="tem"> 
<td id="ID"> 
    
</td> 
<td id="CarNumber"> 
    
</td> 
<td id="BusinessName"> 
     
</td> 
<td id="btn"> 
<input id="Button2" type="button" value="button" /> 
</td> 
</tr> 
</table> 
<div id="loading"> 
      ... 
</div> 
<script type="text/jscript"> 
//              
setTimeout(function () { $("#loading").hide(); }, 1000); 
//           ，      
setInterval(SetData(), 1000); 
//         ，       , getJSON     
function SetData() { 
$.getJSON("getData.ashx", null, function (obj) { 
$("tr").eq(0).nextAll().remove(); //      tr   
//             table  
for (var i = 0; i < obj.length; i++) { 
//     ID     （               
if (i == 3) { 
row.find("#ID").css("color", "red"); 
} 
//     ，     
var row = $("#tem").clone(); 
//         click   
row.find("#btn input").click({ name: obj[i].CHRCARNUMBER, back: obj[i].CKRID }, operation); 
//  ： jquery1.4.2 ，        ，         ，  1.7.1          
//        ，       
//row.find("#btn input").bind("click",{ name: obj[i].CHRCARNUMBER, back: obj[i].CKRID }, operation); 
//        1.4.2.min...     ，              ，           
row.find("#ID").text(obj[i].CKRID); //    
row.find("#CarNumber").text(obj[i].CHRCARNUMBER); //      
row.find("#BusinessName").text(obj[i].BCRNAME); //         
//          
row.appendTo("#data"); 
} 
}); 
} 
//            
function operation(event) { 
alert(event.data.name); 
alert(event.data.back); 
} 
//         ，       , ajax     
function SetDataByAjax() { 
$.ajax({ 
type: "get", //       
dataType: "json", //       
url: "getData.ashx", //url 
complete: function () { $("#loading").hide() }, 
success: function (obj) { 
$("tr").eq(0).nextAll().remove(); //      tr   
//             table  
for (var i = 0; i < obj.length; i++) { 
//     ID     （               
if (i == 3) { 
row.find("#ID").css("color", "red"); 
} 
//     ，     
var row = $("#tem").clone(); 
//         click   
row.find("#btn input").click({ name: obj[i].CHRCARNUMBER, back: obj[i].CKRID }, operation); 
//  ： jquery1.4.2 ，        ，         ，  1.7.1          
//        ，       
//row.find("#btn input").bind("click",{ name: obj[i].CHRCARNUMBER, back: obj[i].CKRID }, operation); 
//        1.4.2     ，              ，           
row.find("#ID").text(obj[i].CKRID); //    
row.find("#CarNumber").text(obj[i].CHRCARNUMBER); //      
row.find("#BusinessName").text(obj[i].BCRNAME); //         
//          
row.appendTo("#data"); 
} 
} 
}); 
} 
</script> 
</form> 
</body> 
</html>
위 에 있 는 것 은 바로 자신 이 직접 페이지 를 새로 고 치 는 예 를 쓴 것 입 니 다.위의 예 에서 JQuery 라 는 안에 있 는 것 을 제외 하고 당신 은 통제 할 수 없습니다.만약 에 소 가 충분 하 다 면 당신 은 그의 프레임 워 크 를 사용 하고 싶 지 않 습 니 다.스스로 쓰 고 싶 습 니 다.그래도 돼.다만 초보 자 인 나 에 게 는 이 걸 로 많은 일 을 절약 할 수 있다.getJSon 방법 은 세 개의 인자 만 주면 대상 만 들 기,리 셋 함수,파라미터 설정 등 모든 작업 을 할 수 있 습 니 다.이것 은 배 울 만 한 가치 가 있 습 니 다.평소에 공부 할 때 자주 사용 하 는 것 에 대해 하나의 방법 으로 추출 하여 자신의 작은 코드 라 이브 러 리 에 넣 는 것 을 고려 해 야 합 니 다.위의 코드 가 어렵 지 는 않 지만 개인 적 으로 이것 은 제 가 ajax 에 대해 이해 한 이정표 적 인 예 라 고 생각 합 니 다.하나의 예 는 제 가 의 심 스 러 웠 던 안 개 를 많이 풀 었 습 니 다.
jQuery Ajax 사용 소감 상세 정리 및 주의사항
JavaScript 는 세 션 실현 원리 와 코드 를 어떻게 제어 합 니까?

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage