Spring Thymealef Ajax update fragmenet - ajax

Question

I'm using spring boot MVC, and have a part that I make an ajax request to update a collection of products for merchandise shipment, but when I post it is displaying json on the screen instead of updating the fragment:
<th:block th:if="${expedicao.tipoRegistro eq 'A' or expedicao.tipoRegistro eq 'X'}">
<form action="#" th:action="#{/expedicao/buscaprod}" method="post"
name="formBusca">
<input type="hidden" th:name="${_csrf.parameterName}"
th:value="${_csrf.token}" /> <label th:text="Ean13">Ean13</label>
<input type="radio" name="tipoCod" id="tipoCod" value="ean13" /> <label
th:text="Dun14">Dun14</label> <input type="radio" name="tipoCod"
id="tipoCod" value="dun14" /> <input type="text"
name="FieldCodigo" class="form-control" placeholder="Codigo Barras"
id="FieldCodigo" value="" autofocus="autofocus" required="required" />
<input type="hidden" name="id_expedicao" id="id_expedicao"
th:value="${expedicao.id}" />
<button type="submit" value="Buscar">Buscar</button>
</form>
</th:block>
<div th:fragment="info-success" xmlns:th="http://www.thymeleaf.org" th:remove="tag">
<div class="modal-body row" id="coleta">
<div th:replace="expedicao/coleta::coleta"></div>
</div>
</div>
</div>
this is my ajax
<th:block layout:fragment="scripts">
<script th:inline="javascript">
/*<![CDATA[*/
$(function() {
$.ajaxSetup({
headers : {
'X-CSRF-Token' : $('meta[name=_token]').attr('content')
}
});
$('form#formBusca').submit(
function(e) {
e.preventDefault();
$.ajax({
type : "POST",
contentType : "application/json",
url : 'expedicao/buscaprod',
data : $('form#formBusca').serialize(),
dataType : 'json',
success : function(result) {
if(result.status == "Done"){
carregarColeta(result.data.id);
if (result.data.situacao == 'B'
|| result.data.situacao == 'C') {
$('form#formBusca').remove();
}
},
error : function(jqXHR, textStatus, errorThrown) {
console.log(JSON.stringify(jqXHR));
console.log("AJAX error:" + textStatus + ' : '
+ errorThrown);
}
});
$('input[name=FieldCodigo]').val('');
});
});
function carregarColeta(idexpedicao) {
$.ajax({
method : 'POST',
url : 'expedicao/detalhe',
data : {
'id_expedicao' : idexpedicao
},
success : function(retorno) {
$('#coleta').empty().html(retorno);
},
error : function(jqXHR, textStatus, errorThrown) {
console.log(JSON.stringify(jqXHR));
console.log("AJAX error:" + textStatus + ' : '
+ errorThrown);
}
});
}
when a execute the post method it go to my controller execute the logic and return the json of the object updated, and instead of update the fragment calling the JS function carregaExpedicao.. its dislpay the json on the screen, and change the url
this is my controller
#Controller
public class ExpedicaoController {
#RequestMapping(value = "/expedicao/buscaprod", method = RequestMethod.POST)
#ResponseBody
public Response updateProdutoColetado(
#RequestParam(name = "id_expedicao") String id_expedicao,
#RequestParam(name = "FieldCodigo") String FieldCodigo,
Model model, HttpSession session) {
//Minhas regras
model.addAttribute("expedicao", expedAndamento);
return new Response("Done", expedAndamento);
}
#RequestMapping(value = "/expedicao/detalhe")
public String detalhe(#RequestParam(name = "id_expedicao") String id_expedicao, Model model, HttpSession session) {
model.addAttribute("expedicao", expedAndamento);
return "expedicao/coleta";
}
}
Fixed:
error 1 => id on the form
error 2 => missing csrf param on ajax