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 ...
随机推荐
- sonar的安装以及使用
SonarQube是管理代码质量一个开放平台,可以快速的定位代码中潜在的或者明显的错误,下面将会介绍一下这个工具的安装.配置以及使用. 1. 简介 1. sonar是什么 Sonar是一个用于代码质 ...
- 2018 Multi-University Training Contest 3 杭电多校第三场
躺了几天 终于记得来填坑了 1001 Ascending Rating (hdoj 6319) 链接:http://acm.hdu.edu.cn/showproblem.php?pid=6319 ...
- 2018 Multi-University Training Contest 2 杭电多校第二场
开始逐渐习惯被多校虐orz 菜是原罪 1004 Game (hdoj 6312) 链接:http://acm.hdu.edu.cn/showproblem.php?pid=6312 虽然披着 ...
- Node.js的单元测试框架初体验
Mocha是一个功能丰富的JavaScript测试框架,运行在node.js平台和浏览器端,使异步测试变得简单和有趣.Mocha测试是串行的,允许灵活和准确的报告,同时将未捕获的异常映射到相应的测试用 ...
- FireDac 的一些应用提示
FireDac 的一些应用提示: 1. 客户端 dataset 能用 TFDQuery 连接 dataset provider 获取数据 ? Can I use TFDQuery and conne ...
- Git学习笔记04-管理修改
Git跟踪并管理的是修改,而非文件.新增文件,修改一行,删除一点,都算是修改. 在.git工作区新增一个文件,test.txt,输入test git ...然后git add add之后修改t ...
- gPRC学习笔记
gPRC学习笔记 gPRC基础教程. gPRC官方文档. protobuf 3.0的简易教程. 什么是RPC RPC(remote procedure call) -- 远程过程调用(相对于本地调用的 ...
- 021_nginx动态upstream检查
GET: 请求指定的页面信息,并返回实体主体.HEAD: 只请求页面的首部. #参考:http://tengine.taobao.org/document_cn/http_upstream_check ...
- Sublime Text 3安装Package Control快速建立html5和xhtml文档
Sublime Text 3安装Package Control快速建立html5和xhtml文档 先关闭Sublime text 3:第1步:下载sublime_package_control-mas ...
- 快速解决PHP调用Word组件DCOM权限的问题
1. 首先必须要在电脑上安装 Office 2. windows+r : 输入 dcomcnfg.exe 打开组件服务,然后双击 组件服务 ==> 双击 计算机 ==> 双击 我的电脑 = ...