Semantic UI 之 网络请求
页面框架代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜索title>
<link rel="stylesheet" href="semantic-ui/semantic/dist/semantic.min.css">
<script type="text/javascript" src="js/jquery3.3.1.js">script>
<script type="text/javascript" src="semantic-ui/semantic/dist/semantic.min.js">script>
<script src="js/jquery.serialize-object2.5.0.min.js">script>
head>
<body>
<div class="ui container">
div>
<script>
$.fn.api.settings.api = { //定义好的访问后台数据的url
findAllDepts: "http://localhost:8080/sud/demo1",
findDept: "http://localhost:8080/sud/demo2?id={id}",
addDept: "http://localhost:8080/sud/demo3",
searchData: "http://localhost:8080/sud/demo4"
}
<!-- 在此处编写脚本 -->
script>
body>
html>
查找所有的部门
后台：
@WebServlet("/demo1")
public class Demo1Controller extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
List<Dept> depts = new ArrayList<>();
depts.add(new Dept(10, "ACCOUNTING", "NEWYORK"));
depts.add(new Dept(20, "RESEARCH", "DALLAS"));
depts.add(new Dept(30, "SALES", "CHICAGO"));
depts.add(new Dept(40, "OPERATIONS", "BOSTON"));
String res = JSON.toJSONString(depts);
PrintWriter out = resp.getWriter();
out.write(res);
out.flush();
out.close();
}
}
页面：
<button class="ui button" id="btn1">查找所有的部门button>
JavaScript脚本代码：
$("#btn1").api({
action: 'findAllDepts',
onSuccess: function (res) {
console.log(res);
if ($.isArray(res)) { //如果是数组
res.map(function (item) {
console.log(item);
});
}
}
});
结果：
查找指定ID的部门
后台：
@WebServlet("/demo2")
public class Demo2Controller extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String id = req.getParameter("id");
Dept dept = null;
if (id.equals("10")) {
dept = new Dept(10, "ACCOUNTING", "NEWYORK");
}
String res = JSON.toJSONString(dept);
PrintWriter out = resp.getWriter();
out.write(res);
out.flush();
out.close();
}
}
通过data属性设置参数的值
页面：
<button class="ui button" id="btn2" data-id="10">查找指定ID的部门button>
JavaScript脚本代码：
$("#btn2").api({
action: 'findDept',
onSuccess: function (res) {
console.log(res);
}
});
结果：
通过JavaScript指定参数的值
页面：
<button class="ui button" id="btn3">查找指定ID的部门button>
JavaScript脚本代码：
$("#btn3").api({
action: 'findDept',
urlData: {
id: 10
},
onSuccess: function (res) {
console.log(res);
}
});
结果：
自定义触发事件：双击时触发
页面：
<button class="ui button" id="btn4">查找指定ID的部门button>
JavaScript脚本代码：
//自定义触发事件：双击时触发
$("#btn4").api({
action: 'findDept',
on: "dblclick",
urlData: {
id: 10
},
onSuccess: function (res) {
console.log(res);
}
});
双击按钮，控制台输出结果：
自定义触发事件：浏览器加载完成后，立即自动触发，以后再次单击按钮也不能触发
页面：
<button class="ui button" id="btn5">查找指定ID的部门button>
JavaScript脚本代码：
//自定义触发事件：浏览器加载完成后，立即自动触发，以后再次单击按钮也不能触发
$("#btn5").api({
action: 'findDept',
on: "now",
urlData: {
id: 10
},
onSuccess: function (res) {
console.log(res);
}
});
自定义触发事件：浏览器加载完成后，立即自动触发，以后每次单击按钮时也会触发
页面：
<button class="ui button" id="btn6">查找指定ID的部门button>
JavaScript脚本代码：
//自定义触发事件：浏览器加载完成后，立即自动触发，以后每次单击按钮时也会触发
$("#btn6").api({
action: 'findDept',
urlData: {
id: 10
},
onSuccess: function (res) {
console.log(res);
}
}).api("query");
添加部门
后台：
@WebServlet("/demo3")
public class Demo3Controller extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String dname = req.getParameter("dname");
String loc = req.getParameter("loc");
Dept dept = new Dept(20, dname, loc);
//System.out.println(3/0); //配合前端页面演示出错时的错误信息显示
String res = JSON.toJSONString(dept);
PrintWriter out = resp.getWriter();
out.write(res);
out.flush();
out.close();
}
}
按钮添加部门
页面：
<button class="ui button" id="btn7">添加部门button>
JavaScript脚本代码：
$("#btn7").api({
action: 'addDept',
method: "post",
data: {
dname: "RESEARCH",
loc: "DALLAS"
},
onSuccess: function (res) {
console.log(res);
}
}).api("query");
表单添加按钮
页面：
<div class="ui segment">
<form action="" class="ui form">
<div class="ui error message">
表单提交出错！
div>
<div class="field">
<label for="dname" class="title">部门名称label>
<input type="text" name="dname" id="dname">
div>
<div class="field">
<label for="loc" class="title">部门地址label>
<input type="text" name="loc" id="loc">
div>
<button type="submit">保存部门button>
form>
JavaScript脚本代码：
$(".ui.form").api({
action: "addDept",
method: "post",
serializeForm: true, //自动将表单数据转换成合适的格式发送给服务器
errorDuration:5000,//错误信息消失时间
beforeSend: function (settings) { //在发送之前进行处理
if (settings.data.dname === '') {
settings.data.dname = 'defaultDname';
}
},
onSuccess: function (res) {
console.log(res);
}
})
下拉列表搜索
普通搜索
下拉列表搜索时，需要后台返回如下格式所示的数据：
{
"results": [
{
"title": "标题", //必须
"url": "链接",
"image": "图像",
"price": "价格",
"description": "描述 "
},
......
],
"action": {
"url": "显示搜索结果的链接",
"text": "链接的文字内容"
}
}
后台：
@WebServlet("/demo4")
public class Demo4Controller extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String res = "{\"results\": [{\"title\": \"ACCOUNTING\",\"url\": \"http://www.baidu.com\",\"description\":\"财务部门\"},{\"title\": \"RESEARCH\",\"url\": \"http://www.baidu.com\",\"description\":\"市场调研部门\"},{\"title\": \"SALES\",\"url\": \"http://www.baidu.com\",\"description\":\"销售部门\"},{\"title\": \"OPERATIONS\",\"url\": \"http://www.baidu.com\",\"description\":\"市场动作部门\"}],\"action\": {\"url\": \"http://www.baidu.com\",\"text\": \"详细结果页面\"}}";
resp.setCharacterEncoding("UTF-8");
PrintWriter out = resp.getWriter();
out.write(res);
out.flush();
out.close();
}
}
页面：
<div class="ui search" id="search1">
<div class="ui icon input">
<input type="text" class="prompt" placeholder="搜索……">
<i class="search icon">i>
div>
<div class="results">div>
div>
JavaScript脚本代码：
$("#search2").search({//自动请求settings中的search动作
apiSettings:{
method:"post",
action:"searchData",
onResponse:function (res) {
console.info(res);
return res;
}
}
});
结果：
分类搜索
分类搜索：服务器端返回的数据的格式
{
"results": {
"T1": {
"name": "T1",
"results": [
{
"title": "标题",
"url": "链接",
"image": "图像",
"price": "价格",
"description": "描述"
}
]
},
"T2": {
"name": "T2",
"results": [
{
"title": "标题",
"url": "链接",
"image": "图像",
"price": "价格",
"description": "描述"
},
{
"title": "标题",
"url": "链接",
"image": "图像",
"price": "价格",
"description": "描述"
}
]
}
},
"action": {
"url": "显示搜索结果的链接",
"text": "链接的文字内容"
}
}
后台代码：
@WebServlet("/demo4")
public class Demo4Controller extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String json = "{\"results\":{\"Ruby\":{\"name\":\"Ruby\",\"results\":[{\"title\":\"apache2\",\"description\":\"Development repository for the apache2 cookbook\",\"url\":\"https://github.com/sous-chefs/apache2\"},{\"title\":\"puppetlabs-apache\",\"description\":\"Puppet module for the Apache httpd server, maintained by Puppet, Inc. \",\"url\":\"https://github.com/puppetlabs/puppetlabs-apache\"}]},\"VimL\":{\"name\":\"VimL\",\"results\":[{\"title\":\"vim-as-a-python-ide\",\"description\":\"Example code from my PyCon APAC 2012 talk.\",\"url\":\"https://github.com/mbrochh/vim-as-a-python-ide\"}]},\"Java\":{\"name\":\"Java\",\"results\":[{\"title\":\"apache-shiro-tutorial-webapp\",\"description\":\"A step-by-step tutorial showing how to secure a web app with Apache Shiro\",\"url\":\"https://github.com/lhazlewood/apache-shiro-tutorial-webapp\"},{\"title\":\"ApacheKafkaTutorials\",\"description\":\"Example Code for Kafka Tutorials @ Learning Journal\",\"url\":\"https://github.com/LearningJournal/ApacheKafkaTutorials\"}]},\"Shell\":{\"name\":\"Shell\",\"results\":[{\"title\":\"server-configs-apache\",\"description\":\"Apache HTTP server boilerplate configs\",\"url\":\"https://github.com/h5bp/server-configs-apache\"}]},\"JavaScript\":{\"name\":\"JavaScript\",\"results\":[{\"title\":\"node-apac\",\"description\":\"node-apac - Node.js client for the Amazon Product Advertising API, including support of Request Signatures\",\"url\":\"https://github.com/dmcquay/node-apac\"}]},\"Unknown\":{\"name\":\"Unknown\",\"results\":[{\"title\":\"apache-spark-internals\",\"description\":\"The Internals of Apache Spark\",\"url\":\"https://github.com/japila-books/apache-spark-internals\"}]}}}";
System.out.println(json);
PrintWriter out = resp.getWriter();
out.write(json);
out.flush();
out.close();
}
}
页面：
<div class="ui search" id="search2">
<div class="ui icon input">
<input type="text" class="prompt" placeholder="搜索……">
<i class="search icon">i>
div>
<div class="results">div>
div>
<br>
JavaScript脚本：
$("#search2").search({//自动请求settings中的search动作
apiSettings:{
method:"post",
action:"searchData",
onResponse:function (res) {
console.info(res);
return res;
}
}
});
效果：
注：分类搜索，官方示例能调通，但参照官方示例写的上面示例没有调试成功，哪位朋友找到原因后请告诉我一下，无限感谢！