<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<meta charset="UTF-8">
<title>更改DOM</title>
</head>
<body>
<dl id="dl">
<li>选项2</li>
<li>选项3</li>
<li>选项4</li>
</dl>
<input type="button" id="button" value="点击更新" />
<script type="text/javascript">
$(document).ready(function() {
$("#button").click(function() {
console.log("点击到了按钮");
var dl = document.getElementById("dl");
var all_Li = dl.children;
console.log(all_Li.length);
for(var li of all_Li) {
/*更改文字大小和背景颜色*/
li.style.fontSize = "20px";
li.style.backgroundColor = '#ff0000';
}
});
});
</script>
<br />
<input style="margin-top: 5%;" align="center" type="button" value="点击插入" id="add" />
<div id="div"></div>
<input style="margin-top: 5%;" type="button" id="delete" value="删除选项" />
<script type="text/javascript">
$(document).ready(function() {
var count = 0;
/*新增的逻辑*/
$("#add").click(function() {
/*获取一下屏幕尺寸*/
var width = window.innerWidth;
var height = window.innerHeight;
var div = document.getElementById("div");
var li = document.createElement("li");
li.id = "li1";
li.innerHTML = '<hr /> <p align="center">新插入的数据</p> <hr />';
div.appendChild(li);
count++;
});
/*删除的操作*/
$("#delete").click(function() {
if(count < 1) {
alert("需要删除的个数为0，请先添加");
} else {
var div = document.getElementById("div");
var li = div.lastElementChild;
div.removeChild(li);
count--;
}
});
});
</script>
<!--进行form表单操作-->
<form id="form" accept-charset="utf-8" method="post" action="http://shb2058.free.ngrok.cc/Practice_Project/myServelt">
用户名： <input type="text" name="name" id="name" />
<br /> 密码:
<input type="password" name="pass" id="pass" />
<br /> 记住密码：
<input type="checkbox" name="isUse" id="check" value="true" checked="checked" />
<br />
<!-- <input type="submit" value="点击提交" id="upload"/>-->
<input type="button" value="点击提交Ajax" id="upload" />
</form>
<div id="getdiv" style="margin-top: 1%;"></div>
<script type="text/javascript">
$(document).ready(function() {
$("#upload").click(function() {
var form = document.getElementById("form");
var isUser = document.getElementById("check").checked;
var name = document.getElementById("name").value;
var pass = document.getElementById("pass").value;
console.log("是否选中" + isUser);
if(isUser === true) {
console.log("true");
}
if(pass==undefined||pass==""||pass==null){
alert("请输入密码");
return;
}
if(name.length==0){
alert("请输入用户名");
return;
}
$.ajax({
type: "post",
url: "http://shb2058.free.ngrok.cc/Practice_Project/myServelt",
async: true,
data: {
name: name,
pass: pass,
isUse: isUser
},
dataType: 'json',
success: function(data) {
//因为设置了dataType是json,所以受到的数据就是json对象，如果json对象是个集合，就json[0].key；如果是对象json.key
/*[{"ID":0,"message":"name=name&pass=123&isUse=true"},{"ID":0,"message":"name=name&pass=123&isUse=true"}]*/
console.log("获取的数据" + JSON.stringify(data))
/*for(var json of data){
var li=document.createElement("li");
li.value="用户ID是"+json.ID+";密码是："+json.message;
div.appendChild(li);
};*/
for(var i = 0; i < data.length; i++) {
var div = document.getElementById("getdiv");
var li = document.createElement("li");
li.innerHTML = "用户ID是" + data[i].ID + ";密码是：" + data[i].message;
div.appendChild(li);
}
},
error: function(data) {
console.log("获取失败");
}
});
});
});
</script>
</body>
</html>
