java - 使用ajax在java中实时搜索

问题描述

我想使用 ajax 在 java 中实现实时搜索。我创建了一些类，你可以在下面看到。但是我的浏览器抛出 sql 错误“消息请求处理失败；嵌套异常是 org.springframework.jdbc.BadSqlGrammarException：StatementCallback；错误的 SQL 语法 [SELECT * FROM movie WHERE movie_title LIKE '%null%'];嵌套异常是 org.postgresql。 util.PSQLException：错误：关系“电影”不存在”。我究竟做错了什么？我是否正确实施了实时搜索ajax？请帮我。

@Configuration
@PropertySource("classpath:db.properties")
@ComponentScan("******")
public class ApplicationConfig extends WebMvcConfigurationSupport {

    @Autowired
    private Environment environment;

    @Bean
    public DataSource dataSource() {
        return new HikariDataSource(hikariConfig());
    }

    @Bean
    public JdbcTemplate jdbcTemplate() {
        return new JdbcTemplate(dataSource());
    }

    @Bean
    public HikariConfig hikariConfig() {
        HikariConfig config = new HikariConfig();
        config.setJdbcUrl(environment.getProperty("db.url"));
        config.setDriverClassName(environment.getProperty("db.driver-class-name"));
        config.setPassword(environment.getProperty("db.password"));
        config.setUsername(environment.getProperty("db.username"));
        config.setMaximumPoolSize(environment.getProperty("db.hikari.max-pol-size", Integer.class));
        return config;
    }

    @Bean
    public FreeMarkerViewResolver freeMarkerViewResolver() {
        FreeMarkerViewResolver viewResolver = new FreeMarkerViewResolver();
        viewResolver.setPrefix("");
        viewResolver.setSuffix(".ftlh");
        viewResolver.setContentType("text/html;charset = UTF-8");
        return viewResolver;
    }

    @Bean
    public FreeMarkerConfigurer freeMarkerConfigurer() {
        FreeMarkerConfigurer configurer = new FreeMarkerConfigurer();
        configurer.setTemplateLoaderPath("/WEB-INF/ftlh/");
        return configurer;
    }
}

@Data
@AllArgsConstructor
@NoArgsConstructor
@Builder
public class Movie {
    private Long id;
    private String movieTitle;
}

@Repository
public class MovieRepositoryJdbcTemplateImpl implements MovieRepository {

    private final JdbcTemplate jdbcTemplate;

    public MovieRepositoryJdbcTemplateImpl(JdbcTemplate jdbcTemplate) {
        this.jdbcTemplate = jdbcTemplate;
    }


    private RowMapper<Movie> movieRowMapper = (row, rowNUmber) ->
            Movie.builder()
                    .id(row.getLong("id"))
                    .movieTitle(row.getString("movie_title"))
                    .build();

    @Override
    public List<Movie> findByMovieContains(String title) {
        return jdbcTemplate.query("SELECT * FROM movie WHERE movie_title LIKE '%" + title + "%'", movieRowMapper);
    }
}

@Service
public class MovieServiceImpl implements MovieService {

    private final MovieRepository movieRepository;

    @Autowired
    public MovieServiceImpl(MovieRepository movieRepository) {
        this.movieRepository = movieRepository;
    }

    @Override
    public List<Movie> search(String query) {
        return movieRepository.findByMovieContains(query);
    }
}

@Controller
public class LiveSearchController {

    @Autowired
    private MovieService movieService;

    @RequestMapping (value = "/movie", method = RequestMethod.GET, produces = MediaType.APPLICATION_JSON_VALUE)

    @ResponseBody
    public List<Movie> searchMovie(String title) {
        return movieService.search(title);
    }
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script
            src="https://code.jquery.com/jquery-3.6.0.js"
            integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
            crossorigin="anonymous"></script>
    <title>Live search</title>
    <script>
        $(document).ready(function () {
            $('#movieTitle').on('keyup', function() {
                let body = {
                    "movieTitle" : title,
                };
                    $.ajax({
                        type: "GET",
                        url: "http://localhost/movie",
                        data: JSON.stringify(body),
                        dataType: "json",
                        contentType: "application/json",
                        success: function (response) {
                            let html = '<tr>' +
                                '             <td>' + response['id'] + '</td>' +
                                '             <td>' + response['movieTitle'] + '</td>';
                            $('#usersTable > tbody:last-child').append(html);
                        },
                    });
            });
        });
    </script>
</head>
<body>
    <form action = "/movie" method="GET">
        <p><b>Введите название фильма</b></p>
        <input name="movieTitle" type = "text" placeholder="search movie title">
    </form>
</body>
</html>

标签： java

java - 使用ajax在java中实时搜索

问题描述

解决方案

推荐阅读