Извлечь данные из базы данных с помощью ajax в Liferay

Question

Я использую фреймворк liferay для разработки приложения. У меня есть раскрывающийся список, значения которого вытаскиваются из базы данных. Что я хочу делать, когда пользователь выбирает любое Лицо из выпадающего меню, информацию об этом Человеке следует извлекать из базы данных только для просмотра. Как это сделать? Должен ли я использовать ajax или любой другой материал? И как это должно быть сделано? Не знаю, с чего начать:

EDITED: Вот как я позвонил из jsp. Я не уверен, если это правильный подход Вызов из JSP:

<!-- Ajax script to pull Employee data from the database --> 
<script> 
function showEmployeeInfo(empName) 
{ 
    var xmlhttp;  
    if (str=="") 
    { 
     document.getElementById("empDetails").innerHTML=""; 
     return; 
    } 
    if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp=new XMLHttpRequest(); 
    } 
    else 
    {// code for IE6, IE5 
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 

    xmlhttp.onreadystatechange=function() 
    { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
      document.getElementById("empDetails").innerHTML=xmlhttp.responseText; 
     } 
    } 

    xmlhttp.open("GET","getEmp.java?q="+empName,true); 
    xmlhttp.send(); 
} 

Пожалуйста, обратите внимание, что xmlhttp.open ("GET", "getEmp.java?q="+empName,true) ; неверен, и я не знал, как его поместить.

Answer 1

Вы должны всегда использовать javascript-библиотеку для выполнения ajax, почему? Потому что библиотека будет заботиться о кодовом табличке, а также будет совместима с кросс-браузером.

Итак, с Liferay 6.x вы можете использовать alloy-ui, поскольку это библиотека по умолчанию, или же вы можете использовать jquery, который является самым популярным и простым в использовании. Просто вам нужно включить jQuery в свой портлет явно, где, как и в Alloy UI, вы можете прямо его использовать.

Есть другие библиотеки, но я предпочитаю это, как я комфортно с этим два :-)

Я приведу пример с использованием сплава UI (ускоренный курс):

1. Позволяет понять простые шаги, и поток первого:
   1. Рендер JSP
   2. Имейте resourceURL создал <portlet:resourceURL var="ajaxCallResourceURL" /> в JSP
   3. Вызов JavaScript функции, генерируя событие через любой элемент, как onChange, onClick и т.д.
   4. использования сплава io.request модуль для вызова метода serveResource через reourceURL
   5. The serveResource метод возвращает либо HTML текст или список JSON для заполнения раскрывающегося вниз
   6. в success способе io.request скрипта сделать некоторое Javascript магии для заполнения выпадающего

2. Теперь поток коды:

   JSP

   <%-- Create the Resource URL --%> 
   <portlet:resourceURL var="fetchWordsResourceURL" /> 
   
   <aui:form method="post" name="fm" > 
   
       <%-- Calling the javascript function fetchWords() which will make the ajax call --%> 
       <aui:select name="sourceSelect" id="sourceSelect" label="alphabets" onChange='<%= renderResponse.getNamespace() + "fetchWords();"%>'> 
        <aui:option label="--" value="--" /> 
        <aui:option label="A" value="a" /> 
        <aui:option label="B" value="b" /> 
        <aui:option label="C" value="c" /> 
       </aui:select> 
   
       <%-- The ajax response would populate this drop-down --%> 
       <aui:select name="targetSelect" id="targetSelect" label="Words with Alphabets"> 
       </aui:select> 
   
   </aui:form> 
   
   <aui:script> 
   <%-- This is the javascript function which will be executed onChange of the value of sourceSelect --%> 
   
       Liferay.provide(
        window, 
        '<portlet:namespace />fetchWords', 
        function() { 
   
         var A = AUI(); 
   
         var fetchWordsURL = '<%= fetchWordsResourceURL.toString() %>'; 
   
         // selecting the sourceSelect drop-down to get the current value 
         var sourceElement = A.one("#<portlet:namespace />sourceSelect"); 
   
         // selecting the targetSelect drop-down to populate values 
         var targetElement = A.one("#<portlet:namespace />targetSelect"); 
   
         alert("Fetch word for alphabet = " + sourceElement.val()); 
   
         A.io.request (
          // the resource URL to fetch words 
          fetchWordsURL, { 
          data: { 
           // request parameters to be sent to the Server 
           <portlet:namespace />alphabet: sourceElement.val() 
          }, 
          dataType: 'json', 
          on: { 
            failure: function() { 
             // if there was some error at the server 
             alert("Ajax failed!"); 
            }, 
            success: function(event, id, obj) { 
   
             // JSON Data recieved from Server 
   
             var wordsArray = this.get('responseData'); 
   
             // crude javascript magic to populate the drop-down 
   
             //clear the content of select 
             targetElement.html(""); 
   
             for (var j=0; j < wordsArray.length; j++) { 
              // alert("Alphabet ==> " + wordsArray[j]); 
   
              targetElement.append("<option value='" + wordsArray[j] + "'>" + wordsArray[j] + "</option>"); 
             } 
            } 
           } 
          } 
         ); 
        }, 
        ['aui-io'] 
       ); 
   </aui:script> 
   

   портлетов класс: метод serveResource

   @Override 
   public void serveResource(ResourceRequest resourceRequest, 
       ResourceResponse resourceResponse) 
       throws IOException, PortletException { 
   
       String alphabet = ParamUtil.getString(resourceRequest, "alphabet"); 
   
       _log.info("Alphabet recieved from ajax request ==> " + alphabet); 
   
       // build the JsonArray to be sent back 
       JSONArray jsonArray = JSONFactoryUtil.createJSONArray(); 
   
       if("a".equals(alphabet)) { 
   
        jsonArray.put("Apple"); 
        jsonArray.put("Ape"); 
        jsonArray.put("Ant"); 
       } 
       else if("b".equals(alphabet)) { 
   
        jsonArray.put("Banana"); 
        jsonArray.put("Ball"); 
        jsonArray.put("Bat"); 
   
       } 
       else if("c".equals(alphabet)) { 
   
        jsonArray.put("Code"); 
        jsonArray.put("Cat"); 
        jsonArray.put("Camera"); 
       } 
   
       _log.info("Json Array populated ==> " + jsonArray.toString()); 
   
       // set the content Type 
       resourceResponse.setContentType("text/javascript"); 
   
       // using printWrite to write to the response 
       PrintWriter writer = resourceResponse.getWriter(); 
   
       writer.write(jsonArray.toString()); 
   } 
   

Вот это, Вы готовы запрограммировать некоторые весьма ajaxed приложения :-).