Fatal编程技术网

Javascript MVC中的ajax？

javascript spring spring-mvc

Javascript MVC中的ajax？,javascript,spring,spring-mvc,thymeleaf,Javascript,Spring,Spring Mvc,Thymeleaf,如何在MVC中使用AJAX在主页中获取片段 我有Spring MVC和Thymeleaf模板引擎。我是百里香的初学者 我想知道如何使用ajax获得网站的一部分，如何向控制器发出简单的ajax请求，并最终只呈现模板（片段）的一部分 我试图将job.html片段返回到home.html中 我不想使用jquery，我想使用普通的javascript 我想我需要使用第一个克隆所需的div第二个空主div第三个将克隆附加到主div中 下面是我的控制器的外观 @GetMapping("/ge

如何在MVC中使用AJAX在主页中获取片段

我有Spring MVC和Thymeleaf模板引擎。我是百里香的初学者

我想知道如何使用ajax获得网站的一部分，如何向控制器发出简单的ajax请求，并最终只呈现模板（片段）的一部分

我试图将job.html片段返回到home.html中

我不想使用jquery，我想使用普通的javascript

我想我需要使用第一个克隆所需的div第二个空主div第三个将克隆附加到主div中

下面是我的控制器的外观

   @GetMapping("/generalization")
    public String selectSection(Model model) {
        List<DateasDto> section = generalizationService.getSection();
        model.addAttribute("section", section);
        return "home";
    }

    @GetMapping("/organisations/{id}/general")
    public String getGeneralSuccess(@PathVariable String id , Model model){
        List<AssessmentDto> gen = generalizationService.getGeneral(id);
        model.addAttribute("gen" , gen);
        return "Job";
    }

<body>
<script type="text/javascript" th:src="@{/js/working.js}"></script>

<form onsubmit="getGen(event)" >

    <div class="form-group" >
        <label for="SelectSection">Select Section</label>
        <select  class="form-control" id="SelectSection" onchange="sectionChangeSelected()">
        <option value="">Select section</option>
        <option th:each="section: ${section}"
                th:text="${section.name}"
                th:value="${section.id}"
        ></option>
        </select>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

<div id = "table" ></div>

<div th:replace = "Job.html :: myTable " ></div>
</body>

    const getGen= (event) => {
        event.preventDefault()
        console.log("get assessment called")
        let id= document.getElementById("SelectSection").value;
        console.log(id)
        let url = `/org/subjects/${id}/assessments`
        fetch(url) 
        .then(function() {
            
        })
        .catch(function() {
            
        });
    }

<body>

<div th:fragment = "myTable" >
    <table>
            <thead>
                <tr>
                    <td >Name</td>
                    <td >Date</td>
                </tr>
            </thead>
            <tbody>
                <tr th:each="gen : ${gen}">
                    <td th:text="${gen.Name}"></td>
                    <td th:text="${gen.Date}"></td>
                </tr>
            </tbody>
    </table>
</div>

</body>
下面是我的Job.html的样子

   @GetMapping("/generalization")
    public String selectSection(Model model) {
        List<DateasDto> section = generalizationService.getSection();
        model.addAttribute("section", section);
        return "home";
    }

    @GetMapping("/organisations/{id}/general")
    public String getGeneralSuccess(@PathVariable String id , Model model){
        List<AssessmentDto> gen = generalizationService.getGeneral(id);
        model.addAttribute("gen" , gen);
        return "Job";
    }

<body>
<script type="text/javascript" th:src="@{/js/working.js}"></script>

<form onsubmit="getGen(event)" >

    <div class="form-group" >
        <label for="SelectSection">Select Section</label>
        <select  class="form-control" id="SelectSection" onchange="sectionChangeSelected()">
        <option value="">Select section</option>
        <option th:each="section: ${section}"
                th:text="${section.name}"
                th:value="${section.id}"
        ></option>
        </select>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

<div id = "table" ></div>

<div th:replace = "Job.html :: myTable " ></div>
</body>

    const getGen= (event) => {
        event.preventDefault()
        console.log("get assessment called")
        let id= document.getElementById("SelectSection").value;
        console.log(id)
        let url = `/org/subjects/${id}/assessments`
        fetch(url) 
        .then(function() {
            
        })
        .catch(function() {
            
        });
    }

<body>

<div th:fragment = "myTable" >
    <table>
            <thead>
                <tr>
                    <td >Name</td>
                    <td >Date</td>
                </tr>
            </thead>
            <tbody>
                <tr th:each="gen : ${gen}">
                    <td th:text="${gen.Name}"></td>
                    <td th:text="${gen.Date}"></td>
                </tr>
            </tbody>
    </table>
</div>

</body>



名称
日期
以下是如何在服务器端呈现HTML并在Ajax调用中异步返回：在Ajax调用中，您可以获取返回的HTML并附加到占位符div

    @GetMapping(value = "/theUrl")
    public String aMethod() {
        return "theFileName :: fragmentName "; //THIS
    }
完整示例：

弹簧控制器：

@Controller
class Ctrl {
    @GetMapping("/main")
    public String index() {
        return "mainPage";
    }
    @GetMapping(value = "/getMoreMessage")
    public String moreMessage(Model m) {
        m.addAttribute("msg", "Server time is " + ZonedDateTime.now());
        return "frag/ajaxPart :: time-info ";
    }
}
参考资料/templates/frag/ajaxPart.html中的片段：

<div th:fragment="time-info" class="tooltip">
    <H2>Received from server:</H2>
    <span th:text="${msg}"></span>
</div>
谢谢@gtiwari它帮了我很多。我想问的是，如果不使用javascript，我是否可以使用
th:replace或th:insert来使用片段，并且页面不应该刷新。Thymeleaf在服务器端执行渲染。从服务器中提取数据而不刷新页面的唯一方法是使用Ajax调用。我回答中的代码使用的是Ajax操作。它不会刷新页面。