24 Ağustos 2014 Pazar

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.
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>



src\main\webapp\WEB-INF\pages\index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title></title>

    <%--bootstrap css--%>
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

    <%--bootstrap js--%>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    <%--jquery js--%>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

</head>
<body>
<style>

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

</style>

<script>
    $( 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 class="personDiv">
<form role="form" name="personForm" method="POST" onsubmit="return false;">
    <div class="form-group">
        <label for="firstname">Ad</label>
        <input type="text" class="form-control" name="firstname" id="firstname" placeholder="Ad">
    </div>

    <div class="form-group">
        <label for="lastname">Soyad</label>
        <input type="text" class="form-control" name="lastname" id="lastname" placeholder="Soyad">
    </div>
    <div class="form-group">
        <label for="email">E-Posta</label>
        <input type="email" class="form-control" id="email" name="email" placeholder="E-Posta">
    </div>
    <button type="submit"  id="btnFormPost" class="btn btn-primary">Gonder</button>
</form>
</div>

<div class="personDiv" id="result">
    <div class="form-group">
        <label>Adı : </label>
        <label id="resFirstName"></label>
    </div>
    <div class="form-group">
        <label>Soyadı : </label>
        <label id="resLastName"></label>
    </div>
    <div class="form-group">
        <label>E-Posta : </label>
        <label id="resEmail"></label>
    </div>
</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

Hiç yorum yok:

Yorum Gönderme