load form Fragment thymelef ajax spring boot - ajax

Question

I am working with spring boot and thymeleaf, I want to load a fragment with ajax. It loads well, but when sending it the fragment object is not sent with the main object.
Here is the code that I use.
Model
#Entity
#Table(name = "solicitudes")
public class Solicitud {
#Id
#GeneratedValue(strategy = GenerationType.AUTO)
#Column(name = "id_solicitud")
private Integer id;
#Column(name = "descripcion")
private String descripcion;
#ManyToOne
#JoinColumn(name = "id_persona") //,nullable=false
private Persona persona;
.
.
.
}
#Entity
#Table(name = "personas")
public class Persona {
#Id
#GeneratedValue(strategy = GenerationType.AUTO)
#Column(name = "id_persona")
private Long id;
#Column(name = "razon_social")
private String razonSocial;
#Column(name = "dni")
private Integer dni;
.
.
.
}
Controller
#RequestMapping(value = "/solicitudes/nuevo", method = RequestMethod.GET)
public ModelAndView newGet() {
ModelAndView modelAndView = new ModelAndView();
Solicitud solicitud = new Solicitud();
modelAndView.addObject("solicitud", solicitud);
modelAndView.setViewName("solicitudes/solicitudForm");
return modelAndView;
}
//Controller return fragment
#RequestMapping(value = "/solicitudes/{dni}", method = RequestMethod.GET)
public String showPersonaFragment(Model model, #PathVariable("dni") String dni) {
Persona persona = personaService.findPersonaByDni(Integer.parseInt(dni));
model.addAttribute("obraSociales", obraSocialService.listAllObraSocial());
model.addAttribute("pcias", pciaService.listAllProvincia());
model.addAttribute("localidades", localidadService.getAllLocalidades());
model.addAttribute("nivelesIntruccion", nivelIntruccionServices.listAllNivelInstruccion());
model.addAttribute("persona", persona);
return "solicitudes/formPersonaFrag:: header";
}
solicitudForm
<div class="form-group">
<div class="col-sm-5">
<label for="dni">Nro. de Documento</label>
<input type="number" id="dni" placeholder="Nro. de Documento."
class="form-control" required="required"/>
</div>
<div class="col-sm-5">
<br> <p id="mensajePersona" class="help-block"></p>
</div>
</div>
<div class="tab-pane" id="datosPersonales">
<div id="personaFragment">
<div class="alert alert-danger" role="alert">
<span>Debe ingresar el Nro. de Documento</span>
</div>
</div>
<div class="row margin-bottom"></div>
</div>
formPersonaFrag
<div th:fragment="formPersonaFrag">
<div th:fragment="header">
<div>
<fieldset id="datos_personales">
<div>
<input type="hidden" th:field="*{persona.id}" class="form-control" />
</div>
<div class="form-group">
<div class="col-sm-9">
<label for="razonSocial">Apellido y Nombre</label>
<div th:if="${persona.razonSocial==null}">
<input type="text" th:field="*{persona.razonSocial}" placeholder="Apellido y Nombre"
class="form-control" required="required" />
<div class="has-error">
<label th:if="${#fields.hasErrors('persona.razonSocial')}"
th:errors="*{persona.razonSocial}"
class="control-label"></label>
</div>
</div>
<div th:if="${persona.razonSocial!=null}">
<span th:text="*{persona.razonSocial}" ></span>
</div>
</div>
</div>
</fieldset>
</div>
</div> </div>
Ajax load fragment
$('#dni').change(function (e) {
var datos = $("#dni").val();
var url = '/solicitudes/' + datos;
console.log(url);
$("#personaFragment").load(url,$("#personaFragment").serialize());
$.ajax({
type: "GET",
contentType: "application/json",
url: "/api/persona/dni/" + datos,
data: JSON.stringify(datos),
dataType: 'json',
cache: false,
timeout: 600000,
success: function (data) {
$('#mensajePersona').empty();
},
error: function (e) {
$('#mensajePersona').empty();
console.log("ERROR : ", e);
}
});
in debug object solicitud.persona is null
debug app