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.
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+'" />' );} );// DataTablevar 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="width: 200px;color: blue;">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;@Controllerpublic class AjaxRegisterController {@Autowiredprivate AjaxmDAO service;@RequestMapping(value = "/ajaxRegister", method = RequestMethod.GET)public String ajaxRegisterPageOpen() {return "ajaxRegister";}@RequestMapping(method = RequestMethod.GET, value = "/ajaxMList" ,produces = "application/json")public @ResponseBodyList<AjaxM> getAjaxmList() {return service.getAllAjaxMList();}}
