Ajax增删改查-----------查
查询所有
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>查询所有用户</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<style>
p{
display: inline;
}
#id{
margin-left: 15px;
}
td,th{
border: solid black 1px;
}
html body {
margin:0px;padding:0px}
li{
display: inline;
margin-right:25px;
padding-top:15px!important;
}
ul{
margin-top:0px;
padding-top:12px;
}
#One{
margin-left:10%;
}
a{
font-size:25px
}
#CD{
height:60px;
background-color:blue;
}
a{
text-decoration:none
}
a a:link{
color:white;
}
a:visited{
color:white;
}
a:active{
color:white;
}
a:hover {
color:red;
}
#nr{
margin-top:5%;
margin-left:10%;}
</style>
<body>
<div id="CD">
<ul>
<li id="One"><a href="findAllUser.html" >查询所有</a></li>
<li><a href="findOneUser.html" >查询单个</a></li>
<li><a href="save.html" >增加</a></li>
<li><a href="update.html" >删除</a></li>
<li><a href="update.html" >修改</a></li>
</ul>
</div>
<div id="nr">
<h1>查询所有用户</h1> <button>发送请求</button> <table id="mytab" border="1">
<tr id="htr">
<th>#</th>
<th>名</th>
<th>姓</th>
<th>邮箱</th>
<th>手机号</th>
<th>生日</th>
</tr>
</table>
</div>
<script>
$(document).ready(function (){
$('button').on('click',function(){
var $tab1 = $("#mytab");
//alert(1); //var $id=$('#id').val();
//var $username=$('#username').val();
//var $password=$('#password').val();
//var $age=$('#age').val(); $.ajax({
//alert(2);
url : "http://192.168.0.120:8080/customers",
type : 'GET',
dataType : 'json',
data:'',
// Jsonp: 'callback', success : function(data) { // 数据状态success
$("#htr").nextAll().remove();
// alert(3);
console.log(data);
for(var i=0;i<data.length;i++){
$tab1.append("<tr><td>" + data[i].id + "</td><td>" + data[i].firstName + "</td><td>" + data[i].lastName + "</td><td>"+ data[i].email + "</td><td>"
+ data[i].mobile+ "</td><td>"
+ data[i].dateOfBirth + "</td></tr>" ); } }
});
})
}) //
// _ooOoo_
// o8888888o
// 88" . "88
// (| -_- |)
// O\ = /O
// ____/`---'\____
// .' \\| |// `.
// / \\||| : |||// \
// / _||||| -:- |||||- \
// | | \\\ - /// | |
// | \_| ''\---/'' | |
// \ .-\__ `-` ___/-. /
// ___`. .' /--.--\ `. . __
// ."" '< `.___\_<|>_/___.' >'"".
// | | : `- \`.;`\ _ /`;.`/ - ` : | |
// \ \ `-. \_ __\ /__ _/ .-` / /
// ======`-.____`-.___\_____/___.-`____.-'======
// `=---='
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// 佛祖保佑 永无BUG </script>
</body>
</html>
查询单个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>查询单个用户</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head><style>
p{
display: inline;
}
#id{
margin-left: 15px;
}
td,th{
border: solid black 1px;
}
html body {
margin:0px;padding:0px}
li{
display: inline;
margin-right:25px;
padding-top:15px!important;
}
ul{
margin-top:0px;
padding-top:12px;
}
#One{
margin-left:10%;
}
a{
font-size:25px
}
#CD{
height:60px;
background-color:blue;
}
a{
text-decoration:none
}
a a:link{
color:white;
}
a:visited{
color:white;
}
a:active{
color:white;
}
a:hover {
color:red;
}
#nr{
margin-top:5%;
margin-left:10%;}
</style>
<body>
<div id="CD">
<ul>
<li id="One"><a href="findAllUser.html" >查询所有</a></li>
<li><a href="findOneUser.html" >查询单个</a></li>
<li><a href="save.html" >增加</a></li>
<li><a href="update.html" >删除</a></li>
<li><a href="update.html" >修改</a></li>
</ul>
</div>
<div id="nr">
<h1>查询所有用户</h1>
<p>按ID查询</p>
<input type="text" name="text" id="id">
<br>
<p>按名称查询</p>
<input type="text" name="text" id="firstName">
<br>
<br>
<button>发送请求</button>
<br>
<br> <table id="mytab" border="1">
<tr id="htr">
<th>#</th>
<th>名</th>
<th>姓</th>
<th>邮箱</th>
<th>手机号</th>
<th>生日</th>
</tr>
</table>
</div>
<script>
$(document).ready(function() {
$('button').on('click',function() { if($id === null){
} var $id = $('#id').val();
var $firstName = $('#firstName').val(); if ($id !== null) {
params = {
"id" : $id
};
alert($id);
} $.ajax({
url : "http://192.168.0.120:8080/customers/" + $id,
type : 'GET',
dataType : 'json',
data : params,
success : function(data) { // 数据状态success
console.log(data);
$("#htr").nextAll().remove();
alert(data.id); if(data.id!=undefined){ $("#mytab").append("<tr><td>"+data.id+"</td><td>"+data.firstName+"</td><td>"+data.lastName+"</td><td>"+data.email+"</td><td>"+data.mobile+"</td><td>"+data.dateOfBirth+"</tr>");
} }
});
})
})
</script>
<script> $(document).ready(function() {
$('button').on('click',function() {
var $id = $('#id').val();
var $firstName = $('#firstName').val(); var params;
if ($firstName !== null) {
params = {
"firstName" : $firstName
};
alert($firstName);
} $.ajax({
url : "http://192.168.0.120:8080/" + $firstName,
type : 'GET',
dataType : 'json',
data : params,
success : function(data) { // 数据状态success
$("#htr").nextAll().remove();
console.log(data);
$("#mytab").append("<tr><td>"+data.id+"</td><td>"+data.firstName+"</td><td>"+data.lastName+"</td><td>"+data.email+"</td><td>"+data.mobile+"</td><td>"+data.dateOfBirth+"</tr>"); }
}); })
})
</script>
</body>
</html>
Ajax增删改查-----------查的更多相关文章
- ADO.NET 增删改、查
数据访问 对应命名空间:System.Data.SqlClient; SqlConnection:连接对象SqlCommand:命令对象SqlDataReader:读取器对象 CommandText: ...
- ADO.NET增删改-------跟查不一样
建立数据库 create database ren go use database go create table user ( code nvarchar(20) primary key,--编号 ...
- django ajax增 删 改 查
具于django ajax实现增 删 改 查功能 代码示例: 代码: urls.py from django.conf.urls import url from django.contrib impo ...
- linux sed 命令 实现对文件的增删改替换查 实验
1. 统一实验文本 # 创建包含下面内容的文件,后面的操作都会使用这个文件 [root@MongoDB ~]# cat person.txt ,mike,CEO ,jack,CTO ,yy,CFO , ...
- 利用Ajax增删改Sharepoint List Item
在使用一个工具的是想要在本地的HTML文件或者JS,修改Sharepoint List中的数据. 如下是找到的方法.不知道还有其他方法没.IE中可以使用.记得加载Jquery. 如果是Chrome 浏 ...
- 数往知来 AJAX Ajax增删改查<十九>
=================================================客户端================================================ ...
- Ajax增删改查-----------删 改
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Ajax增删改查-----------增
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Servlet做简单的ajax增删改查（分页）
jdbc.java package servlet; import java.sql.Connection; import java.sql.DriverManager; import java.sq ...
随机推荐
- 为Oracle GoldenGate准备数据库
了解如何为Oracle GoldenGate准备数据库,包括如何配置连接和日志记录,如何在数据库中启用Oracle GoldenGate,如何设置闪回查询以及如何管理服务器资源. 为集成进程配置连接 ...
- 2018 Multi-University Training Contest 9 杭电多校第九场 （有坑待补）
咕咕咕了太久 多校博客直接从第三场跳到了第九场orz 见谅见谅(会补的!) 明明最后看下来是dp场 但是硬生生被我们做成了组合数专场…… 听说jls把我们用组合数做的题都用dp来了遍 这里只放了用组 ...
- 应急响应-GHO提取注册表快照
前言 备份文件.gho中找到机器的注册表 文件夹位置 在 C:\WINDOWS\SYSTEM32\CONFIG 下就是系统的注册表,一般情况下,这里面会有以下几个文件: default 默认注册表文件 ...
- （转载）深度剖析 | 可微分学习的自适配归一化 (Switchable Normalization)
深度剖析 | 可微分学习的自适配归一化 (Switchable Normalization) 作者:罗平.任家敏.彭章琳 编写:吴凌云.张瑞茂.邵文琪.王新江 转自:知乎.原论文参考arXiv:180 ...
- 判断鼠标进入容器的方向小Demo
参考资料: 贤心博客:http://sentsin.com/web/112.html, Math.atan2(y,x) 解释 :http://www.w3school.com.cn/jsref/jsr ...
- This project is not a myeclipse hibernate project . Assuming Hibernate 3 capabilities configuration editor
开某工程Hibernate配置文件时出现提示,信息大概如标题. 根据网友提供,选中工程,点击MyEclipse-->Project capabilities-->add hibernate ...
- const成员函数和mutable关键字
一.const成员函数 class MyClass { public: void fun() const { } private: int m_nValue; } const成员函数内不能修改成员变量 ...
- POJ 3723
最大生成树 #include<iostream> #include<cstdio> #include<cstring> #include<set> #i ...
- Light OJ 1058
题意: 简单的就组合数 C(m,n): 数据多,大, 要预处理: #include<bits/stdc++.h> using namespace std; typedef long lon ...
- python 基础 01
什么是计算机? cpu: 计算机的大脑; 读写速度 3GHZ 内存: (为了提高利用率) 缓冲硬盘和cpu 硬盘: 机械硬盘读写速度70mb/s 计算机里面读写的内容都是01代码 二进制(计算机只认二 ...