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 ...
随机推荐
- 线程变量---ThreadLocal类
用处:保存线程的独立变量.对一个线程类(继承自Thread) 思想:如果一个资源会引起线程竞争,那就为每一个线程配置一个资源.相比于synchronized是一种空间换时间的策略 当使用ThreadL ...
- 图像超分辨-DBPN
本文译自2018CVPR DeepBack-Projection Networks For Super-Resolution 代码: github 特点:不同于feedback net,引入back ...
- TextArea 保存时换行符处理
后台数据保存时就要处理“\r\n",替换成”<br />",前台(html)页面显示时再做下处理. 自己是mvc页面,用到了两个方法:Html.Raw(),以及Http ...
- 设计模式C++学习笔记之五（Factory Method工厂方法模式）
工厂方法模式的意义是定义一个创建产品对象的工厂接口,将实际创建工作推迟到子类当中.核心工厂类不再负责产品的创建,这样核心类成为一个抽象工厂角色,仅负责具体工厂子类必须实现的接口,这样进一步抽象化的 ...
- VS2008 debug可以编译过,Release No such file or directory
1>正在生成代码1>e:\Source\VC\Զ\json\jsoncpp-src-0.6.0-rc2\src\lib_json\json_value.cpp : fatal error ...
- hibernate框架学习之增删改查helloworld
插入数据删除数据修改数据查询单条数据查询多条数据 HelloWorldApp.java package cn.itcast.h3.helloworld; import org.hibernate.Se ...
- codeforces 462div.2
A A Compatible Pair standard input/output 1 s, 256 MB x1916 B A Prosperous Lot standard input/out ...
- Unity3D游戏开发框架-资源管理类ResourceManage
新建文件夹:ResMgr.接着新建三个C#脚本.代码如下: IResLoadListener.cs AssetInfo.cs ResMgr.cs using UnityEngine; using Sy ...
- slice的部分说明
1.slice是数值的一个引用,并不会新增内存地址. 2.slice的容量和长度是两个概念,这个长度跟数组的长度是一个概念,即在内存中进行了初始化实际存在的元素的个数.何谓容量?如果通过make函数创 ...
- QT 出现信号槽不触发的问题
主要有以下三点: 1)槽函数未声明为 slots 类型, 信号函数未声明为 signals所致 2)槽函数和信号函数的参数不一致所致 3)connect关联时失败