1. 程式人生 > >ajax 二級聯動與springmvc 交互

ajax 二級聯動與springmvc 交互

二維碼 gmv 級聯 ajax 二維 管理員 gpo spa ++

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 交互