새 페이지를로드하지 않고 양식 값을 스크립트에 제출

Question

양식 값을 스크립트로 보내는 것과 관련하여 문제가 있습니다. 양식을 설정하고 사용자가 단추를 누르면 양식의 값을 페이지의 다른 부분에 표시합니다. 로드하지 않고 할 수있는 방법이 난 쉽게 PHP 나 다른 웹 스크립트 언어로이 작업을 수행 할 수 있지만, 내가 아는 모든

http://www.example.com/myScript.pbp?value1=VALUE

의 형태로 스크립트로 전송하여이 작업을 수행하는 방법이다 새 페이지? 스크립트가 완료되고 페이지에 값이 표시 될 때까지 페이지에 로딩 오버레이를 표시하는 것만 큼?

Javascript 나 Ajax 등을 사용하여이 작업을 수행 할 수 있습니다.

누군가 나를 도울 수 있거나, 내가 어디에서 시작해야하는지 말하면, 정말 고마워!

Answer 1

실제로. onsubmit 이벤트 리스너를 양식에 첨부하면 항상 false이 반환되므로 일반적인 GET 또는 POST 요청을 통해 양식을 실제로 보내지 않도록 할 수 있습니다.

이벤트 수신기에서 XMLHttpRequest을 사용하여 양식 값을 보내고 콜백 함수가 페이지의 관련 부분을 업데이트하도록 할 수 있습니다.

하지만 자바 스크립트를 사용할 수없는 경우 (예 : 사용 중지, 차단됨 등)에는 양식을 처리하기위한 대체 옵션 (양식의 일반적인 GET 또는 POST 요청과 함께)을 작성해야합니다.

Answer 2

양식의 값을 서버와의 상호 작용없이 페이지에 다시 표시하려면 jQuery와 같은 것이 가장 좋습니다.

var form_values = $('#form_name').formHash(); 

가 form_values ​​다음

그래서

<form id="test"> 
    <input id="test1" name="test1" type="text" value="Test Text"/> 
</form> 

form_values ​​[즉, 시스템의 양식 값의 해시 배열이됩니다

jQuery를 사용하여 다음을 수행 할 수있는 좋은 형태의 플러그인을 가지고 'test1']은 값을 테스트 텍스트로 유지합니다.

값을 얻으면 다른 jquery 함수를 사용하여 페이지에 표시 할 수 있습니다. 예 :

<div id="displayDiv"></div> 

다음 자바 스크립트 이것은 당신이 그것을 얼마나

Answer 3

예 AJAX 정확히 것 디스플레이 사업부에서 값을 둘 것입니다

for (key in form_values) { 
    $('div#displayDiv').append('<div>Key: ' + key + ' Value: ' + form_values[key] + '</div>'); 
} 

수 있습니다. Tizag에서 자습서를 살펴보십시오. http://www.tizag.com/ajaxTutorial/index.php

이렇게하면 곧 시작할 수 있습니다.

Answer 4

여기에 a simple javascript ajax object입니다. 라이브러리를로드하지 않고 사용할 수 있습니다.