개시하다

나는 지금 한 팀 프로젝트에서 프론트 데스크(Vue.js)를 맡고 있다.하지만 백엔드 노드는js로 구성되어 있습니다. 항상 그곳에서도 공부하고 있습니다.
현재 "Node.js 하이퍼스타트"를 사용하여 학습하고 있습니다.

친근하고 부드럽게 썼기 때문에 초보자에게 추천합니다.
장 3에'슈퍼 심플한 게시판 만들기'가 있었는데 개인적으로 설치 기능을 추가하면서 놀다가 문제점을 발견했다.
바로'표의 이중 발송 문제'입니다.
특히 페이지를 넘길 때 발생하는 것에 관한 것들.
대책으로 PRG 모델 활용, 토큰발행 등 다양한 대안이 있다
PHP의 대책은 조사든 조사든 다 있다.
확실히 예전에 저도 PHP를 사용해 봤기 때문에 그쪽의 상황을 알았지만 이번에 Node가 사용했습니다. 그리고 발송한 화면이 원래의 홈페이지 화면과 같아서 어떻게 해야 좋을지 몰랐습니다.(내가 지식이 부족한 것이 큰 원인이다.)

문제의 증상

이런 느낌의 간이 빌보드를 만들었다.

<창 부분 코드>

action "/"기술을 통해 발송된 요청 페이지를 같은 페이지로 복원하고 POST 방법을 사용합니다.
그리고 "안녕하세요!"발송해 보세요.

그래서 안전하게 맨 위에 잘 드러났다.
(지금은 내 이름으로 로그인해서 자동 아이디 이름은 후지이징)
검증 도구에서 '네트워크' 를 보고 '제목' 부분을 보면 '포엠 데이터' 의 부분 id와 msg가 잘 표시됩니다.
하지만 그게 문제야.
발송이 완료되면 이곳의'포엠데이터'가 남아서 페이지를 다시 읽을 때 여러 번 발송된다.
페이지의 업데이트 버튼을 클릭해 보세요.
그리하여

봐, 결과는 이렇게 이중으로 보냈어...

해결책

Ajax의 비동기 통신이 가장 쉽고 좋잖아, 멘토로부터 조언을 받고 솔직하게 그랬어.응, 그게 제일 간단해.
하지만, 나는 알아차렸다.jQuery가 필요합니다.
평소 JS에서 놀다 보니 어떻게 하면 좋을까 고민하다가 조사해보니 여기서 기사를 쓴 것이었다.탈출ajax()

매우 예의 바르게 설명하여 곧 채용해 보았다.
XMLHttpRequest가 등장합니다.
클라이언트와 서버 간에 데이터를 교환하는 API라고 합니다.
네, 자세한 내용은 구글에서 ww를 보십시오.
이것보다 나는 즉시 실현해 보았다.

우선 아까 표 부분에 ①自動でフォーム送信が起こらない을 추가했다.onsubmit = "return false"만 넣으면 됩니다.
그리고 발송 단추에 onclick="関数名"②를 추가하여 함수에서 발송 처리를 실행한다.여기submitForm()입니다.
이어서 script 라벨에 처리를 쓰십시오.
이 정의는 방금 보낸 단추를 눌렀을 때 불이 납니다. submitForm()
위의 그림에는 각 캐릭터의 설명이 첨가되어 있다.
통신이 성공했을 때의 처리가 특별히 필요하지 않기 때문에 먼저 비워 두었다가 완성되었을 때 페이지를 읽는다.비동기 통신이기 때문에 페이지를 다시 불러오지 않으면 추가 처리가 화면에 나타나지 않습니다.
마지막으로 myXml.open()라고 적으세요. 이것은 처음으로 폼 발송 처리를 정의한 것입니다.여기에는 POST 방법으로 같은 화면으로 돌아가고 싶어 URL/이 적혀 있다.
마지막if 부분은 폼 내용이 비어 있지 않을 때만 발송 처리됩니다.

재검증

재설정이 끝났으니까 다시 해봐.

이번에 "초밥 좋아요!"발송해 보세요.
와지끈
그리하여

오--!잘 보냈어요.
인터넷 헤더스를 봐도 포마다타를 찾을 수 없다.좋아!
그리고 다시 불러보세요.
와지끈

오--!더블 발송 없어요!
XMLHttp Request가 무사히 일하고 있습니다.감동

최후

이중송신의 대안 중 하나인 원래 자바스크립트로 쓰면 이 방법은 간단하다고 생각한다.만약 누군가가 같은 문제에 부딪히면, 이 보도가 도움이 되기를 바란다.

인용하다

XMLHttpRequest.readyState: ReadyState의 번호 역할 이해
XMLHttpRequest에 대한 노트: 방법과 속성을 상세하게 보여줍니다!
Node.슈퍼 엔트리 :Node.지금 쓰고 있는 참고서.