ajax - 在ofbiz中单击复选框时，ajax调用执行操作

Question

我想使用带有选项的复选框，例如 id1、id2。当我选择 id1 时，ajax 将通过 javascript 运行并调用适当的操作并返回响应。我不想重新加载页面。请发布一些 freemarker、controller.xml、java代码来做到这一点。

Answer 1

根据我对问题的理解，以下脚本可能会对您有所帮助：

在 ftl 文件本身/在单独的 js 文件中添加以下脚本：

  <script type="text/javascript">
   jQuery(document).ready(function(){


   jQuery("#id1").click(function(){

         if(jQuery(this).is(":checked")) {
           var reqUrl= "checkbox1_Url";
            sendAjaxRequest(reqUrl);             
               }

        });

    jQuery("#id2").click(function(){

         if(jQuery(this).is(":checked")) {
           var reqUrl= "checkbox2_Url";
            sendAjaxRequest(reqUrl);             
               }

        });
     });

  function sendAjaxRequest(reqUrl){
    jQuery.ajax({

     url    : reqUrl,
     type   : 'POST',
     data   : {'var1': 'val1', 'var2' : 'val2'}, //here you can pass the parameters to  
                                                   //the request if any.
     success : function(data){

              //You handle the response here like displaying in required div etc. 
               },
      error : function(errorData){

              alert("Some error occurred while processing the request");
              }


    });

   }
   </script>

在freemarker中，

  <input type="checkbox" id="id1" name="checkbox1" />
  <input type="checkbox" id="id2" name="checkbox2" />

在控制器.xml 中：

 <request uri="checkbox1_Url">
   <!-- fire if any events are here -->
   <response name="success" type="view" value="ViewName1" />
   <response name="error" type="view" value="errorViewName" />
 </request>

<request uri="checkbox2_Url">
   <!-- fire if any events are here -->
   <response name="success" type="view" value="ViewName2" />
   <response name="error" type="view" value="errorViewName" />
 </request>



  <view-map name="ViewName1" type="screen" page="component://.../widget/screensFileName#screenName"/>

  <view-map name="ViewName2" type="screen" page="component://.../widget/screensFileName#screenName"/>

您在上面路径中指定的小部件中定义了两个屏幕（view-map 标记的 page="...." 属性）。

Answer 2

   jQuery(function() { 
     jQuery('input[type = checkbox]').bind('click',function() {

          var categoryId =""; 
         if(jQuery(this).is(':checked')) {
            categoryId = jQuery(this).val();
           }
         var reqUrl= "categoryurl";  
        sendAjaxRequest(reqUrl, categoryId);             
       });
    });



 function sendAjaxRequest(reqUrl, categoryId){
  jQuery.ajax({

 url    : reqUrl, // Here the Url will have to return the all products related to                
                  //passed category
 type   : 'POST',
 data   : {'categoryId': categoryId}, //here you can pass the parameters to  
                                               //the request if any.
 success : function(data){

          //You handle the response here display all products in a div  etc. 
           },
  error : function(errorData){

          alert("Some error occurred while processing the request");
          }


     });

    }

 <input type="checkbox" id="id1" name="checkbox1"  value="yandamuri_cat"/><label for="id1">YandaMuri</label>
 <input type="checkbox" id="id2" name="checkbox2" value="chetanBhagat_cat"/><label for="id2">Chetan Bhagath</label>

在 Controller.xml 中：

   <request uri="categoryurl">
       <!-- fire if any events are here -->
       <response name="success" type="view" value="ViewName" />
       <response name="error" type="view" value="errorViewName" />
    </request>

 <view-map name="ViewName" type="screen" page="component://.../widget/screensFileName#screenName"/>

在 viw-map 标签的上述页面属性中指定的适当位置/路径中定义屏幕。在这里，屏幕可能没有装饰器，因此响应将没有装饰器，因此您可以在当前页面中显示它们，而无需重新加载。整个页面。

我想这可能会对你有所帮助。