ajax 页面列表动态联动小例

最新推荐文章于 2021-08-05 22:39:11 发布

fengzhongmuyi222

最新推荐文章于 2021-08-05 22:39:11 发布

阅读量94

点赞数

文章标签： Ajax

本文链接：https://blog.csdn.net/fengzhongmuyi222/article/details/83890200

版权

第一次使用ajax也让我调试了好久，不过用起来的确很方便，效果很不错！

<script type="text/javascript">
function doMyAction() {
	var myTableOwner = document.getElementById('myTableOwner').value;
	if(myTableOwner.replace(/^ +| +$/g,'')=='') { 
		alert("请选择“所有者”！"); 
		return false; 
	}
	var myTableName = $.trim(document.getElementById('myTableName').value);
	if(myTableName.replace(/^ +| +$/g,'')=='') { 
		alert("请选择“库表名”！"); 
		return false; 
	}

function setMySelectJS() {
	resetIframeSize();
}
function changeTableName(){
	$.ajax({
			url:'${myContextPath}/tableNameListController.do',
			type:"GET",
			data:{myTableOwner:$("#myTableOwner").val()},
			dataType:"text",
			timeout:30000,
			success:function(data,textStatus){
                                //清空列表原有数据
				$("#myTableName").empty();	
				var pos_begin=data.indexOf("ajax_index_start")+16;
			    var pos_end=data.indexOf("ajax_index_end");
                            //将后台返回数据注入myTableName
			    $("#myTableName").append(data.substring(pos_begin,pos_end));
			}
		});

}
function link(){


	var a = "${flag}";
	if(  a != 1 ){
		return;
	}
	else{		
		document.getElementById('myTableOwner').value = "${owner}";
		changeTableName();

		var list = document.getElementById('myTableName').options.length;

		for(var i=0;i<list;i++){
		    if(document.getElementById('myTableName').options[i].text == "${tableName}"){			    
		    	document.getElementById('myTableName').options[i].selected = true;	
		    	return;
			}   
		}  		
	}	
}
</script>
</head>
<body leftmargin="0" rightmargin="0" onload="setMySelectJS(),link()">

<table align="left" width="100%" border="0" cellpadding="0" cellspacing="0">

	<tr align="left" >
		<td align="left" >
			<div id="myDivInput">
				<table align="left" class="myTable.css">
					<tr align="left" >
						<td align="left" colspan="5" >
							<label id="mypagetitle" class="titlelabel">表定义查询</label>
						</td>
					</tr>
					<tr align="left" >
						<td align="left" >
							所有者：
						</td>
						<td align="left" >
							<select id="myTableOwner" name="myTableOwner" onchange="changeTableName()">
								<option value="">--请选择--</option>
								<option value="option">value</option>
							</select>
						</td>
						<td align="left" >
							库表名：
						</td>
						<td align="left" >
							<select id="myTableName" name="myTableName">
								<option value="">--请选择--</option>
							</select>
						</td>

						<td align="left" >
							<input type="button" name="mysubmit" value="查询" onclick="doMyAction()" >
						</td>
					</tr>
				</table>
			</div>
		</td>
	</tr>
	</table>
</body>