投稿APIをフェッチする方法は？

Question

データベースからデータを返すAPIがあります。

これは、コントローラ部はこのようになります

  <form action="<c:url value="/getCandidateDetails"/>" method="post"> 
       <div class="form-group"> 
        <label for="masterId">Master Id:</label><br/> 
        <input type="text" id="masterId" 
path="studentmasterid" name="studentmasterid" class="form-control"> 
        </div> 
        <input type="hidden" value="Pending" name="paymentStatus"/> 
        <button class="btn btn-primary" type="submit" id="search">Search</button> 
       </form> 

私のフォームです。

@RequestMapping(value = "/getCandidateDetails", method = RequestMethod.POST) 
public @ResponseBody List<CandidateappearagainstadvtcodeEntity> getCandidateDetails 
(Model model, @RequestParam("studentmasterid") String studentmasterid, 

@RequestParam("paymentStatus")String paymentstatus){ 
    List<CandidateappearagainstadvtcodeEntity> candidates= 
    candidateappearagainstadvtcodeEntityRepository.findByStudentmasteridAndPaymentstatus 
    (studentmasterid,paymentstatus); 
      return candidates; 
     } 

あなたは私のフォームは2つのstudentmasteridパラメータと支払いの詳細を送信見ることができるように、それは、JSON

[{"id":393,"advertisementcode":"15206-15206/2071- 
72","ageonlastdateday":0,"ageonlastdatemonth":0,"ageonlastdateyear":0, 
"applicationnumber":"38483928614","attendancestatus":"Pending", 
"candidatefirstname":"RAJENDRA","dateofbirthinnepali":null, 
"interviewmarksallocationstatus":null,"interviewscheduledstatus":null, 
"mothername":"धनराज्य लक्ष्मी पाण्डे", 
"candidatenameinnepali":"राजेन्द्रपाण्डे", 
"marksobtained":0.0,"optionalpaperid":"NA","panelname":null, 
"paymentstatus":"Pending","studentmasterid":"1161"}] 

をスローします。 検索ボタンをクリックするたびに、postメソッドでapiにヒットし、返されたデータを取得し、jspページで表示する必要があります。どのように私はそれをajaxを使用して行うことができますか？

Answer 1

あなたのフォームは現在HTML POSTを行っています。代わりにAJAXを使うつもりです。これは、あなたがjQueryの中でそれを行うことができる方法である。

HTML

  <form id="myform" action="<c:url value="/getCandidateDetails"/>" method="post"> 
       <div class="form-group"> 
        <label for="masterId">Master Id:</label><br/> 
        <input type="text" id="masterId" 
path="studentmasterid" name="studentmasterid" class="form-control"> 
        </div> 
        <input type="hidden" value="Pending" name="paymentStatus"/> 
        <button class="btn btn-primary" type="submit" id="search">Search</button> 
       </form> 

Javascriptを

$("#myform").submit(function(submitEvent) { 
    submitEvent.preventDefault(); //Prevents HTML POST 
    var items = $(this).find("[name]"); //Finds all the named items in the form 
    //Builds the data object 
    var data = {}; 
    for (var index in items) { 
     data[items[index].prop("name")] = items[index].val(); 
    } 
    $.ajax({ 
     url: $(this).prop("action"), 
     data: data, 
     method: "POST" 
    }).done(function(responseData) { 
     //Do something with the response you have received from the server. 
    }); 
}); 

あなたはプレーンなJavascriptを好む場合、あなたはformにonsubmitハンドラを追加することで同じことを達成することができます " Javascriptオブジェクト

<form onsubmit="event.preventDefault(); sendAJAX();"> 

とする必要がありますAJAX in plain Javascriptを送信するとsendAJAXとなります。