2

我正在使用 liferay 框架来开发应用程序。我有一个下拉框，其值是从数据库中提取的。我想要做的是，每当用户从下拉菜单中选择任何人时，应从数据库中提取有关该人的信息以供查看。这应该怎么做？我应该使用 ajax 还是其他任何东西？这应该怎么做？我不知道如何开始：

编辑：这就是我从 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); 是不正确的，我不知道该怎么说。

4

1 回答 1

5

您应该始终使用 javascript 库来执行 ajax，为什么？因为该库会处理样板代码并且也将是跨浏览器兼容的。

因此，使用 Liferay 6.x，您可以使用，因为它是默认库，或者您可以使用最流行且易于使用的只是您需要在您的 portlet 中明确包含 jQuery，而使用 Alloy UI 您可以直接使用它。

还有其他图书馆，但我更喜欢这些，因为我对这两个很满意:-)

我将通过使用 Alloy UI（速成课程）来举一个例子：

  1. 让我们先了解简单的步骤和流程：
    1. 渲染 JSP
    2. 在 JSP 中resourceURL创建了一个<portlet:resourceURL var="ajaxCallResourceURL" />
    3. 通过任何元素（如等）生成事件来调用onChangejavascriptonClick函数
    4. 使用 Alloyio.request模块serveResource通过reourceURL
    5. 该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>

    Portlet 类：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 的应用程序了 :-)。

于 2013-05-09T07:21:25.017 回答