2016-03-07 31 views
0

我是新手,想青睐是我有一个链接,打开一个自定义模式对话框(不是引导模式)如下如何加载JSON数据通过AJAX调用返回

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

    } 
} 

回答

0

在成功回调你设法让这不是在你的网页存在ID

与此

替换此

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

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