2013-10-25 2 views
4

post 메서드를 사용하여 다른 Mason 구성 요소 (B.m)를 호출하는 Mason 구성 요소 (A.m)에 HTML 양식이 있습니다. 이 Mason 컴포넌트 (B.m)가 Mason 컴포넌트 (A.m)의 HTML 폼에 값을 리턴하기를 원한다. 그런 다음이 반환 값을 Javascript 함수에 전달하려고합니다.HTML Form Post 메서드의 반환 값을 얻는다

어떻게하면됩니까? 나는 웹 개발에 익숙하지 않다.

+0

Ajax 요청에 최대 읽기. – amon

답변

3

AJAX 요청을해야합니다. 엄격히 필요한 것은 아니지만 jQuery을 사용하는 것이 좋습니다. 그러면 작업이 훨씬 수월해집니다. jQuery AJAX submit form

여기 메이슨 (Mason)의 작은 예제가 있습니다. 물론 매우 단순화되어 있습니다. 오류 검사와 일부 이스케이프도 추가해야하지만, 좋은 시작이라고 생각합니다. 귀하의 A.mc 구성 요소는 다음과 같이 수 :

<html> 
<head> 
    <title>This is A</title> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script> 
    $(document).ready(function() { 

    $("#myform").submit(function() { // intercepts the submit event 
     $.ajax({ // make an AJAX request 
     type: "POST", 
     url: "B", // it's the URL of your component B 
     data: $("#myform").serialize(), // serializes the form's elements 
     success: function(data) 
     { 
      // show the data you got from B in result div 
      $("#result").html(data); 
     } 
     }); 
     e.preventDefault(); // avoid to execute the actual submit of the form 
    }); 

    }); 
    </script> 
</head> 
<body> 
    <form id="myform"> 
    <input type="text" name="mytext" /> 
    <input type="submit" /> 
    </form> 

    <div id="result"></div> 
</body> 
</html> 

는 jQuery 라이브러리를로드 단지 HTML 페이지의와 그 양식을 포함하고, 그 B 구성 요소에 AJAX 요청을 할 수있는 양식을 지시하는 몇 가지 코드가 포함되어있는 경우 사용자 제출 버튼을 클릭 한 다음 결과 구성 요소에 B 구성 요소가 반환 한 내용을 표시합니다.

그리고 이것이 당신의 B.mc 구성 요소가 될 수있다 :

<%class> 
    has 'mytext'; 
</%class> 
I got this text <strong><% $.mytext %></strong> from your form, 
and its length is <strong><% length($.mytext) %></strong>. 

결과는 다음과 같이 될 것입니다 :

enter image description here