0
노드 js 서버 측 데모 유형 응용 프로그램이 있습니다. 나는 pluralsight를 통해 튜토리얼을 따라 그것을 만들고있다. 반응 형 프로그래밍을 위해 Typescript와 함께 rxjs을 사용합니다.RXjs 버튼이 서버 응답을 얻지 못합니다.
버튼을 클릭 이벤트와 연결하고 클라이언트 측에 표시 할 json 객체를 얻을 때까지는 아무 문제가 없었습니다. 나는 코드를 게시 할 것이다. 누군가가 왜 작동하지 않는지 알려주십시오.
main.ts
import {Observable} from "rxjs";
let output=document.getElementById('output');
let button=document.getElementById('button');
let click=Observable.fromEvent(button,"click");
function LoadMovies(url:string){
let xhr=new XMLHttpRequest();
xhr.addEventListener("LoadMovies",()=>{
console.log("yeah");//this is for debugging, and I noticed that this line is never execute so the below lines to put movies to the client site doesnt work either.
let movies=JSON.parse(xhr.responseText);
movies.forEach(m => {
let div=document.createElement("div");
div.innerText=m.title;
output.appendChild(div);
});
})
xhr.open("GET",url);
xhr.send();
}
click.subscribe(
e=> LoadMovies("movies.json"),
e => console.log(`error: ${e}`),
() => console.log("complete")
);
movies.json
[
{
"title": "Star Wars"
},
{
"title": "Star Trek"
},
{
"title": "Starship Troopers"
}
]
index.html을
<html>
<head>
<title>RxJs</title>
<style>
#circle {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<button id="button">Get Movies</button>
<div id="output"></div>
<script src="app.js"></script>// this is actually the entry point of the app which links to main.ts code and it works just fine.
</body>
</html>
기능이'xhr.addEventListener ("LoadMovies"...)'? 'XMLHttpRequest' 클래스는 확실히 ""LoadMovies "라는 이벤트를 내 보내지 않습니다. 어쩌면 대신'onload'를 사용하고 싶었을 것입니다. – martin
이 목적을 위해 "load"라는 튜토리얼 함수를 사용했고 같은 이름 인 "load"가 xhr.addEventListener에도 전달되었으므로 내 함수에 "LoadMovies"라는 이름을 사용 했으므로 eventListener로 전달했습니다. 잘. – touseef
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest를 참조하여 * "이벤트 처리기"* 제목을 찾으십시오. – martin