如何在自定義模式對話框中加載通過ajax調用返回的json數據

Question

我是新手，想支持的是，我有一個打開自定義模態對話框（而不是引導模態）的鏈接，如下所示

<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. 聚焦時，數據將顯示在表單輸入字段中，如何在沒有聚焦的情況下填充數據？

我的RestController

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

    }
}

Answer 1

在成功回調中，您嘗試獲取頁面中不存在的ID

取代這個

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

有了這個

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