如何在自定义模式对话框中加载通过 AJAX 调用返回的 JSON 数据

how to load json data returned via ajax call in custom modal dialog

本文关键字:调用 AJAX 返回 数据 JSON 加载 自定义 模式 对话框      更新时间:2023-09-26

我是新手,想赞成的是我有一个链接来打开自定义模式对话框(不是引导模式),如下所示

<a href="#edit_quiz"></a>
<div class="uk-modal" id="edit_quiz">
    <div class="uk-modal-dialog">
    <form:form method="post" commandName="quiz" htmlEscape="false" cssClass="uk-form-stacked">
            <div class="uk-margin-medium-bottom">
                <label for="task_title">Quiz Title</label>
                <form:hidden path="quizId"/>
                <form:input type="text" cssClass="md-input" id="quiz_title" path="quizTitle"/>                    
            </div>                
            <div class="uk-margin-medium-bottom">
                <label for="task_description">Description</label>
                <form:textarea cssClass="md-input" id="quiz_description" path="quizDescription"/>
            </div>
            <div class="uk-modal-footer uk-text-right">
                <button type="button" class="md-btn md-btn-flat uk-modal-close">Close</button>
                <input type="submit" class="md-btn md-btn-flat md-btn-flat-primary" id="quiz_new_save" value="Update Quiz"/>
            </div>
        </form:form>
    </div>
</div>

最后我的 ajax 脚本是

<script type="text/javascript">
    $('#edit_quiz').click(function (event){ 
        event.preventDefault(); 
        $.ajax({
            type : "GET",
            url : "${pageContext.request.contextPath}/quiz/1",
            data : {
                "quizTitle" : "${quizTitle}"
            },
            success: function(data){
                $('#edit_quiz_title').val(data.quizTitle);
            }
        })
        return false; //for good measure
   });</script>

这将打开对话框,但存在一些问题:

  1. 数据使用 url : "${pageContext.request.contextPath}/quiz/1",我想成为这种动态手段 有没有办法从测验列表中获取所选测验的 id 并以模态形式相应地获取数据?

  2. 数据在
  3. 聚焦时显示在表单输入字段中 如何在没有焦点的情况下填充数据?

我的休息控制器

@RestController
public class AdminRestController {
    @Autowired
    private QuizService quizService;
    @RequestMapping(value = "/quiz_list/", method = RequestMethod.GET, headers="Accept=*/*",  produces="application/json")
    public ResponseEntity<Set<Quiz>> quizList() {
        Set<Quiz> quizs = quizService.findAllQuizzes();
        if(quizs.isEmpty()){
            return new ResponseEntity<Set<Quiz>>(HttpStatus.NO_CONTENT);
        }else{
            return new ResponseEntity<Set<Quiz>>(quizs, HttpStatus.OK);
        }
    }
    @RequestMapping(value = "/quiz/{id}", method = RequestMethod.GET, headers="Accept=*/*",  produces="application/json")
    public ResponseEntity<Quiz> quizById(@PathVariable("id") Long quizId) {
        Quiz quiz = quizService.getQuizById(quizId);
        if(quiz == null){
            return new ResponseEntity<Quiz>(HttpStatus.NO_CONTENT);
        }else{
            return new ResponseEntity<Quiz>(quiz, HttpStatus.OK);
        }
    }
}

在成功回调中,您尝试获取页面中不存在的ID

替换此

$('#edit_quiz_title').val(data.quizTitle);

有了这个

$('#quiz_title').val(data.quizTitle);