zoukankan      html  css  js  c++  java
  • ajax 二级联动与springmvc 交互

    html  测试可以使用

    <div class="pageButton" style="height: 60px;margin: 10px;line-height: 30px;">
                              <form id="pageform" action="${basePath}/back/userChannel/list.action" method="post">
                                  <input type="hidden" id="currentPage" name="currentPage"/>
                                登录名:<input type="text" name="userChannel.loginName" value="${userChannel.loginName}"/>&nbsp;
    
                                通道类型:<select name="userChannel.type" id="type">
                                <option value="">全部</option>
                                <option value="1">京东钱包</option>
                                <option value="2">QQ</option>
                                <option value="3">微信</option>
                                <option value="4">支付宝</option>
                                <option value="5">H5</option>
                                <option value="6">银联二维码</option>
                                <option value="7">快捷支付</option>
                                <option value="8">代付</option>
                            </select>&nbsp;
                                通道:<select name="userChannel.channelId" id="channelId">
                                        <option value="">全部</option>
                                        <s:iterator value="tchannelList">
                                            <option value="${code}" <s:if test="userChannel.channelId == code">selected="selected"</s:if>>${name}</option>
                                        </s:iterator>
                                    </select>&nbsp;

    js:

    //异步请求经数据写入下拉选中
    $(function(){
        //二级联动异步请求将数据写入下拉选
        $("#type").change(function(){
    
            var obj = $("#type option:selected");
            var  payType  = obj.val();
            alert(payType);
            var channelId=$("#channelId");
    //=============
            $.ajax({
                type:'post',
                url:'queryTchannelList.action',
                data:'userIds='+payType,
                dataType:'text',
                success:function(msg){
                    $("#channelId").empty();
                    var jsons =JSON.parse(msg);//需要将返回json字符串转换成json对象以后遍历
                    for(var i = 0; i < jsons.length; i++) {
                        alert(jsons[i].name);
                        channelId.append('<option value="'+jsons[i].id+'">'+jsons[i].name+'</option>');
                    }
    
                },
                error:function(){
                    alert("获取通道列表失败!!!!!");
                    //alert("操作出错,请与管理员联系!");
                }
            });
        });
    });
  • 相关阅读:
    基于Kubernates微服务案例
    领导人怎样带领好团队
    前端性能核对表Checklist-2018
    国际巨头互联网公司一些运营与管理思路
    IT研发工程师职业规划
    高性能风控数据平台设计
    基础设施DevOps演进之路
    2017-2018年Scrum状态调查报告
    大型互联网系统的监控流水线
    小程序【情书与歌】一小时过审经验小谈
  • 原文地址:https://www.cnblogs.com/a8457013/p/8681296.html
Copyright © 2011-2022 走看看