13 Eylül 2016 Salı

Spring MVC , Ajax ve jQuery Kullanımı – 1


4 kısımdan oluşacak olan Spring MVC , Ajax ve jQuery kullanımı yazı dizisinde , Ajax ve jQuery teknoljilerinin Spring MVC ile nasıl kullanıldığını örnek bir ekran üzerinden inceleyeceğiz.

İlk kısımda Semantic UI ile jQuery datatable kullanımına bakıp , ikinci kısımda ise Ajax POST ile bu datatable’a kayıt atma işlemi üzerinde duracağım.
Senaryomuzu oluşturduğumuza göre artık kodlamaya geçebiliriz.

ajaxRegister.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="s"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"/>
<script src="http:////code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#ajaxmt').dataTable( {
 "ajax": {
 "url""/SpringDispatcherServlet/ajaxMList",
 "dataSrc"""
 },
 "bInfo" : false,
 "columns": [
 { "mData""adAjax" },
 { "mData""soyadAjax" }
 ],
 "oLanguage" : {
 "sLengthMenu" : "_MENU_ ",
 "sSearch" : "<span class='add-on' display:none;><i class='icon-search' ></i>    </span>Ara:",
 "sZeroRecords" : "Kayıt Bulunamadı",
  oPaginate: {
   "sFirst""İlk",
   "sLast""Son",
   "sNext""Sonraki",
   "sPrevious""Önceki"
 },
},
"iDisplayLength" : 5,
"aLengthMenu" : [
[ 5, 10 ],
[ 5, 10] ],
"aaSorting" : [ [ 0, 'asc' ] ]
});
$('#ajaxmt thead tr#filterrow th').each( function () {
 var title = $('#jtab thead th').eq( $(this).index() ).text();
 $(this).html( '<input type="text" style="height:20px;"    onclick="stopPropagation(event);" placeholder="'+title+'" />' );
} );
// DataTable
var table = $('#ajaxmt').DataTable();
// Apply the filter
$("#ajaxmt thead input").on( 'keyup change'function () {
 table
     .column( $(this).parent().index()+':visible' )
     .search( this.value )
     .draw();
 } );
function stopPropagation(evt) {
  if (evt.stopPropagation !== undefined) {
     evt.stopPropagation();
   } else {
     evt.cancelBubble = true;
  }
 } 
});
</script>
</head>
<body>
<hr>
 <div align="center">
  <table id="ajaxmt" class="ui celled table">
    <thead>
      <tr id="filterrow">
        <th>Ad</th>
        <th>Soyad</th>
     </tr>
     <tr>
       <th style="width200px;colorblue;">Ad</th>
       <th style="width:300px;color:blue;">Soyad</th>
     </tr>
   </thead>
  </table>
 </div>
</body>
</html>



jsp sayfamızı yukarıda ki gibi yazdıktan sonra geriye url kısmında da belirttiğimiz üzere controller sınıfımızda ki metodu yazmamız gerekir. Bu sınıf aşağıdaki gibi yazılır.


AjaxRegisterController.java

package com.mesutemre.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.mesutemre.dao.AjaxmDAO;
import com.mesutemre.model.AjaxM;

@Controller
public class AjaxRegisterController {

@Autowired
private AjaxmDAO service;

@RequestMapping(value = "/ajaxRegister", method = RequestMethod.GET)
public String ajaxRegisterPageOpen() {
      return "ajaxRegister";
}

@RequestMapping(method = RequestMethod.GET, value = "/ajaxMList" ,
produces = "application/json")
public @ResponseBody
List<AjaxM> getAjaxmList() {
     return service.getAllAjaxMList();
  }
}





Hiç yorum yok:

Yorum Gönder