JQuery CRUD HTML5

JQuery CRUD HTML5

使用JQuery进行CRUD的测试h5

U

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>...</title>

</head>
<body>
	<div>
		<span>姓名:</span><input type="text" id="name" /></br>
		<span>年龄:</span><input type="text" id="age" /></br>
		<span>性别:</span><input type="radio" name="sex"  value="male"/><input type="radio" name="sex"

 value="female" /></br>
		<input id="submit" type="button" value="提交"/>
	</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
 $(function(){
	 var r = window.location.search;
	 var ele=r.split("?")[1];
	 var id;
	 if(null != ele) id = ele.split("=")[1];
	 if(null == id) return alert("null");
	 $.ajax({
		 type: "get",
		 url:"../test/get",
		 data:{
			 id:id,
		 },
		 // dataType:"json", //dataType是预期服务器返回的数据类型,有默认返回,可以不指定,但如果是特殊格式必须指定。https://www.cnblogs.com/wsw8384/p/9183174.html
		 success: function(data){
			 $("#name").attr('value',data.name);
			 $("#age").attr('value',data.age);
			 $("input[value='"+data.sex+"']").attr('checked',true);
			 $("#submit").click(function () {
				submit(data.id);
			 })
		 },
		 error: function(e){alert("服务器错误");}
	 });

	});
 function submit(id) {
	 $.ajax({
		 type: "post",
		 url:"../test/update",
		 data:{
			 id:id,
			 name:$("#name").val(),
			 age:$("#age").val(),
			 sex:$("input[name='sex']:checked").val()
		 },
		 // dataType:"json", //dataType是预期服务器返回的数据类型,有默认返回,可以不指定,但如果是特殊格式必须指定。https://www.cnblogs.com/wsw8384/p/9183174.html
		 success: function(data){
			 window.location="index.html";
		 },
		 error: function(e){alert("服务器错误");}
	 });
 }
</script>
</html>

RD

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table id="msg" border="1">
    <tr>
        <td colspan="5"><center>
            <a href="add.html">添加新用户</a>
        </center></td>
    </tr>
    <tr>
        <th>id</th>
        <th>name</th>
        <th>age</th>
        <th>sex</th>
        <th>option</th>
    </tr>
</table>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    $.ajax({
        type: "get",
        url:"../test/getAll",
        // dataType:"json", //dataType是预期服务器返回的数据类型,有默认返回,可以不指定,但如果是特殊格式必须指定。https://www.cnblogs.com/wsw8384/p/9183174.html
        success: function(data){
            var html ="";
            for(var i =0;i<data.length;i++){
                var ele =data[i];
                html+="<tr id=\""+ele.id+"\">" +
                    "        <td>"+ele.id+"</td>" +
                    "        <td><input type=\"text\" disabled value=\""+ele.name+"\" id=\"name\"style=\"width:80px;\"/></td>\n" +
                    "        <td><input type=\"text\" disabled value=\""+ele.age+"\" id=\"age\"style=\"width:80px;\"/></td>\n" +
                    "        <td><input type=\"text\" disabled value=\""+ele.sex+"\" id=\"sex\"style=\"width:80px;\"/></td>\n" +
                        "        <td><input type=\"button\" value='修改' οnclick=\"update("+ele.id+")\"/>\n" +
                    "            <input type=\"button\" value='删除' οnclick=\"del("+ele.id+")\"/>\n" +
                    "            <input type=\"button\" value='确认修改' οnclick=\"ensure("+ele.id+"\") style='display:none'\"/></td>\n" +
                    "    </tr>";
        }
            $("#msg").append(html);
        },
    });
    function update(i) {
        window.location="update.html?id="+ i;

    }
    function del(i) {
        $.ajax({
            type: "post",
            url:"../test/del",
            data:{
                id:i,
            },
            success: function(data){
                window.location.reload();
                alert(data);
            },
            error: function(e){alert("服务器错误");}
        });
    }
</script>
</html>

C

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>...</title>

</head>
<body>
	<div>
		<span>姓名:</span><input type="text" id="name" /></br>
		<span>年龄:</span><input type="text" id="age" /></br>
		<span>性别:</span><input type="radio" name="sex"  value="male"/><input type="radio" name="sex" value="female" /></br>
		<input id="submit" type="button" value="提交"/>
	</div>
