json 또는 html 파일을 사용하여 jQuery ajax를 사용하여 테이블 자동 새로 고침/업데이트
그래서 @SOF,
학교 성적, 성적, 예상 성적 등에 대한 웹페이지를 만들려고 노력해왔습니다.등은 새로운 데이터가 사용을 통해 들어올 때 페이지의 데이터가 새로 고쳐지도록 자동 업데이트 기능을 가지고 있습니다.jquery그리고.ajax수업을 위한 "단독 뷰"를 가질 수 있습니다.
내 주요 문제는 내가 어떤 형태의 ajax refreshing/loading도 올바르게 작동할 수 없다는 것입니다. json 또는 단일 html 파일로 출력을 생성할 수 있습니다. 내 목적을 위해 json이 더 나을 것 같지만 확실하지 않습니다.
는 왼쪽. 이는 "검색통해 입니다. "검색"을 통해 "검색"을 수행합니다.<a id="CLASS1" optionname="CLASS 1"></a>이는 표 안에서 찾을 수 있지만, 필요하다면 표 밖에 이것을 채울 수 있습니다.
할 수 를 원하므로 이에서는 Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ ΔΔ Δ Δ Δ Δ Δ Δ Δ- Select Class -,Class 1,Class 2,Class 3,Class 4,Class 5, All Updating, All Non-Updating
모든 업데이트
- 이 옵션은 모든 클래스를 html 보기 가능한 하나의 페이지에 로드하고 매 30초마다 각 클래스를 업데이트합니다(즉, 각 클래스는 한 시간 안에 업데이트할 수 있지만 다른 클래스는 한 시간 안에 업데이트할 수 있으므로) 비교 및 다른 경우 업데이트해야 합니까?
모든 미업데이트
- 이 옵션은 모든 클래스를 HTML로 볼 수 있는 하나의 페이지에 로드하지만 사용자가 드롭다운을 사용하여 다른 클래스를 클릭한 후 다시 클릭하지 않는 한 업데이트되지 않습니다.
1반, 2반, 3반...등(개별 로딩/단독보기)
- 이 옵션은 단일 클래스의 데이터를 html 보기 가능한 페이지에 로드하고 30초마다 해당 특정 클래스를 업데이트합니다. 이전 게시물에서 이름을 가진 사용자가 내가 필요로 하는 것에 가까운 예제를 제공했지만 멤버는 다시는 나에게 돌아오지 않았습니다. http://jsfiddle.net/u7UkS/4/
모든 데이터에 대한 링크
HTML - http://pastebin.com/raw.php?i=0PNQGMmn
CSS - http://pastebin.com/raw.php?i=4H5GHv15
JSON - http://pastebin.com/raw.php?i=xk860dBN
싱글 클래스 페이지 - http://pastebin.com/raw.php?i=HvpaVhG6
JSFiddle - http://jsfiddle.net/kHtuQ | http://jsfiddle.net/kHtuQ/show
특정 멤버들의 일부 아약스 예시가 있는 이전 게시물:Anchor Cycler / 학교 수업 데이터를 주기적으로 가져오려면 드롭다운
다음은 각 "클래스" 노트 클래스 = 학교 클래스에 무엇이 있는지 대략적으로 보여주는 예입니다.
Super Slimed Down 테이블 예:
<table id="gradient-style">
<tbody>
<thead>
<tr>
<th scope="col"><a id="CLASS1" optionname="CLASS 1"></a>Class</th>
</tr>
</thead>
<tr><td>Class 1</td></tr>
</tbody>
<tfoot>
<tr>
<th class="alt" colspan="34" scope="col"><a id="KEY"></a><img class="headimager" src="http://placehold.it/250x50"/></th>
</tr>
<tr>
<td colspan="34"><em><b>Data</b> - Test</em></td>
</tr>
</tfoot>
</table>
누군가가 이것을 도와줄 수 있다면 매우 감사할 것이고 만약 당신이 코멘트를 해줄 수 있다면 제가 계속 배울 수 있도록 해주세요.
합니다.
S. S.
아약스를 사용하는 것은 매우 간단합니다.
여기 api 문서가 있습니다 => http://api.jquery.com/jQuery.ajax/
=> http://jsfiddle.net/sijav/kHtuQ/19/ 또는 http://fiddle.jshell.net/sijav/kHtuQ/19/show/ 를 위해 만든 바이올린입니다.
을 나타내는 . 은 url을 의미하며 url은 url을 의미합니다. url은 url을 의미합니다. url은 uspdateClass(url)을 의미합니다. 는 HTML을 의미합니다.=>
function updateClass(url){
$.ajax({
url: url,
dataType: "HTML",
error: function(msg){
alert(msg.statusText);
return msg;
},
success: function(html){
$("#container").html(html);
}
});
}
컨테이너 클래스 전체를 새로 고침 하는 refreshClass를 추가했습니다, =>
function refreshClass(){
updateClass("http://fiddle.jshell.net/sijav/mQB5E/5/show/"); //update the class
}
변경 셀렉터에서 아래 코드로 변경 =>
var classUpdateI; //stands for our interval updating class
$(".class-selector").on("change",function(){
if (classUpdateI!=null)clearInterval(classUpdateI); //If the selector changed clear the interval so the container won't be update on it's own
if(this.value == "")
return; // if the value is null don't do anything
else if(this.value == "allclassnup"){
refreshClass(); //if the value is allclassnup which is stands for All Non-Updating just refresh the whole class
}
else if(this.value == "allclassup"){
refreshClass(); //if the value is allclassup which is stands for All Updating refresh the whole class and set an interval for thirty second (look for 30*1000)
classUpdateI = setInterval(refreshClass,30*1000);
}
else //else then it's a simple class value, just simply update the current class
updateClass(this.value);
})
도움이 되길 바랍니다 ;)
EDIT: 큰 테이블을 얻을 수 있도록 편집(생성 안 함!)되었으며 30초 간격으로 올업데이트가 업데이트됩니다.
다른 EDIT: 믿거나 말거나 저는 당신의 질문을 모두 해냈습니다!
작업 FIDDLE: http://fiddle.jshell.net/sijav/kHtuQ/39/show/ 또는 http://jsfiddle.net/sijav/kHtuQ/39/
은 오직 마지막 html을 입니다. 것을 ! 1면을막직은해 html다e다기1e해1t을은otl면막직ss 새로운 것을 위해서 우리는 그것을 다시 만들어야 합니다! 그래서 전체를 넣으세요.$('tr').click()다른 기능으로 기능하고 필요할 때 호출합니다.
- 네?코드를 조금 할 수 ! 조금 복잡하지만 코드를 조금만 변경해도 작동할 수 있습니다! 보여드릴 알고리즘은 현재 클래스 선택기를 쿠키로 변경한 후 페이지를 새로 고치거나 다시 로드할 때마다 읽을 수 있습니다.
서 코드 을 할 .만서을할는을다기해드다해기t서을만드oniegte .
처음에 나는 라는 글로벌 변수를 만들었습니다.FirstTimeInit = true;우리가 페이지 로드의 첫 번째 시간에 있는지 확인하기 위해, 두 번째로 페이지 로드에 있는 것들을 강조하도록 만드는 for loop을 다음과 같은 함수에 넣었습니다.selectSelectedClass 하기 에, , 를 읽을 수 하고 강조 표시된 것들을 수 확인하기 했고, 또한 , ? 우리는 그것을 여러번 불러야 하기 때문에, 셋째, 우리가 쿠키를 읽을 수 있는지 확인하고 강조 표시된 것들과 현재의 클래스도 바꿀 수 있는지 확인하기 위해 if문을 추가했습니다. 코드는 다음과 같습니다.
if(readCookie("CurrentClass")) //if we can read coockie
$(".class-selector").val(readCookie("CurrentClass")).change(); //change it's value to current cookie and trigger the change function
else{ // else
selectSelectedClass(); //select those which was highlighted before
trClick(); //make things clickable
FirstTimeInit = false; //and turn of the first time init
}
값 시 > cookie 생성 하기 >createCookie("CurrentClass",$(".class-selector").val(),1);
이고를에다는을다s을xedn는sg고y내eo에
success: function(html){
$("#container").html(html + '<a id="KEY"></a>'); //the html container changer with adding extra id , I'll explain it later it's for your second question
if(FirstTimeInit){ //if it is First Time then
selectSelectedClass(); //highlight which was highlighted after put the correct html
FirstTimeInit = false; // turn of the first time init
}
else //else
for (var i=0;i<($("table").children().length);i++){
if(readCookie(i))
eraseCookie(i); //erase every cookie that has been before because the table is now changed and we're going on another table so old cookie won't matter
}
trClick(); //make things selectable!
}
버그가 없도록 하기 위해 선택한 클래스가 모두이거나 null일 때 refreshClass를 먼저 init로 변경했습니다. 그러면 모든 클래스가 있고 쿠키가 필요하기 때문입니다.
function refreshClass(){
if(readCookie("CurrentClass")=="allclassnup"||readCookie("CurrentClass")=="allclassup"||readCookie("CurrentClass")==null)
FirstTimeInit = true;
updateClass("http://fiddle.jshell.net/sijav/mQB5E/5/show/");
}
<a id="TOP"></a>야다다e 앞에 있어야 합니다.<a id="KEY"></a>html을 컨테이너에 올린 후 컨테이너 끝에 생성해야 합니다. 그래서.$("#container").html(html + '<a id="KEY"></a>');
3 Next and Previous 버튼은 non-ajax 이전 디자인을 위해 고안되었습니다. 이제 다른 해결책이 필요합니다! 이 간단한 코드들을 예로 들어 보십시오.
$("#PreviousClass").click(function(){//on prev click
$(".class-selector").val($(".class-selector option:selected").prev().val()).change() //change the value to the prev on and trigger the change
});
$("#NextClass").click(function () {//on next click
$(".class-selector").val($(".class-selector option:selected").next().val()).change() //change the value to the prev on and trigger the change
});
4 네 가능합니다 키를 위로, 아래로 이 코드로 바꾸시면 됩니다 =>
currentClass=0;
$("a.TOPJS").click(function () {
if(currentClass>0){
currentClass--
scrollToAnchor('CLASS'+currentClass);
}
});
$("a.KEYJS").click(function () {
if($("a[id='CLASS" + currentClass + "']")[0]!=undefined){
currentClass++
scrollToAnchor('CLASS'+currentClass);
}
else
scrollToAnchor('CLASSMAX');
});
!
또 다른 요청 편집: (이것이 마지막이기를 바랍니다!)
워킹 피들: http://jsfiddle.net/sijav/kHtuQ/42/ 또는 http://fiddle.jshell.net/sijav/kHtuQ/42/show/
요, 이 새로 그하는 것을 좋아하지 그것을 더 몇 했습니다. 에 어떤, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예습니다. -> 클래스 마지막 문자에서 있으므로 읽고 클래스를 와 -> 같이 마지막 문자에 클래스 번호를 합니다 입력해야 선택기의 - 와 합니다 번호를 입력해야 습니다 number 클래스 at the is class to class sure so from of selector like the have be character read being last the character last class > 클래스 문자에 Class number ***5***선택자를 읽혀질 입니다.번은 클래스 선택을 위해 읽혀질 것입니다!
편집: 다음에 클래스를 최적화하고 http://jsfiddle.net/sijav/kHtuQ/46/ 을 참조하십시오.
편집: 요청하신 의견대로
이것이 제가 말씀드리고자 하는 것입니다. 때로는 jsfiddle.net 에서 데모를 보여주고 때로는 fiddle.jshell.net 에서 보여주고 이러한 도메인은 서로 다른 도메인이며 다른 도메인에서 html을 얻을 수 없습니다.
를 넣거나 이렇게 으로 부를 수 =>1) Interval을나른을서게다도게만>=다도u게게t을서을l른ynlyrstnedt>n
classUpdateI = setInterval(function(){updateClass(this.value,parseInt(a.charAt(a.length-1),10));},30*1000);
2) 행방불명?당신의 두번째 질문을 찾을수가 없네요!
음은...를)>3) ...trclick(를(를)=(를)로 .
function trClick(tIndex){ //tIndex would be classnumber from now on
if (tIndex == -1){ //if it is all updating or all non updating
$("tr").click(function(){ //do the previous do
$(this).toggleClass('selected').siblings().removeClass('selected');
if(readCookie($(this).parent().index("tbody"))){
if(readCookie($(this).parent().index("tbody"))==$(this).index())
eraseCookie($(this).parent().index("tbody"));
else{
eraseCookie($(this).parent().index("tbody"));
createCookie($(this).parent().index("tbody"),$(this).index(),1);
}
}
else
createCookie($(this).parent().index("tbody"),$(this).index(),1);
});
}
else{ //else
$("tr").click(function(){ //on click
$(this).toggleClass('selected').siblings().removeClass('selected');//do the toggle like before
if(readCookie(tIndex)){ //if you can read the CLASS cookie, not the current index of table because our table has only one row
if(readCookie(tIndex)==$(this).index()) //as before if we selecting it again
eraseCookie(tIndex); //just erase the cookie
else{ //else
eraseCookie(tIndex); //select the new one
createCookie(tIndex,$(this).index(),1);
}
}
else
createCookie(tIndex,$(this).index(),1); //else if we can't read it, just make it!
});
}
}
때> Ajax success 할 classNumber >로 .trClick(classNumber);
마지막으로 작동하는 fiddle: http://fiddle.jshell.net/sijav/kHtuQ/53/show/ 또는 http://jsfiddle.net/sijav/kHtuQ/53/
행운을 빌어요
솔직히 저는 JSON 예시를 이해하지 못해서 당신이 올린 코드가 너무 힘들어요.랫 HTM을 JSON로면과다더이는이다더tesfoe랫l,t이tjle는s을eu이n로ngj과eog하려면$.ajaxJSON 인코딩, 구문 분석 및 삽입이 아닌 DOM으로 HTML을 입력합니다.그렇기는 하지만, JSON은 현실적인 사례가 아니었고 더 많은 형태를 취할 것이라고 생각합니다.
{ class_name: "Class 1", description: "Blah Blah Blah" }
이러한 가정을 염두에 두고, 잘 문서화되었지만 검증되지 않은 이 예제는 올바른 방향을 제시할 것입니다.기본적으로 저는 다음과 같은 일을 합니다.
- HTML 템플릿 정의
- JSON 값을 HTML 템플릿으로 변환하는 간단한 템플릿 함수를 만듭니다.
- 에서 할 를 에서 할 를
setInterval, 를 생성하는 데 됩니다.getJSON
여기 제 예시가 있는데, 궁금한 점 있으시면 말씀해주세요.
<script>
// I wrapped this in a self-invoking anonymous function to prevent adding new global variables
(function(){
var SECONDS_TO_POLL = 3
, $parent_node = $('#node-to-append-to')
, last_timestamp = null // this will be a timestamp passed to the server
, template = '<table id="gradient-style"> \
<tbody> \
<thead> \
<tr>
<th scope="col"><a id="{ident}" optionname="{class_name}"></a>Class</th> \
</tr> \
</thead> \
<tr><td>{class_name}</td></tr> \
</tbody> \
<tfoot> \
<tr> \
<th class="alt" colspan="34" scope="col"><a id="KEY"></a><img class="headimager" src="{image}" /></th> \
</tr> \
<tr> \
<td colspan="34"><em><b>Data</b> - Test</em></td> \
</tr> \
</tfoot> \
</table>';
/**
* simple templating function
* @param template String template using bracket vars (e.g. <h1>{message}</h1>)
* @param values Object literal (e.g. {message: "Hello"})
* @return Rendered HTML template
*/
var render_template = function(template, values) {
values = values || {};
return template.replace(/{([^{}]*)}/g, function(bracketed, clean){
var object_value = values[clean];
return ['string', 'number'].indexOf((typeof object_value)) > -1 ? object_value : bracketed;
});
};
// this is our polling function, will retrieve the JSON from the server, convert to HTML using template and render to the DOM
var poller = function(){
// load the JSON and pass a GET var telling the server what timestamp to query from (e.g. WHERE data.timestamp > last_timestamp)
$.getJSON('/path/to/json?last_retrieved='+last_timestamp, function(data){
// render the new data into our HTML template
var html = render_template(template, data);
// append the result to the parent DOM node
$parent_node.append(html);
})
// get a current timestamp so that we can limit the server results to those
last_timestamp = new Date().getTime();
}
// retrieve new results every N seconds
setInterval(poller, SECONDS_TO_POLL*1000);
})()
</script>
또한 이것에 대해 고개를 숙이기 위해, 당신이 서버로부터 HTML을 그냥 반환하는 것이라면, 당신은 (대부분) 간단하게 대체할 수 있습니다.$.getJSON와 함께$.get만 하면 됩니다.
(function(){
var SECONDS_TO_POLL = 3
, $parent_node = $('#node-to-append-to')
, last_timestamp = null // this will be a timestamp passed to the server
// this is our polling function, will retrieve the HTML from the server and render to the DOM
var poller = function(){
// load the HTML pass a GET var telling the server what timestamp to query from (e.g. WHERE data.timestamp > last_timestamp)
$.get('/path/to/server?last_retrieved='+last_timestamp, function(html){
// append the result to the parent DOM node
$parent_node.append(html);
})
// get a current timestamp so that we can limit the server results to those
last_timestamp = new Date().getTime();
}
// retrieve new results every N seconds
setInterval(poller, SECONDS_TO_POLL*1000);
})()
문제를 해결하는 가장 좋은 방법은 녹아웃과 같은 바인딩 라이브러리를 사용하는 것입니다.데이터와 보기를 분리하고 데이터를 업데이트하는 방법만 걱정하면 보기가 자동으로 업데이트됩니다.이것이 당신이 현재 고군분투하고 있는 것처럼 보입니다.
그래서 목록을 생성하고 지속적으로 폴링(항상 임의로 변경되는 동일한 데이터를 반환하는 가짜 서비스를 사용)하여 데이터를 업데이트하는 작은 샘플을 만들었습니다.
녹아웃을 사용하여 한 예는 다음과 같습니다.녹아웃 문서 페이지 http://knockoutjs.com/documentation/introduction.html 을 보세요.
HTML: 헤더와 내용으로 간단한 표를 정의합니다.
<table style="width: 100%" border="1">
<thead>
<tr>
<td>
<p><b>Classes</b>
</p>
</td>http://jsfiddle.net/yBat5/#fork
<td>
<p><b>Childs</b>
</p>
</td>
</tr>
</thead>
<tbody data-bind="foreach: Classes">
<tr>
<td>
<p data-bind=" text: Class"></p>
</td>
<td>
<p data-bind=" text: Child"></p>
</td>
</tr>
</tbody>
</table>
자바스크립트:
$(function () {
// define a ViewModel for your data
function ViewModel() {
this.Classes = ko.observableArray([{
"Class": "test",
"Child": "Max"
}, {
"Class": "test2",
"Child": "Walter"
}]);
}
var vm = new ViewModel(),
dummyData = [];
// create a lot of dummy data sets
for (var i = 0; i < 1000; i++) {
dummyData.push({
"Class": "test " + i,
"Child": "Child" + i
})
}
// constantly poll for new data
// JS fiddle implements a simple echo service, which we can use
// to simulate data changes we change a rendon number
function poll() {
$.ajax({
"url": "\/echo\/json\/",
"type": "POST",
"data": {
"json": JSON.stringify(dummyData),
"deley": 3
},
"success": function (data) {
vm.Classes(data);
// poll again (3 seconds so we see how fast the update is)
setTimeout(poll, 300);
// change a random entry to see that data changes
var randomnumber=Math.floor(Math.random()*1000);
dummyData[randomnumber].Child = "Child" +randomnumber +" changed"
}
});
}
poll();
// apply it to the page, knocout now does the binding for you
ko.applyBindings(vm);
});
Fiddle: http://jsfiddle.net/yBat5/3/
언급URL : https://stackoverflow.com/questions/20136649/autorefreshing-updating-table-using-jquery-ajax-by-either-using-json-or-html-fil
'programing' 카테고리의 다른 글
| 유형의 일치하는 빈이 없습니다...종속성이 있는 것으로 확인됨 (0) | 2023.09.10 |
|---|---|
| 제약 조건 위반 시 사용자 친화적 오류 메시지를 제공할 수 있는 방법이 있습니까? (0) | 2023.09.10 |
| MySql 경고 트래핑 (0) | 2023.09.10 |
| 부트스트랩 3 Navbar(로고 포함) (0) | 2023.09.10 |
| 필드를 증가시킬 때 MySQL 데이터베이스에 레이스 조건이 없는지 확인하는 방법은 무엇입니까? (0) | 2023.09.10 |