remote form

원격 형태

AJAX를 통해 양식을 제출할 수 있게 해주는 기능입니다.

양식 메소드가 다른 모든 메소드에 대해 GET 및 FormData 인 경우 함수는 URL 매개변수로 인코딩된 페이로드와 함께 window.fetch 사용하여 양식을 기반으로 요청을 작성합니다.

요청 개체는 콜백 함수에서 사용할 수 있으므로 요청이 전송되기 전에 헤더와 본문을 수정할 수 있습니다.

설치

 $ npm install --save @github/remote-form

용법

 import { remoteForm } from '@github/remote-form'

// Make all forms that have the `data-remote` attribute a remote form.
remoteForm ( 'form[data-remote]' , async function ( form , wants , request ) {
  // Before we start the request
  form . classList . remove ( 'has-error' )
  form . classList . add ( 'is-loading' )

  let response
  try {
    response = await wants . html ( )
  } catch ( error ) {
    // If the request errored, we'll set the error state and return.
    form . classList . remove ( 'is-loading' )
    form . classList . add ( 'has-error' )
    return
  }

  // If the request succeeded we can do something with the results.
  form . classList . remove ( 'is-loading' )
  form . querySelector ( '.results' ) . innerHTML = response . html
} ) 

 < form action =" /signup " method =" post " data-remote >
  < label for =" username " > Username </ label >
  < input id =" username " type =" text " >

  < label for =" password " > Username </ label >
  < input id =" password " type =" password " >

  < button type =" submit " > Log in </ button >
  < div class =" results " > </ div >
</ form > 

브라우저 지원

기본 맞춤 요소를 지원하지 않는 브라우저에는 폴리필이 필요합니다.

• 크롬
• 파이어폭스
• 원정 여행
• 마이크로소프트 엣지

개발

 npm install
npm test

특허

MIT 라이센스에 따라 배포됩니다. 자세한 내용은 라이센스를 참조하세요.