Yui, 양식 제출 및 데이터 테이블

Question

저는 Java 프로그래머이지만 JavaScript 프로그래머는 아닙니다. 나는 방금 Yui를 발견했고 그것을 사용하기 시작하려고 노력하고 있습니다. 내가 시도하고 싶은 것은 페이지 상단에 쿼리 양식을 가지고 있고, 사용자 프레스 제출 및 결과는 쿼리 양식 아래의 YUI 데이터 테이블로 나타납니다.

물론, 물론, HTML 양식에서 사용자 프레스 제출, 요청은 서버로 전송되고 Struts를 사용하여 처리 한 다음 요청을 JSP로 전달하면 HTML이 브라우저로 다시 전송됩니다. 그것이 내가 매일하는 일입니다. Ajax를 사용하면 대신 XML을 반환해야한다는 점에서 다릅니다. 문제가 아니다. 쉽게 할 수 있습니다.

내가 yui 측면을 다루는 질문. 제출 버튼을 누르면 어떻게됩니까? 정상적인 양식 제출이 아닙니다. onsubmit () JavaScript 함수를 구현하여 일부 Yui DataSource가 데이터를 가져 오기 위해 트리거합니까? 요청 매개 변수는 어떻게 전달됩니까? 바라건대 수동으로 요청을 구성 할 필요가 없습니다. 나는 yahoo.util.xhrdatasource를 사용한다고 생각합니다. 이것이 데이터 가능에 대한 데이터 소스입니다.

HTML 테이블 요소를 사용하여 YUI 데이터 가능을 작업 할 수있었습니다. 이제 실제 데이터로 전환하면됩니다. 흥미롭게도, Yui 문서는 내가 뭔가를 놓치지 않는 한 여기서 약간 약해 보입니다. 어쩌면 이것은 유위 문서가 다루지 않는 기본적인 ajax일까요?

Answer 1

우선, AJAX로 작업 할 때 서버에서 XML을 반환 할 필요가 없으므로 일반 텍스트, XML, JSON 문자열, 문자 그대로 원하는 모든 형태의 텍스트 데이터를 반환 할 수 있습니다. JSON 데이터로 데이터를 채우는 한 가지 예는 다음과 같습니다.

http://developer.yahoo.com/yui/examples/datatable/dt_xhrjson.html

Ajax 및 Yui를 사용하여 게시물 요청을 보내는 방법의 예가 여기에 제공됩니다.

http://developer.yahoo.com/yui/examples/connection/post.html

그것은 당신을 시작할 것입니다. 이제 두 가지를 서로 연결하십시오.

서버에 연결하려면 yahoo.util.connect.asyncrequest 메소드를 사용할 수 있습니다.

static object asyncRequest ( method , uri , callback , postData );

여기에서 예를 들어보십시오. 이것은 "get"을 사용하여 "get"또는 "post"를 사용할 수 있습니다. 매개 변수를 전달하십시오.

http://developer.yahoo.com/yui/examples/json/json_connect.html

"onsuccess"에서 함수가 반환되면 JSON에 대한 응답 텍스트를 구문 분석하려면 다음을 수행하십시오.

try {
    jsonData = YAHOO.lang.JSON.parse(o.responseText);
}
 catch (x) {
    alert("JSON Parse failed!");
    return;
}

"JSONDATA"객체에는 이제 데이터가 포함되어 있으므로 이제 다음이 예제를 수행 할 수 있습니다.

http://developer.yahoo.com/yui/examples/datatable/dt_basic.html

데이터 소스를 보유하는 로컬 객체로 데이터 가능을 초기화하는 방법을 보여줍니다. 기본적으로 그것은 이와 같은 것입니다

var myColumnDefs = [
        {key:"Column1Data", label:"Column1 Header" sortable:true, resizeable:true},
        {key:"Column2Data", label:"Column2 Header" sortable:true, resizeable:true}
        ];

var myDataSource = new YAHOO.util.DataSource(jsonData);
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
        myDataSource.responseSchema = {
            fields: ["Column1Data","Column2Data"]
        };

        var myDataTable = new YAHOO.widget.DataTable("basic",
                myColumnDefs, myDataSource, {caption:"DataTable Caption"});

이것이 작동하려면 "기본"의 ID가있는 HTML 코드에 "div"컨테이너가 있어야합니다.

도움이 되었기를 바랍니다