按钮触发控制器的另一种方法

时间:2019-03-26 21:28:04

标签: javascript spring-boot thymeleaf

这是我的表格;

<form class="form-inline" id="createjobform" method="POST">
    <div class="form-group">
        <input type="text" class="form-control" id="title" placeholder="Enter Title" name="title" style="margin-right: 16px" />
    </div>
    <div class="form-group">
        <input type="text" class="form-control" id="description" placeholder="Enter Description" name="description" style="margin-right: 16px" />
    </div>
    <div class="form-group">
        <input type="number" class="form-control" id="nopth" placeholder="Number Of People To Hire" name="nopth" style="margin-right: 16px" />
    </div>
    <div class="form-group">
        <input type="date" class="form-control" id="lastDate" placeholder="Last Date" name="lastDate" title="Last Date" style="margin-right: 16px" />
    </div>
    <div class="form-group">
        <input type="text" readonly="readonly" class="form-control" id="listid" placeholder="ID" name="listid" title="ID of the list which associated" style="margin-right: 16px" th:value="${findOneList.id}" />
    </div>
    <button type="submit" id="somebutton">Create</button>
</form>

这是我的外部javascript; (我将其包含在head标签中,关于此内容为np。)

$(document).ready(function() {
var listid : $("#listid").val();
 $("#createjobform").submit(function(event) {
    event.preventDefault();
    ajaxPost();
});
function ajaxPost(){
    var formData = {
            title : $("#title").val(),
            description : $("#description").val(),
            nopth : $("#nopth").val(),
            lastDate : $("#lastDate").val(),
        }
    $.ajax({
        type : "POST",
        contentType : "application/json",
        url : "/createJob?listid="+listid,
        data : JSON.stringify(formData),
        success : function() {
            $("#postResultDiv").hide().html("<div class='alert alert-success'>" +
                    "<strong>Job Created Succesfully.</strong></div>").slideDown("slow");   
            $("#getResultDiv2").hide().load(location.href + " #getResultDiv2>*", "").fadeIn("slow");
            $(".accordionn-section-title").click();
            console.log(result);
        },
        error : function(e) {
            $("#postResultDiv").html("<div class='alert alert-danger'>" +
                    "<strong>Unexpected Error.</strong></div>");
            console.log("ERROR: ", e);
        }
    });
    resetData();
}
function resetData(){
    $("#title").val("");
    $("#description").val("");
    $("#nopth").val("");
    $("#lastDate").val("");
}
});

那个触发该方法的按钮;

@RequestMapping(value = "/oneList", method = RequestMethod.GET)
public ModelAndView oneList(@RequestParam(value = "id", required = true) Long id, HttpServletResponse hsr) throws IOException {
    mavHomepage.addObject("oneJobList", jobsService.findAllJobsById(id));
    mavHomepage.addObject("findOneList", listsService.findOne(id));
    mavHomepage.addObject("mod", "VIEW_ONELIST");
    return mavHomepage;
}

代替这个;

@PostMapping(value = "/createJob")
public void createJob(@RequestBody Jobs jobs, @RequestParam(value = "listid", required = true) Long listid, HttpServletResponse hsr) throws IOException {

    Lists listttt = listsService.findOne(listid);
    jobs.setLists(listttt);
    jobsService.save(jobs);

    // mavHomepage.addObject("oneJobList", jobsService.findAllJobsById(listid));
    // mavHomepage.addObject("findOneList", listsService.findOne(listid));
    mavHomepage.addObject("mod", "VIEW_ONELIST");
    // hsr.sendRedirect("/oneList?id=" + listid);
    hsr.sendRedirect("/homepage");

}

那我在这里想念什么?当我点击按钮时;我期望http://localhost:8080/oneList?id=7

时,我的地址行变成http://localhost:8080/createJob?id=7

0 个答案:

没有答案