如何在调用它的portlet中嵌入web服务响应?

时间:2013-08-26 18:39:48

标签: ajax jquery liferay portlet

抱怨开始另一个线程,但我解决了我的第一个线程的问题,但现在我遇到了另一个问题。

背景:

我有一个portlet,它接受3个参数(Temperature,FromUnit,ToUnit)并将它们传递给位于此处的外部WebService: http://www.webservicex.net/ConvertTemperature.asmx/ConvertTemp

我不希望portlet实际重定向到webService的URL,唯一的方法就是使用我现在已经完成的jquery的AJAX。 但是我也希望将webService的响应嵌入到我曾经调用它的同一个portlet中,这就是我遇到问题的地方。

这是我到目前为止,这是我的portlet页面:

  <html>
    <head>
        <meta charset="utf-8" />
        <title>Demo</title>
    </head>
    <body>


        <script src="http://localhost:8080/my-greeting-portlet/jquery.js"></script>
        <script type="text/javascript" src="http://localhost:8080/my-greeting-portlet/js/script.js"></script>



    <%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>



    <%@ page import="javax.portlet.PortletPreferences" %>

    <portlet:defineObjects />
    <%

    PortletPreferences prefs = renderRequest.getPreferences();
    String Temperature = (String)prefs.getValue("Temperature","Temperature");

    PortletPreferences prefs2 = renderRequest.getPreferences();
    String FromUnit = (String)prefs2.getValue("FromUnit", "FromUnit");

    PortletPreferences prefs3 = renderRequest.getPreferences();
    String ToUnit = (String)prefs3.getValue("ToUnit","ToUnit");



    %>



    <portlet:renderURL var="editGreetingURL">

        <portlet:param name="jspPage" value="/edit.jsp" />

    </portlet:renderURL>


    <div id="contact_form">  
    <form name="callWebService" id="callWebService" action="">
     <fieldset> 
        <label for="Temperature" id="Temperature_label">Temperature </label>  
        <input type="text" name="Temperature" id="Temperature" size="30" value="" class="text-input" />  
        <label class="error" for="Temperature" id="Temperature_error">This field is required.</label>
        <br />  

        <label for="FromUnit" id="FromUnit_label">From unit  </label>  
        <input type="text" name="FromUnit" id="FromUnit" size="30" value="" class="text-input" />  
        <label class="error" for="FromUnit" id="FromUnit_error">This field is required.</label>
        <br />  

        <label for="ToUnit" id="ToUnit_label">To Unit    </label>  
        <input type="text" name="ToUnit" id="ToUnit" size="30" value="" class="text-input" />  
        <label class="error" for="ToUnit" id="ToUnit_error">This field is required.</label>  

        <br />  
        <input type="submit" name="submit" class="button" id="submit_btn" value="submit" />  
      </fieldset>  
    </form>  
    </div>  


    </body>
    </html>

这是jquery代码:

$(function() {  
  $('.error').hide();  
  $(".button").click(function() {  
    // validate and process form here  
    var dataString = $("#callWebService").serialize();  
    // alert (dataString);return false;  
    $.ajax({  
      type: "POST",  
      url: "http://www.webservicex.net/ConvertTemperature.asmx/ConvertTemp",  
      data: $("#callWebService").serialize(), 
      success: function() {  
        $('#contact_form').html("<div id='message'></div>");  
        $('#message').html("<h2>Contact Form Submitted!</h2>")  
        .append("<p>We will be in touch soon.</p>")  
        .hide()  
        .fadeIn(1500, function() {  
          $('#message').append("<img id='checkmark' src='images/check.png' />");  
        });  
      }  
    });  
    return false;   



    $('.error').hide();  
      var Temperature = $("#Temperature").val();  
        if (Temperature == "") {  
      $("#Temperature_error").show();  
      $("#Temperature").focus();  
      return false;  
    }  
        var FromUnit = $("input#FromUnit").val();  
        if (FromUnit == "") {  
      $("label#FromUnit_error").show();  
      $("input#FromUnit").focus();  
      return false;  
    }  
        var ToUnit = $("input#ToUnit").val();  
        if (ToUnit == "") {  
      $("label#ToUnit_error").show();  
      $("input#ToUnit").focus();  
      return false;  
    }  

  });  
}); 

一切似乎都在起作用,或者至少我没有得到错误,但似乎这部分代码完全被忽略了:

success: function() {  
           $('#contact_form').html("<div id='message'></div>");  
          $('#message').html("<h2>Contact Form Submitted!</h2>")  
        .append("<p>We will be in touch soon.</p>")  
          .hide()  
          .fadeIn(1500, function() {  
           $('#message').append("<img id='checkmark' src='images/check.png' />");  
      });  

当我按下“提交”按钮时没有任何反应。没有重定向到webservice URL(好),但上面定义的自定义消息没有显示(坏)。屏幕保持原样。

当我取消注释jquery代码中的“alert”并且参数肯定被正确选取时,我会假设它们被传递到webService URL但没有其他任何事情发生。

这是因为webservice URL会返回一个覆盖我的消息的响应吗?

如何将webService响应嵌入到portlet中?

再次,非常感谢您对此的看法,非常感谢!

1 个答案:

答案 0 :(得分:1)

您遇到了Cross Domain Scripting问题。

阅读thisthis以解决问题