ajax form表单处理的result展示的页面的2种方法

最新推荐文章于 2022-04-29 21:38:02 发布

kjshuan

最新推荐文章于 2022-04-29 21:38:02 发布

阅读量446

点赞数 1

分类专栏： JavaWeb 文章标签： Ajax

本文链接：https://blog.csdn.net/just_learing/article/details/124293149

版权

JavaWeb 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
html, body {
	height: 100%;
	overflow: auto;
}

body {
	background: url(ab.jpg) top left;
	background-size: 100%;
}

span {
	color: red;
	font-size: 30px;
}

#a {
	font-size: 20px;
}

table {
	/* 设置了这个属性，其余所有td都是相同的宽度。
这样操作之后，table是宽度固定了，但是里面的文章如果很长，文字会覆盖 */
	table-layout: fixed;
}

td {
	/* 自动换行就好了 */
	/* word-wrap:break-word; */
	width: 10px;
	height: 11px
}
</style>
</head>
<body>
	<div id="clear" style="width: 100%; text-align: center">

		<h1 style="color: blue">游戏查询</h1>
		<form action="" method="post" enctype="multipart/form-data">
			<div>
				<span>游戏名称</span><input type="text" name="gameName" />
			</div>
			<div>
				<span>游戏类型</span><input type="text" name="gameType" />
			</div>
			<div>
				<span>发行公司</span><input type="text" name="gameCompany" />
			</div>
			<div>
				<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;发行年份</span> <input
					type="text" name="gameYear" />四位数字
			</div>
			<br>
			<br>
			<br>
			<br>
		</form>
		<input type="submit" onclick="query()" value="查询" id="submit"
			style="font-size: 30px" /> <input type="submit" onclick="add1()"
			value="新增" id="submit1" style="font-size: 30px" />
	</div>

	<table id="tab" border="1px" cellspacing="0px" width="1700"
		height="150" style="display: none">
		<!-- 自定义隐藏 -->
		<tr>
			<th colspan="4">游戏列表</th>
		</tr>
		<tr id="s1">
			<th>游戏名称</th>
			<th>游戏类型</th>
			<th>发行公司</th>
			<th>发行年份</th>
		</tr>

	</table>
</body>




<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
	function query() {
		var data = {};
		//第一种方式是jq   name选择器
		//jq方法

		var formobject= $('form').serializeArray()//数组  序列化数组
		$(formobject).each(function(){//遍历 数组  序列化数组
		    if(data[this.name]){
		    	data[this.name]+=';'+this.value;
		    }else{
		    	data[this.name]=this.value;
		    }
		});
		console.log(data);//验证data 数据
		 if(data.gameYear>9999){
			alert("请您输入4位数字!!");
			return;
		}
	/*  	for ( var i in data) {
			if(data[i].trim()==""){
				window.location.href="login.jsp";
				return;
			}
		}  */
		
			if(true){
				$.ajax( {
				    "url"            :  "FindServlet",                      // 要提交的URL路径
				    "type"         :  "get",                     // 发送请求的方式
				    "data"         :  data,                      // 要发送到服务器的数据
				    "dataType" :  "json",                   // 指定传输的数据格式
				    "success"  :  function(result) {// 请求成功后要执行的代码
				    	console.log(result);				    						  
							console.log(result);//ajax里面就用\的EL 表达式 取值
						     var temp="";//ajax里面就用\的EL 表达式 取值
						     for (var res in result){//ajax里面就用\的EL 表达式 取值
					    	temp += `<tr >
							    		 <td>\${result[res].gameName}</td>						    
								    	 <td>\${result[res].gameType}</td>
								    	 <td>\${result[res].gameCompany}</td>
								    	 <td>\${result[res].gameYear}</td>
								</tr>` 			     		
				    		 
				 		    	}
						     
								document.getElementById('clear').innerHTML = "";//清除页面所有内容
								/* $("#clear").innerHTML = ""; */
								$("#tab").removeAttr("style");//移除 隐藏样式 显示查询内容
				   				$("#s1").after(temp);//增加    显示查询内容								    		 
						   
	
				    },
				     "error"       :  function() { 
				    	alert("网络正忙");
					     }
				} );
			}else{
				return;
			}
			
		}
	
	
	function add1() {
		alert("请确认新增   正在跳转。。。");	
		window.location.href="add.jsp";
		}

</script>
</body>
</html>

form表单展示页面