Levent Yıldız: Spring framework + Jquery + Ajax ile basit bir post işlemi.

Herkese merhaba, hatırlarsanız blog yazmaya başlarken bir karar almıştım ve aşama aşama sizlerle birlikte proje yapmayı planlıyordum. Üzülerek belirtiyorum ki bu yazım projeye başladığımı haber veren bir paylaşım içermemektedir. Aksine iş yoğunluğumdan dolayı bir süre daha bu proje ertelenecektir. Burada altını çizmem gereken bir durum var vazgeçmedim sadece iş yoğunluğumdan dolayı bu projeyi erteledim. Evet arkadaşlar sizlere sıfırdan bir projeyi adım adım(ekran görüntüsü + yazı + kaynak kod şekline) anlatacağım söz :) .

Daha fazla yazıyı uzatmadan geçen süre içerisinde vakit buldukça aldığım notlarımı düzenleyerek paylaşmak istiyorum ki Türkçe kaynak sıkıntısı yaşayan arkadaşların kendini geliştirmesine katkıda bulunmuş ve bu yolda yollarına bir ışık tutmuş olayım.

Bu yazımda bir Jsp projesinde form değerlerinin nasıl POST edileceğini anlatacağım.

Kullanılan teknolojiler:

- IntelliJ idea

- Java

- Spring framework

- Jquery

- Ajax

Her zamanki gibi web tabanlı Spring MVC projemizi oluşturuyoruz. Projenin bitmiş hali aşağıdaki gibi olacaktır:

Öncelikle model adlı paketin altında Person adında bir class oluşturuyoruz(POJO). İçinde sadece değişkenler, getter ve setter methodları olan classlara POJO(Plain Old Java Objects) deniyor.

Com.company.model / Person

package com.company.model;

public class Person {

private String firstname;

private String lastname;

private String email;

public String getFirstname() {

return firstname;

}

public void setFirstname(String firstname) {

this.firstname = firstname;

}

public String getLastname() {

return lastname;

}

public void setLastname(String lastname) {

this.lastname = lastname;

}

public String getEmail() {

return email;

}

public void setEmail(String email) {

this.email = email;

}

İkinci olarak index.jsp sayfasını aşağıdaki şekilde düzenliyoruz. Bu sayfada basic bir form var ve jquery ile form elementlerine ulaşarak (Jquery selector) ajax ile formu post ediyoruz ve Springin json formatında döndürdüğü sonuçları ekrana yazdırıyoruz.

Burada hem zaman kaybetmemek hemde yeniden tekerleği keşfetmemek adına görüntünün otomatik oluşması için bootstrap kullanacağım siz isterseniz kendi tasarımınızı oluşturabilirsiniz. Bootstrap linkleri aşağıdadır.

src\main\webapp\WEB-INF\pages\index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

<%--bootstrap css--%>

<%--bootstrap js--%>

<%--jquery js--%>

</head>

<body>

<style>

.personDiv{ margin:0px auto; margin-top: 10px; padding:20px; width: 50%; border: 1px solid #000; }

</style>

$( document ).ready(function() {

$("#btnFormPost").click(function () {

alert("clicked");

$.ajax({

type: "post",

dataType: "json",

url: "http://localhost:8080/person/add.htm",

data:'firstname=' + $("#firstname").val() + "&lastname=" + $("#lastname").val() + "&email=" + $("#email").val(),

success: function(response){

$("#resFirstName").text(response["firstname"]);

$("#resLastName").text(response["lastname"]);

$("#resEmail").text(response["email"]);

error: function(){

alert('Post İşlemi Esnasında Bir Hata Oluştu');

}//error finish

});//ajax finish

});//click finish

});

</script>

</div>

<label for="lastname">Soyad</label>

</div>

<label for="email">E-Posta</label>

</div>

<button type="submit" id="btnFormPost" class="btn btn-primary">Gonder</button>

</form>

</div>

</div>

<label>Soyadı : </label>

</div>

<label>E-Posta : </label>

</div>

</body>

</html>

Son olarak controller u yazıyoruz. Controller dosyasında URL de "/" gördüğünde varsayılan olarak index.jsp sayfası çağrılacak URL de "/person/add.htm” gördüğünde ise add methodu devreye girecek ve formdan gelen değerleri alıp tekrar forma geri gönderecek.

Com.company.controller / PersonController

package com.company.controller;

import com.company.model.Person;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestMethod;

import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

@Controller

public class PersonController {

@RequestMapping(value = "/", method = RequestMethod.GET)

public String index() {

return "index";

}

@RequestMapping(value = "/person/add.htm", method = RequestMethod.POST)

public

@ResponseBody

Person add(HttpServletRequest request, HttpServletResponse response)

throws Exception {

Person person = new Person();

String firstName = request.getParameter("firstname");

String lastName = request.getParameter("lastname");

String email = request.getParameter("email");

person.setEmail(email);

person.setFirstname(firstName);

person.setLastname(lastName);

return person;

}

@Controller anatosyanu ile sınıfımızın bir controller olduğunu belirttik.

@RequestMapping ile URL in nasıl map edileceğini ve hangi methoda göre değer alacağımızı belirttik.

@ResponseBody ile methodun içinde çıktı oluşturacağımızı belirttik.
yapılan işlemler özetle bu kadardı :)

Aslında burada formdan değerler alındıktan sonra DB işlemleri yaptırabilirdik. Sizlere bir anda bilgi yüklemesi yaparak kafanızı karıştırmayım istedim eğer talep olursa İlerleyen yazılarımda da POST edilen değerleri DB ye aktarma işlemlerini anlatıyor olurum.

Her neyse tüm bu işlemlerden sonra projeyi derleyip, web browserdan çalıştırıp (http://localhost:8080/)

ilgili alanları doldurarak Gönder butonuna basarsak değerler post edilip, response oluşturulacaktır. ve response edilen değerler ekrana yazılacaktır.

kaynak dosyalar(github) : indirmek için tıklayın

Levent Yıldız

24 Ağustos 2014 Pazar

Spring framework + Jquery + Ajax ile basit bir post işlemi.

Hiç yorum yok:

Yorum Gönder