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

Posted 梁云亮

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Semantic UI 之 网络请求 #yyds干货盘点#相关的知识，希望对你有一定的参考价值。

页面框架代码

<!DOCTYPE html>
<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属性设置参数的值

页面：

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

效果：

注：分类搜索，官方示例能调通，但参照官方示例写的上面示例没有调试成功，哪位朋友找到原因后请告诉我一下，无限感谢！

以上是关于Semantic UI 之 网络请求 #yyds干货盘点#的主要内容，如果未能解决你的问题，请参考以下文章

15Semantic-UI之导航

14Semantic-UI之菜单样式

13Semantic-UI之表格与表单

19Semantic-UI之图片的动画效果

Semantic UI 之 下拉菜单 dropdown

16Semantic-UI之模态窗口