REST WCF Service in ASP.NET – #2/4 – GET HTTP Request with JQuery and AJAX

안녕하십니까이 튜토리얼 시리즈 파트 2를 작성하는 방법에 오신 것을 환영합니다

REST WCF 서비스 첫 번째 수업에서는 기본 서비스를 구축했습니다 "DoWork"라고하는 메소드를 호출 할 수있었습니다 브라우저의 주소 표시 줄은 물론 당신은이 작업을 원하지 않습니다 미래를 위해서는 좀 더 유용성이 필요합니다 그리고 제일 먼저 우리는 default

aspx 파일을 열면이 작업을 수행 할 것입니다 우리가 필요로하지 않기 때문에 모든 것을 여기서 제거하십시오 어떻게하면 페이지가 나타납니다 괜찮아 이제 우리가 할 일은 버튼을 만들고 이 버튼을 메서드라고 부릅니다

좋아, 우리 프로젝트로 돌아 가자 우리는 간단한 HTML 버튼이며 DoWork라고 불릴 것입니다 메소드를 호출하고 "onclick"이벤트를 사용하여 JavaScript 함수를 사용하면 1 분 안에 쓸 것입니다 그러나 지금은 중요하다 클릭시 "false"를 반환합니다

왜 그런가요? 글쎄, 아마 너는 이미 그것을 안다 언제 ASPNET 웹 응용 프로그램을 작성하고 버튼을 클릭하면 완전한 포스트 백 그래서 페이지가 다시로드되고 당신이하고 싶은 모든것과 페이지의 변경 사항이 제거됩니다 그래서 "거짓"을 돌려줘야합니다

실제로 버튼을 클릭하면 발생합니다 좋아요 이제 페이지를 새로 고칩니다 과 버튼이 여기 있습니다 좋아요, 우리는 그것을 클릭 할 것이고, 아무 일도 일어나지 않을 것입니다 보여주기 위해 버튼을 클릭하면 제거됩니다 페이지가 다시로드 된 후에 페이지가 다시로드된다는 탭이 표시됩니다

우리는 이것을 원하지 않습니다 그래서 우리는 "거짓"을 반환합니다 그리고 다음은 JavaScript 함수가 필요합니다 실제 사례 시나리오에서는 물론 자바 스크립트 파일을 추가로 만들지 만,이 튜토리얼 시리즈에서는 좋아, 그냥 스크립트 블록을 사용합니다 형식은 "text / javascript"입니다

Let 's just a 우리는 또한 "DoWork"라고 부르며, 내가 항상하고 싶은 것은 모든 것이 올바르게 작동하는지 확인하십시오 그래서 나는 단지 무언가를 콘솔 이제 JavaScript 함수를 호출 할 것입니다 그래서 우리는 onclick "DoWork ()"를 호출하고 false를 반환하면 포스트가 없으므로 여기에 실제 기능 좋아, 확인해 보자

우리는 F12로 콘솔을 엽니 다 거기는 이제 버튼을 누릅니다 "안녕하세요", 위대한 작품입니다 이것은 좋은

이제 마술이 일어날 수 있습니다 우리는 jQuery를 사용하여 더 쉽습니다 그리고 jQuery를 사용하여 GET HTTP 요청을하고 jquery를 사용하여 Ajax를 사용하면이 요청을 할 수 있습니다 좋아 $ -sign for jQuery 다음에 "ajax ()"를 호출하면 여러 가지 옵션을 호출해야합니다

첫 번째 URL은 우리의 경우 서비스 인 URL입니다 서비스 폴더 그런 다음 "Service1svc"라는 서비스 파일 우리는 "DoWork"인 ouer URI를 호출 할 것이다 그런 다음 유형이 있습니다

이것은 HTTP 요청의 유형입니다 우리의 경우 그것은 "얻습니다"그리고 우리는 JSON 패킷을 사용하기 때문에 우리의 경우 "json"인 dataType과 마지막으로 적어도 모든 것이 작동하는 경우 호출되는 메소드 모든 것이 잘되었다 이 함수는 호출 할 수있는 매개 변수를 가져옵니다 그것은 당신이 그것을 "결과", "데이터"라고 부르기를 원하는 모든 것입니다 결과를 콘솔에 반환하기 만하면됩니다

좋아, 다시, 아약스 (), 우리는 URL을 가지고있다 우리 서비스와 URI의 끝에, 그리고 나서 "GET"유형, 또 다른 것 예를 들어 마지막 강의에서 언급 한 "POST"와 dataType은 "json"이고 우리는 성공 사례가 있고 성공 사례에서는 결과를 콘솔 좋아, 시험해 보자 페이지 새로 고침 버튼 클릭 그리고 너 거기 간다 당신은 첫 번째 콘솔 정보에서 "Hello"를 가지고 있고 두 번째 것은 실제로 우리가 웹 서비스에서 얻은 것입니다 실제로 그게 다예요 이 단원에서는 간단한 단추 인 단추를 사용합니다

이것은 디자인이 아닙니다 코스, 그래서 다른 코스에서 배울 수있는 CSS와 다른 것들 – 그래서 우리는 간단한 단추를 사용하여 그것을 클릭하면 웹 서비스에서 결과를 얻습니다 그래, 우리가 필요로하는 것은 jQuery를 사용한 AJAX 호출 뿐이다 이 수업 당신이 그것을 좋아하길 바래, 당신이 많이 배웠 으면하고 다음에 우리는 정보를 보낼 AJAX와 함께 POST HTTP 요청을 사용할 것입니다

서비스로 돌아가 결과를 얻으십시오 다음 강의에서 만나겠습니다