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("操作出错,请与管理员联系!");
                }
            });
        });
    });
  • 相关阅读:
    java-String类
    多线程的细节
    java-多线程的练习----妖,等待唤醒,代码重构,lock到condition
    javascript函数的声明和调用
    表单
    java-多线程的入门_进阶总结
    uboot命令
    u-boot移植 III
    u-boot移植 II
    汇编词典
  • 原文地址:https://www.cnblogs.com/a8457013/p/8681296.html
Copyright © 2011-2022 走看看