对Layer弹窗使用及返回数据接收的实例详解

Layer做为弹窗，主页面代码：

注意1. callback()方法 返回字符串，再data:JSON.parse(res)转为ajax提交时的json参数

注意2. textarea 上使用append方法没有效果，改写： var str = $("#area").val() + “\n”+d; $("#area").val(str);

//引入js 必须要有（1.8以上版本） jquery
 <script src="__PUBLIC__/js/jquery.js"></script>
 <script type="text/javascript" src="__PUBLIC__/js/layer/layer.js"></script>

//点击事件，弹出窗口
function openCitySelect(){
	 layer.open({
   type: 2, //以frame型式加载content页面
   title: "设置区域",
   shadeClose: true,
   shade: 0.4,
   area: ['90%', '90%'],
   content: "{:U('user/index/citylist')}", //指向页面
   btn: ['选择城市','追加城市','关闭'], //底部按钮
   yes: function(index){
    //当点击‘选择城市'按钮的时候，获取弹出层返回的值
    var res = window["layui-layer-iframe" + index].callback();
    //打印返回的值，看是否有我们想返回的值。
    $.ajax({
	    url:"{:U('user/index/getListOfCity')}",
	    type:"post",
	    data:JSON.parse(res),
     success:function(data){
	     //console.log(data);
	     var a = JSON.parse(data);
	    b = a.length;
	    if (0 >= b) {
	     Wind.use('artDialog',function(){
	      art.dialog({
	      id : "alert",
	      icon : "error",
	      content : "请至少选择一个地区",
	      ok : function() {}
	      });
	     });
	    }else {
	      var thisCitys = JSON.parse(data);
	 					var d="";
	 					var new_arr = [];
	      for (var f = 0; f < thisCitys.length; f++) {
	     	  if($.inArray(thisCitys[f],new_arr)==-1) {
	     	 		 new_arr.push(thisCitys[f]);
	     	  }
	      }
	      //去重
	      for(var i=0;i<new_arr.length; i++){
	     	 d = isNull(d) ? new_arr[i] : d + ("\n" + new_arr[i])
	      }
	       // }

	      $("#area").val(d);

	     lineTotal('area');
	    }
	    },
	    error:function(e){
	     alert("错误！！");
	    }
	   });
    //最后关闭弹出层
    layer.close(index);
   },
   btn2:function(index){
  	 //当点击‘追加城市'按钮的时候，获取弹出层返回的值
    var res = window["layui-layer-iframe" + index].callback();
    //打印返回的值，看是否有我们想返回的值。

    $.ajax({
 	    url:"{:U('user/index/getListOfCity')}",
 	    type:"post",
 	    data:JSON.parse(res),
     success:function(data){
 	     //console.log(data);
 	     var a = JSON.parse(data);
 	    b = a.length;
 	    if (0 >= b) {
 	     Wind.use('artDialog',function(){
 	      art.dialog({
 	      id : "alert",
 	      icon : "error",
 	      content : "请至少选择一个地区",
 	      ok : function() {}
 	      });
 	     });
 	    }else {
 	      var thisCitys = JSON.parse(data);
 	 					var d="";
 	 					var new_arr = [];
 	      for (var f = 0; f < thisCitys.length; f++) {
 	     	  if($.inArray(thisCitys[f],new_arr)==-1) {
 	     	 		 new_arr.push(thisCitys[f]);
 	     	  }
 	      }
 	      //去重
 	      for(var i=0;i<new_arr.length; i++){
 	     	 d = isNull(d) ? new_arr[i] : d + ("\n" + new_arr[i])
 	      }
 	       // }
 	      var str = $("#area").val() + "\n"+d;
 	      console.log(str);
 	      $("#area").val(str);

 	     lineTotal('area');
 	    }
 	    },
 	    error:function(e){
 	     alert("错误！！");
 	    }
 	   });
    //最后关闭弹出层
    layer.close(index);
   },
   cancel: function(){
    //右上角关闭回调
   }
  });
 }

弹窗页面的代码:

注意: window.callback 用来将数据返回到主页

<script type="text/javascript" src="__PUBLIC__/js/layui2/layui.js"></script>
 <script>  

  //加载模块
 	 layui.use('form', function(){
   var $ = layui.jquery, form = layui.form ;
  //返回数据的方法, 在layui中 用window.前缀可以被外面访问到.
   window.callback = function() {
				var arr = new Array();
				$("#province :checkbox[checked]").each(function(i){
					arr[i] = $(this).val();
				});
				var vals = arr.join(",");
				var has_pro = $("#pro").is(':checked')?1:0;
				var has_city = $("#city").is(':checked')?1:0;
				var has_county = $("#county").is(':checked')?1:0;
				var has_end = $("#short_name").is(':checked')?1:0;
				var has_and_pro = $("#pro_city").is(':checked')?1:0;
				var has_and_city = $("#city_county").is(':checked')?1:0;
				var result = '{ "provinces":" ' + vals + '","has_pro":"' + has_pro + '","has_city":"' + has_city + '","has_county":"' + has_county
					+ '","has_end":"' + has_end + '","has_and_pro":"' + has_and_pro + '","has_and_city":"' + has_and_city + '"}';
				return result;
  };
  }); 	 

 	</script>

以上这篇对Layer弹窗使用及返回数据接收的实例详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。