JavaScript从入门到放弃（4）--原生的DOM操作，以及Ajax网络请求

来源：互联网发布：青岛特来电公司知乎编辑：程序博客网时间：2024/05/16 18:31
<!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>
阅读全文
0 0