</body>
	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
 $(function(){
		$("#submit").click(
		function(){
		var pagename = $("#name").val();
		var pageage = $("#age").val();
		var sex = $("input[name='sex']:checked");
		if("" == pagename || "" == pageage || 1 > sex.length){
			alert("有未选择项");
		}else{
			const test1 = /^[0-9]\+?[0-9]*$/;//^这个字符是在中括号”[]”中被使用的话就是表示字符类的否定,如果不是的话就是表示限定开头
			if(!test1.test(pageage)) return alert("年龄请输入整数");
			var pagesex = sex.val();
			$.ajax({
			type: "post",
			url:"../test/add",
			data:{
			name:pagename,
			age:pageage,
			sex:pagesex
			},
			// dataType:"json", //dataType是预期服务器返回的数据类型,有默认返回,可以不指定,但如果是特殊格式必须指定。https://www.cnblogs.com/wsw8384/p/9183174.html
			success: function(data){
				window.location="index.html";
				},
			error: function(e){alert("服务器错误");}
			});
		}
		}
		);
	});
</script>
</html>
展开阅读全文

Git 实用技巧

11-24
这几年越来越多的开发团队使用了Git,掌握Git的使用已经越来越重要,已经是一个开发者必备的一项技能;但很多人在刚开始学习Git的时候会遇到很多疑问,比如之前使用过SVN的开发者想不通Git提交代码为什么需要先commit然后再去push,而不是一条命令一次性搞定; 更多的开发者对Git已经入门,不过在遇到一些代码冲突、需要恢复Git代码时候就不知所措,这个时候哪些对 Git掌握得比较好的少数人,就像团队中的神一样,在队友遇到 Git 相关的问题的时候用各种流利的操作来帮助队友于水火。 我去年刚加入新团队,发现一些同事对Git的常规操作没太大问题,但对Git的理解还是比较生疏,比如说分支和分支之间的关联关系、合并代码时候的冲突解决、提交代码前未拉取新代码导致冲突问题的处理等,我在协助处理这些问题的时候也记录各种问题的解决办法,希望整理后通过教程帮助到更多对Git操作进阶的开发者。 本期教程学习方法分为“掌握基础——稳步进阶——熟悉协作”三个层次。从掌握基础的 Git的推送和拉取开始,以案例进行演示,分析每一个步骤的操作方式和原理,从理解Git 工具的操作到学会代码存储结构、演示不同场景下Git遇到问题的不同处理方案。循序渐进让同学们掌握Git工具在团队协作中的整体协作流程。 在教程中会通过大量案例进行分析,案例会模拟在工作中遇到的问题,从最基础的代码提交和拉取、代码冲突解决、代码仓库的数据维护、Git服务端搭建等。为了让同学们容易理解,对Git简单易懂,文章中详细记录了详细的操作步骤,提供大量演示截图和解析。在教程的最后部分,会从提升团队整体效率的角度对Git工具进行讲解,包括规范操作、Gitlab的搭建、钩子事件的应用等。 为了让同学们可以利用碎片化时间来灵活学习,在教程文章中大程度降低了上下文的依赖,让大家可以在工作之余进行学习与实战,并同时掌握里面涉及的Git不常见操作的相关知识,理解Git工具在工作遇到的问题解决思路和方法,相信一定会对大家的前端技能进阶大有帮助。

实用主义学Python(小白也容易上手的Python实用案例)

12-24
原价169,限时立减100元! 系统掌握Python核心语法16点,轻松应对工作中80%以上的Python使用场景! 69元=72讲+源码+社群答疑+讲师社群分享会  【哪些人适合学习这门课程?】 1)大学生,平时只学习了Python理论,并未接触Python实战问题; 2)对Python实用技能掌握薄弱的人,自动化、爬虫、数据分析能让你快速提高工作效率; 3)想学习新技术,如:人工智能、机器学习、深度学习等,这门课程是你的必修课程; 4)想修炼更好的编程内功,优秀的工程师肯定不能只会一门语言,Python语言功能强大、使用高效、简单易学。 【超实用技能】 从零开始 自动生成工作周报 职场升级 豆瓣电影数据爬取 实用案例 奥运冠军数据分析 自动化办公:通过Python自动化分析Excel数据并自动操作Word文档,最终获得一份基于Excel表格的数据分析报告。 豆瓣电影爬虫:通过Python自动爬取豆瓣电影信息并将电影图片保存到本地。 奥运会数据分析实战 简介:通过Python分析120年间奥运会的数据,从不同角度入手分析,从而得出一些有趣的结论。 【超人气老师】 二两 中国人工智能协会高级会员 生成对抗神经网络研究者 《深入浅出生成对抗网络:原理剖析与TensorFlow实现》一书作者 阿里云大学云学院导师 前大型游戏公司后端工程师 【超丰富实用案例】 0)图片背景去除案例 1)自动生成工作周报案例 2)豆瓣电影数据爬取案例 3)奥运会数据分析案例 4)自动处理邮件案例 5)github信息爬取/更新提醒案例 6)B站百大UP信息爬取与分析案例 7)构建自己的论文网站案例
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值