首页 > 解决方案 > 加载形式 Fragment thymelef ajax spring boot

问题描述

我正在使用spring boot和thymeleaf,我想用ajax加载一个片段。它加载得很好,但是在发送它时,片段对象不会与主对象一起发送。这是我使用的代码。

模型

@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;
    .
    .
    .
}    

控制器

@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";
    }

请求表格

<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>

形式PersonaFrag

<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 加载片段

$('#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);
        }
});

在调试对象 solicitud.persona 中为空调 试应用程序

标签: ajaxspring-bootthymeleaf

解决方案


推荐阅读