码迷,mamicode.com
首页 > 编程语言 > 详细

ajax 二级联动与springmvc 交互

时间:2018-03-31 12:02:30      阅读:208      评论:0      收藏:0      [点我收藏+]

标签:data   html   error   back   class   test   use   span   append   

 

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("操作出错,请与管理员联系!");
            }
        });
    });
});

 

ajax 二级联动与springmvc 交互

标签:data   html   error   back   class   test   use   span   append   

原文地址:https://www.cnblogs.com/a8457013/p/8681296.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!