JavaWeb阶段项目总结（一）

最新推荐文章于 2023-12-04 11:20:36 发布

层秋雨阵凉

最新推荐文章于 2023-12-04 11:20:36 发布

阅读量389

点赞数 1

分类专栏： JavaWeb 文章标签： JavaWeb Jquery ajax

本文链接：https://blog.csdn.net/qq_39775474/article/details/84310186

版权

JavaWeb 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、关于JQ的一些使用

1.遍历已经被选择的checkbox并得到其value

$("#delete").click(function(){
		var check=new Array();
		$("input[name='check']:checkbox").each(function(){
			if($(this).is(':checked')){
				check.push($(this).val());
				console.log(check);
			}
			
		});

2.遍历select标签并获得已经选择的option的值

var KQ_state=new Array(); 
$("select").each(function(){
		 KQ_state.push($(this).find("option:selected").val());
	 });

3.遍历input标签type为text的值

var KQ_beizhu=new Array();
 
$("input[name='KQ_beizhu']:text").each(function(){
		 KQ_beizhu.push($(this).val());
	 });

4.EL表达式作为js函数的参数传值给模态框的select并设置选中

<a href="#" value="${emp.id}"		onclick="tijiao('${emp.id}','${emp.name}','${emp.sex}','${emp.address}','${emp.salary}','${emp.dept}','${emp.photo}')"
	id="empId" data-toggle="modal" data-target="#myModal">${emp.id}
</a>

function tijiao(id, name, sex, address, salary, dept,photo) {
		console.log("标签a:" + id + name + sex + address + salary + dept);
		$("#empid").val(id);//这里设置的是模态框中的标签的值
		$("#empname").val(name);//这里设置的是模态框中的标签的值
		$("#empsex").val(sex);//这里设置的是模态框中的标签的值
		$("#empsalary").val(salary);//这里设置的是模态框中的标签的值
		$("#empaddress").val(address);//这里设置的是模态框中的标签的值
		var count = $("#empdept option").length;
		console.log("select长度：" + count);
		for (var i = 0; i < count; i++) {
			if ($("#empdept").get(0).options[i].text == dept) {
				$("#empdept").get(0).options[i].selected = true;
				break;
			} else {
				$("#empdept").get(0).options[i].selected = false;
			}
		}
	}

二、JavaWeb中Ajax前端和后端的基本用发

1.向后台传js数组数据

前台代码：

$("#delete").click(function(){
		var check=new Array();
		$("input[name='check']:checkbox").each(function(){
			if($(this).is(':checked')){
				check.push($(this).val());
				console.log(check);
			}
			
		});
		
	
		$.ajax({
			type: 'post',
		    url: 'doBusinessServlet?action=delete',
		    data: {"checkedData":check},
		    success: function (data) { 
		    	var r=confirm(data)
		    	if(r==true){
		    		window.location.href = "index.jsp";
		    	}else{
		    		window.location.href = "index.jsp";
		    	}
		   		
		    }
			
		});
		
	});

后台代码：

String []checkboxvalue=request.getParameterValues("checkedData[]");
				if (checkboxvalue!=null) {
					for (String string : checkboxvalue) {
						System.out.println(string);
						int empnum=Integer.parseInt(string);
						doBusiness.delete(empnum);//执行删除函数
					}
					out.write("删除成功!!!");
					out.flush();
					out.close();
				}
				out.write("删除失败!!!");
				out.flush();
				out.close();

2.向后台传json数据

前台代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" >
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>考勤录入</title>
</head>
<body>
	<table class="table table-bordered">

		<thead>
			<tr>
				<th colspan="4">考勤日期:<input type="datetime-local" id="datetime">
				</th>
			</tr>
			<tr>
				<th>工号</th>
				<th>姓名</th>
				<th>考勤情况</th>
				<th>备注</th>
			</tr>
		</thead>
		<tbody>
			<c:forEach var="empval" items="${emplist}">
				<tr>
					<td>${empval.empNum}</td>
					<td>${empval.empName}</td>
					<td>
					<select class="select" id="KQ_state" name="KQ_state">
							<option>--请选择--</option>
							<option value="正常">正常</option>
							<option value="迟到">迟到</option>
							<option value="旷工">旷工</option>
							<option value="早退">早退</option>
					</select>
					<input type="hidden"  value="${empval.empNum}"/>
					</td>
					<td>
					<input type="text" id="KQ_beizhu" name="KQ_beizhu"
						style="height: 100%; width: 100%">
					</td>
				</tr>
			</c:forEach>

		</tbody>

	</table>
	<div class="col-xs-6">
		<a href="javascript:void(0)" class="btn btn-info" id="kq">保存</a> 
		<a href="javascript:void(0)" class="btn btn-primary" id="back">返回</a>
	</div>

</body>
<script>
$(document).ready(function(){
	var json=[{}];
	var empNum=new Array();
	var KQ_state=new Array();
	var KQ_beizhu=new Array();
	var datetime;
 	$("#back").click(function(){
 		window.location.href = "index.jsp";
	}); 
	
	
$("#kq").click(function(){
	datetime=$("#datetime").val();
	 $("select").each(function(){
		 //console.log( $(this).find("option:selected").val());
		 //console.log( $(this).next().val());
		 KQ_state.push($(this).find("option:selected").val());
		 empNum.push($(this).next().val());
	 });
	 $("input[name='KQ_beizhu']:text").each(function(){
		 //console.log($(this).val());
		 KQ_beizhu.push($(this).val());
	 });
	 
	 for(var i=0;i<empNum.length;i++){
		 json.push({"datetime":datetime,"empNum":empNum[i],"KQ_state":KQ_state[i],"KQ_beizhu":KQ_beizhu[i]});
	 }
	 
	 console.log(json);
	
	 $.ajax({
		type: 'post',
	    url: 'doBusinessServlet?action=kqed', 
	    data: {jsonData:JSON.stringify(json)},//特别需要注意这里，需要现将json数组通过JSON.stringify()处理一下之后，才能作为我们需要的参数传过去
	    dataType:"json",
	    success: function (data) { 
	    	var r=confirm(data)
	    	if(r==true){
	    		window.location.href = "index.jsp";
	    	}else{
	    		window.location.href = "index.jsp";
	    	}
	    }
	});
	
});




}); 
 
</script>


</html>

后台代码：

String jsonData = request.getParameter("jsonData"); 
				JSONArray json=JSONArray.fromObject(jsonData); 
				for(int i=0;i<json.size();i++) {
					JSONObject job = json.getJSONObject(i);
					if (job.get("empNum")!=null) {
						String datetime=(String) job.get("datetime");
						int empNum=Integer.parseInt((String)job.get("empNum"));
						String KQ_state=(String) job.get("KQ_state");
						String KQ_beizhu=(String) job.get("KQ_beizhu");
						KQ kq=new KQ(KQ_state,KQ_beizhu,datetime,empNum);
						doBusiness.add_KQ(kq);
					}
					
				}
				out.write("考勤成功!!!");
				out.flush();
				out.close();