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 ...
随机推荐
- python3-面向对象进阶(内置方法)
面向对象进阶: isinstance和issubclass 反射 __setattr__,__getattr,__delattr__ __setitem__,__getitem,__delitem__ ...
- 使用 ffmpeg nginx rtmp 搭建实时流处理平台
环境: ubuntu 16.04 问题引入: 使用 opencv 获取摄像头数据帧, 进行处理之后(如进行 keypoint 识别), 将 opencv 中图像的 Mat类型转化为 ffmpeg 的 ...
- ARMV7-M数据手册---Part A ：Application Level Architecture---A1 Introduction
1.前言 本章主要介绍了ARMV7体系结构及其定义的属性,以及本手册定义的ARMV7M属性. 主要包括: ARMV7体系结构和属性 ARMV7M属性 ARMV7M扩展 2. ARMV7体系结构和属性 ...
- vue 选城市三级联动
<div id="example"> <select v-model="prov"> <option v-for="op ...
- windows下django1.7 +python3.4.2搭建记录1
python+django在linux下搭建比较简单,windows下搭建比较复杂,所以列在下方一.下载安装下载django的包,到刚解压后的Django-1.7目录下执行命令 python setu ...
- 【转】drop、truncate和delete的区别
(1)DELETE语句执行删除的过程是每次从表中删除一行,并且同时将该行的删除操作作为事务记录在日志中保存以便进行回滚操作. TRUNCATE TABLE 则一次性地从表中删除所有的数据并不把单独的删 ...
- URLConnection和HttpURLConnection
URLConnection和HttpURLConnection使用的都是java.net中的类,属于标准的java接口. HttpURLConnection继承自URLConnection,差别在与H ...
- 制作ecc证书(linux命令行)
生成ECC证书.Debian:/home/test# openssl ecparam -out EccCA.key -name prime256v1 -genkeyDebian:/home/test# ...
- 使用Filezilla搭建FTP服务器
1.FTP over TLS is not enabled, users cannot securely http://blog.sina.com.cn/s/blog_4cd978f90102vtwl ...
- telnet mysql时出现：is not allowed to connect to this MySQL serverConnection closed by foreign host问题的解决
有时候telnet一个mysql服务器的时候会出现: Host '192.168.0.1' is not allowed to connect to this MySQL serverConnecti ...