yui, 양식 제출 및 데이터 표

Question

저는 자바 프로그래머이지만 JavaScript 프로그래머는 아닙니다. 나는 방금 유이를 발견했으며 그것을 사용하기 시작하려고합니다. 제가 시도하고 싶은 것은 페이지 상단에 질의 폼을 가지고 있습니다. 사용자는 Submit을 누르고 결과는 질의 폼 아래의 YUI DataTable에 나타납니다.

일반적으로 HTML 폼에서 사용자가 Submit를 누르면 요청이 서버로 전송되고 Struts를 사용하여이를 처리 한 다음 요청을 JSP로 전달하고 HTML이 브라우저로 다시 전송됩니다. 그것이 내가 매일하는 일입니다. Ajax를 사용하면 XML을 대신 리턴해야한다는 점이 다릅니다. 문제가 아니다. 쉽게 할 수 있습니다.

나는 유이와 관련된 문제를 다루고 있습니다. 제출 단추를 누르면, 어떤 일이 발생합니까? 정상적인 양식 제출이 아니지, 그렇지? onSubmit() JavaScript 함수를 구현하면 YUI DataSource가 데이터를 가져 오도록 트리거합니다. 요청 매개 변수는 어떻게 전달됩니까? 다행히 요청을 수동으로 구성 할 필요가 없기를 바랍니다. 나는 YAHOO.util.XHRDataSource를 사용하고 DataTable의 DataSource를 사용하고 있다고 생각합니다.

저는 HTML 테이블 요소를 사용하여 YUI DataTable을 사용할 수있었습니다. 이제는 실제 데이터로 전환해야합니다. 흥미롭게도 YUI 설명서는 뭔가 부족한 것이 아니라면 여기서 약간 약해 보입니다. 어쩌면 이것은 YUI 문서가 다루지 않는 단지 기본적인 Ajax일까요?

Answer 1

우선, Ajax로 작업 할 때 서버에서 XML을 반환 할 필요가 없으면 일반 텍스트, XML, JSON 문자열, 원하는 모든 형태의 텍스트 데이터를 반환 할 수 있습니다. JSON 데이터를 데이터 테이블을 채우기의 한 예는 여기에 제공됩니다

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

Ajax와 유이가 여기에 제공되는 사용 후 요청을 전송하는 방법의 예. 당신이 시작 얻어야한다

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

, 지금은 그냥 같이 둘을 연결합니다.

하면 다음과 같은 매개 변수에 걸리는 Yahoo.util.Connect.asyncRequest 방법을 사용할 수있는 서버에 연결하려면 : 당신이 사용할 수 있도록

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

여기에 예를 참조하십시오,이 사람은 "GET"사용 중 단지하거나 "POST"를 "GET"당신은 당신의 매개 변수 함수가 반환되면

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

을 전달해야합니다 귀하의 "는 onSuccess"수행 JSON

,617에 응답 텍스트를 구문 분석하기 위해 다음과 같은

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

.기본적으로이, 당신은 "기본"의 ID로 HTML 코드에 "DIV"용기를 가지고이 DataTable의

의 첫 번째 매개 변수와 일치주의 할 필요가 작동하려면이

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"}); 

같은 것

희망이 있습니다.