JavaScript 비동기 제출 폼 데이터 구현

5149 단어 js비동기 제출양식
본 논문 의 사례 는 자바 스 크 립 트 가 비동기 제출 폼 데 이 터 를 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
효 과 는 다음 과 같 습 니 다:


우선 HTML 코드 부분 을 살 펴 보 겠 습 니 다.

<div class="container">
       <form class="form-horizontal" onsubmit="return false;">
           <div class="form-group">
               <label class="control-label col-md-3">  ：</label>
               <div class="col-md-4">
                   <input type="type" name="txtname" value=" "  class="form-control" id="txtName"/>
               </div>
           </div>
           <div class="form-group">
               <label class="control-label col-md-3">  ：</label>
               <div class="col-md-4">
                   <select class="form-control" name="cboSex" id="cboSex">
                       <option> </option>
                       <option> </option>
                   </select>
               </div>
           </div>
           <div class=" form-group">
               <label class="control-label col-md-3">  ：</label>
               <div class="col-md-4">
                   <textarea class="form-control" name="txtAddress" id="txtAddress"></textarea>
               </div>
           </div>
           <div class="form-group">
               <button class="btn btn-primary col-md-offset-4" onclick="getVal()">      </button>
               <button class="btn btn-primary" onclick="postgetData()">    </button>
               <button class="btn btn-success" onclick="getData()">    </button>
           </div>
       </form>
</div>
JavaScript 부분 은 다음 과 같 습 니 다.

function postgetData() {
            var xhr;
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject("microsoft.XMLHTTP");
            }
            xhr.open("post", "/JQuery/getDataRequest", true);
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            var yy = "name=" + document.getElementById("txtName")
                .value + "&sex=" + document.getElementById("cboSex")
                .value + "&address=" + document.getElementById("txtAddress").value;
            xhr.send(yy);
            xhr.onreadystatechange = function () {
                if (xhr.status == 200 && xhr.readyState == 4) {
                    var txt = xhr.responseText;
                    console.log(txt);
                }
            }
        }
xhr.send(data);//data 폼 에 제출 해 야 할 데이터(문자열)
setRequestHeader 문법:
setRequestHeader(header,value):요청 에 HTTP 헤드 를 추가 합 니 다.
헤더:정 해진 헤더 의 이름
value:정 해진 헤더 의 값
1-5 AJAX-서버 응답
XML HttpRequest 대상 의 responseText 또는 responseXML 속성 을 사용 하여 서버 로부터 응답 가 져 오기
responseText:문자열 형식의 응답 데 이 터 를 가 져 옵 니 다.
responseXML:XML 형식의 응답 데 이 터 를 얻 습 니 다.
onreadystatechange 이벤트
ready State 가 바 뀔 때마다 onready statechange 이벤트 가 발생 합 니 다.
ready State 속성 에 XML HttpRequest 의 상태 정보 가 저 장 됩 니 다.
다음은 XML HttpRequest 대상 의 세 가지 중요 한 속성 입 니 다.
onreadystatechange:저장 함수(또는 함수 명)는 ready State 속성 이 바 뀔 때마다 이 함 수 를 호출 합 니 다.
ready State:XML HttpRequest 가 저 장 된 상태 입 니 다.0 에서 4 로 변화 하 다.
0:초기 화 요청 하지 않 음
1:서버 연결 이 완료 되 었 습 니 다
2:요청 접수 됨
3:요청 처리 중
4:요청 이 완료 되 었 고 응답 이 완료 되 었 습 니 다.
status:200:"OK"404:페이지 를 찾 을 수 없습니다
onready statechange 이벤트 에서 저 희 는 서버 응답 이 처 리 될 준비 가 되 어 있 을 때 수행 하 는 작업 을 규정 합 니 다.
ready State 가 4 와 상태 가 200 일 때 응답 이 완료 되 었 음 을 표시 합 니 다.
컨트롤 러 방법 은 다음 과 같 습 니 다.
Request.Form(제출 방식 은 post)

public ActionResult getDataRequest()
        {
            string name = Request.Form["name"];
            string sex = Request.Form["sex"];
            string address = Request.Form["address"];
            string str = name + "&" + sex + "&" + address + "&" + "Request    post  ";
            return Content(str);
        }
이렇게 하면 양식 중의 데 이 터 를 제출 할 수 있다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
JavaScript 비동기 폼 데이터 가 져 오기
위 챗 애플 릿 은 간단 한 주사위 놀 이 를 실현 한다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage