AJax技术

Spring Boot教程(2)

字号+ 作者:H5之家 来源:H5之家 2017-04-03 15:01 我要评论( )

用于初始化一些用户进行搜索的服务。文件:UserService.java 如下所示 - package com.yiibai.services;import com.yiibai.model.User;import org.springframework.stereotype.Service;import javax.annotation.Post

用于初始化一些用户进行搜索的服务。文件:UserService.java 如下所示 -

package com.yiibai.services; import com.yiibai.model.User; import org.springframework.stereotype.Service; import javax.annotation.PostConstruct; import java.util.ArrayList; import java.util.List; import java.util.stream.Collectors; @Service public class UserService { private List<User> users; // Love Java 8 public List<User> findByUserNameOrEmail(String username) { List<User> result = users.stream().filter(x -> x.getUsername().equalsIgnoreCase(username)).collect(Collectors.toList()); return result; } /*public List<User> findByUserNameOrEmail(String username, String email) { List<User> result = new ArrayList<User>(); for (User user : users) { if ((!StringUtils.isEmpty(username)) && (!StringUtils.isEmpty(email))) { if (username.equals(user.getUsername()) && email.equals(user.getEmail())) { result.add(user); continue; } else { continue; } } if (!StringUtils.isEmpty(username)) { if (username.equals(user.getUsername())) { result.add(user); continue; } } if (!StringUtils.isEmpty(email)) { if (email.equals(user.getEmail())) { result.add(user); continue; } } } return result; }*/ // Init some users for testing @PostConstruct private void iniDataForTesting() { users = new ArrayList<User>(); User user1 = new User("maxsu", "password111", "maxsu@yahoo.com"); User user2 = new User("yiflow", "password222", "yflow@yahoo.com"); User user3 = new User("minaxu", "password333", "minaxu@yahoo.com"); User user4 = new User("minalee", "password333", "minalee@yahoo.com"); User user5 = new User("yiiflow", "password333", "yiiflow@gmail.com"); users.add(user1); users.add(user2); users.add(user3); users.add(user4); users.add(user5); } }

Spring Boot启动器(程序入口),参考以下代码实现。文件:SpringBootWebApplication.java 如下所示 -

package com.yiibai; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; @SpringBootApplication public class SpringBootWebApplication { public static void main(String[] args) throws Exception { SpringApplication.run(SpringBootWebApplication.class, args); } } 4. HTML表单+ jQuery Ajax

一个简单的HTML表单,用 bootstrap 框架装饰。
文件:ajax.html

<!DOCTYPE html> <html xmlns:th=""> <head> <title>Spring Boot Ajax实例</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <link rel="stylesheet" type="text/css" href="webjars/bootstrap/3.3.7/css/bootstrap.min.css"/> </head> <body> <nav class="navbar navbar-inverse"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="">易百教程</a> </div> </div> </nav> <div class="container" style="min-height: 500px"> <div class="starter-template"> <h1>Spring Boot AJAX 示例</h1> <div id="feedback"></div> <form class="form-horizontal" id="search-form"> <div class="form-group form-group-lg"> <label class="col-sm-2 control-label">用户名:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="username"/> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" id="bth-search" class="btn btn-primary btn-lg">搜索 </button> </div> </div> </form> </div> </div> <div class="container"> <footer> <p> <a href="">Yiibai.com</a> 2017 </p> </footer> </div> <script type="text/javascript" src="webjars/jquery/2.2.4/jquery.min.js"></script> <script type="text/javascript" src="js/main.js"></script> </body> </html>

获取HTML表单,并通过JSON.stringify将搜索条件转换为JSON格式,并通过jQuery.ajax发送POST请求。
文件:main.js 如下所示 -

$(document).ready(function () { $("#search-form").submit(function (event) { //stop submit the form, we will post it manually. event.preventDefault(); fire_ajax_submit(); }); }); function fire_ajax_submit() { var search = {} search["username"] = $("#username").val(); //search["email"] = $("#email").val(); $("#btn-search").prop("disabled", true); $.ajax({ type: "POST", contentType: "application/json", url: "/api/search", data: JSON.stringify(search), dataType: 'json', cache: false, timeout: 600000, success: function (data) { var json = "<h4>Ajax Response</h4><pre>" + JSON.stringify(data, null, 4) + "</pre>"; $('#feedback').html(json); console.log("SUCCESS : ", data); $("#btn-search").prop("disabled", false); }, error: function (e) { var json = "<h4>Ajax Response</h4><pre>" + e.responseText + "</pre>"; $('#feedback').html(json); console.log("ERROR : ", e); $("#btn-search").prop("disabled", false); } }); } 5. 运行示例

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Ajax基础教程.pdf

    Ajax基础教程.pdf

    2017-04-02 15:09

  • python爬虫学习目录 FindSpace

    python爬虫学习目录 FindSpace

    2017-03-30 14:01

  • SpringMvc的ajax

    SpringMvc的ajax

    2017-03-29 12:01

  • (利澳官方网)ITeye Java编程 Spring框架 Ajax技术 agile敏捷软件

    (利澳官方网)ITeye Java编程 Spring框架 Ajax技术 agile敏捷软件

    2017-03-26 16:00

网友点评
<