JavaScript 비동기 폼 데이터 가 져 오기

본 논문 의 사례 는 자바 스 크 립 트 가 비동기 적 으로 폼 데 이 터 를 얻 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
지난 글 에서 4.567915.라 고 말 했 습 니 다.그러면 오늘 우 리 는 자바 스 크 립 트 의 비동기 로 폼 의 데 이 터 를 얻 는 것 에 대해 이야기 하 겠 습 니 다.말 이 많 지 않 으 니,우리 이어서 아래 를 봅 시다.
효과 도 는 다음 과 같다.

클릭 하여 데 이 터 를 가 져 오 면 다음 그림 과 같은 데 이 터 를 얻 을 수 있 습 니 다.

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>
                       <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 getData() {
            var xhr;
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                xhr = ActiveXObject("microsoft.XMLHTTP");
            }
            xhr.open("post", "/JQuery/getInformation", true);
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.status == 200 && xhr.readyState == 4) {
                    var txt = xhr.responseText;//  xhr    
                    var obj = JSON.parse(txt);//       js  
                    document.getElementById("txtName").value = obj.name;
                    document.getElementById("cboSex").value = obj.sex;
                    document.getElementById("txtAddress").value = obj.address;
                }
            }
        }

서버 에 요청 보 내기
서버 에 요청 을 보 냅 니 다.XML HttpRequest 대상 의 open()과 send()방법 을 사용 합 니 다.
open(method,url,async)은 요청 의 유형,URL 및 비동기 처리 요청 여 부 를 규정 합 니 다.
1.동기 화 와 비동기 가 무엇 입 니까?
동기 화 란 한 프로 세 스 가 어떤 요청 을 수행 할 때 이 요청 이 정 보 를 되 돌려 주 는 데 시간 이 걸 리 면 이 프로 세 스 는 되 돌아 오 는 메 시 지 를 받 을 때 까지 기다 릴 것 입 니 다.
비동기 란 프로 세 스 가 계속 기다 릴 필요 가 없 이 다음 작업 을 계속 수행 하 는 것 을 말한다.다른 프로 세 스 의 상 태 를 막론하고.
메시지 가 돌아 올 때 시스템 은 프로 세 스 에 게 처리 하 라 고 알 리 며 실행 효율 을 높 일 수 있 습 니 다.
비동기 구현:
1.HTML 과 CSS 를 활용 하여 페이지 를 실현 하고 정 보 를 표현 한다.
2.XML HttpRequest 와 웹 서버 를 이용 하여 데이터 의 비동기 교환
3.JavaScript 를 활용 하여 DOM 을 조작 하여 동적 부분 새로 고침 실현
2.XML HttpRequest 대상 은 무엇 입 니까?
XML HttpRequest 대상 은 배경 에서 서버 와 데 이 터 를 교환 하 는 데 사 용 됩 니 다.(구체 적 인 소 개 는 w3c 참조)
XML HttpRequest 대상 만 들 기
모든 현대 브 라 우 저(IE7+,Firefox,Chrome,Safari 및 Opera)가 내장 되 어 있 습 니 다.
XML HttpRequest 대상.
XML HttpRequest 대상 을 만 드 는 문법:

var xhr=new XMLHttpRequest();

이전 버 전의 Internet Explorer(IE5 와 IE6)는 ActiveXObject 대상 을 사용 합 니 다.

var xhr=new ActiveXObject("Microsoft.XMLHTTP");

IE5 와 IE6 를 포함 한 모든 현대 브 라 우 저 에 대응 하기 위해 브 라 우 저가 XML HttpRequest 대상 을 지원 하 는 지 확인 하 십시오.지원 하면 XML HttpRequest 대상 을 만 듭 니 다.지원 하지 않 으 면 ActiveXObject 를 만 듭 니 다.

var xhr;
     if (window.XMLHttpRequest) {
                  // code for IE7+, Firefox, Chrome, Opera, Safari
                    xhr = new XMLHttpRequest();
                } else {
                    // code for IE6, IE5
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }

3.서버 에 요청 보 내기
서버 에 요청 을 보 냅 니 다.XML HttpRequest 대상 의 open()과 send()방법 을 사용 합 니 다.
open(method,url,async)은 요청 의 유형,URL 및 비동기 처리 요청 여 부 를 규정 합 니 다.
컨트롤 러 방법 은 다음 과 같 습 니 다.

public ActionResult getInformation()
        {
            string str = "{\"name\":\"  \",\"sex\":\" \",\"address\":\"      \"}";
            return Content(str);
        }

총결산
이상 은 바로 오늘 말씀 드 리 고 자 하 는 내용 입 니 다.본 고 는 비동기 로 폼 데 이 터 를 얻 는 사용 만 간단하게 소개 하 였 습 니 다.