Semantic UI 之网络请求#yyds干货盘点# _Semantic

卧疾丰暇豫，翰墨时间作。这篇文章主要讲述Semantic UI 之网络请求#yyds干货盘点#相关的知识，希望能为你提供帮助。
页面框架代码

< !DOCTYPE html> < html lang="en"> < head> < meta charset="UTF-8"> < title> 搜索< /title> < link rel="stylesheet" href="https://www.songbingjia.com/android/semantic-ui/semantic/dist/semantic.min.css"> < script type="text/javascript" src="https://www.songbingjia.com/android/js/jquery3.3.1.js"> < /script> < script type="text/javascript" src="https://www.songbingjia.com/android/semantic-ui/semantic/dist/semantic.min.js"> < /script> < script src="https://www.songbingjia.com/android/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属性设置参数的值
页面：

< !--通过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();

按钮添加部门
【Semantic UI 之网络请求#yyds干货盘点#】页面：

< 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"> < inputtype="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"> < inputtype="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; );

效果：