無法調用控制器方法，使用Spring MVC進行Ajax調用

Question

我有個問題，

使用spring mvc，我想使用ajax調用，嘗試調用控制器方法，但是我無法，這里有一個jsp頁面和控制器類

我的Jsp頁面，

            <form role="form" >

                <div class="form-group">
                    <label for="Ders">Ders</label>
                    <form:select path="derslist" class="form-control" id="ddlders">
                        <form:options items="${derslerlistesi}" itemValue="dersid"
                            itemLabel="ders" />
                    </form:select>
                </div>
                <div class="form-group">

                    <label for="KonuAd">Konu Ad</label> <input type="text"
                        class="form-control" id="KonuAd" placeholder="Konu İsmi Giriniz!">


                </div>
                <div class="form-group">
                    <button type="submit" id="btnekle" class="btn btn-default">Ekle</button>
                </div>

和我的控制器班

package publisher.controller;


import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.MediaType;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;

import publisher.dao.Dao;
import publisher.entity.Dersler;
import publisher.entity.Konular;



@Controller
public class IslemlerController  {

    @Autowired
    private Dao dao;

    @Autowired
    private Konular _konu;

    @RequestMapping(value = "/islemler", method = RequestMethod.GET)
    public String Home(Model model,Dersler dersler)  { 

     model.addAttribute("derslist",dersler);
     return "islemler"; 

    } 


    @ModelAttribute("derslerlistesi")
    public List<Dersler> getdersler ()
    {
        return dao.getAll(Dersler.class);
    }

    @ModelAttribute("konulistesi")
    public List<Konular> getKonular ()
    {
        return dao.getAll(Konular.class);
    }

    @ResponseBody
    @RequestMapping(value="/konukaydet",method=RequestMethod.POST)
    private  Konular KonuKaydet (@RequestParam String konu,@RequestParam int dersid)
    {
        _konu.setKonu(konu);
        _konu.setDersid(dersid);
        _konu.setSinavid(1);
        _konu =  dao.save(_konu);
            System.out.println("kaydet e girdi !");
        return _konu;
    }

}

和我的腳本代碼

$(document).ready(function() {
  $("#btnekle").click(function() {
    var input = {
      "konu": $("#KonuAd").val(),
      "dersid": $("#ddlders").val()
    };
    var inputStr = JSON.stringify(input);
    alert(inputStr);
    $.ajax({
      url: "/islemler/konukaydet",
      type: "POST",
      data: inputStr,
      dataType: "json",
      success: function(output) { // callback method for further manipulations
        var str = JSON.stringify(output);
        alert("success ");
        $("#output").text(data);
      },
      error: function(data) { // if error occured
          alert("err");
        $("#error").text(data);
      }
    });

  });
});

感謝幫助！

Answer 1

我認為您的腳本有問題，因為您在控制器類中使用了@RequestParam ，所以需要將數據作為查詢參數傳遞。 因此在您的Ajax調用中，您的網址應如下所示。

url: "/islemler/konukaydet?konu="+input.konu+"&dersid="+input.dersid;

注意 -您未在控制器中使用islemler URL 。 @RequestMapping(value="/islemler/konukaydet",method=RequestMethod.POST)

它可能會對您有所幫助，如果沒有，請回復我。

如果要按原樣使用腳本，則需要在控制器中進行更改，並使用@RequestBody並使用模型

Answer 2

要添加到@Sam的要點，根據您在js上的網址，您需要在控制器級別添加@RequestMapping。 因此，您的控制器應如下所示：

@RequestMapping(value = "/islemler")
    @Controller public class IslemlerController {

因此，通過組合控制器級別和KonuKaydet方法級別的請求映射，您現在將具有完整的所需請求映射。

Answer 3

我假設您已經在dispatcher-servlet.xml中配置了控制器

如果沒有看到這個

如果您在本地計算機上運行它，則需要以以下方式調用該調用：

$.ajax({ //other options. . url: http://localhost:<port>/<your-url> //other options. . }); 。

此外，@ @RequestMapping應該在控制器級別給出。

Answer 4

在您的@RequestMapping中，您應該在控制器方法中映射完整的URL或在控制器級別添加@RequestMapping，例如：

@Controller
@RequestMapping("/islemler/") 
public class IslemlerController  {

    @Autowired
    private Dao dao;

    @Autowired
    private Konular _konu;

    @RequestMapping(value = "home", method = RequestMethod.GET)
    public String Home(Model model,Dersler dersler)  { 

     model.addAttribute("derslist",dersler);
     return "islemler"; 

    } 


    @ModelAttribute("derslerlistesi")
    public List<Dersler> getdersler ()
    {
        return dao.getAll(Dersler.class);
    }

    @ModelAttribute("konulistesi")
    public List<Konular> getKonular ()
    {
        return dao.getAll(Konular.class);
    }

    @ResponseBody
    @RequestMapping(value="konukaydet",method=RequestMethod.POST)
    private  Konular KonuKaydet (@RequestParam String konu,@RequestParam int dersid)
    {
        _konu.setKonu(konu);
        _konu.setDersid(dersid);
        _konu.setSinavid(1);
        _konu =  dao.save(_konu);
            System.out.println("kaydet e girdi !");
        return _konu;
    }

}

你的ajax電話應該​​像：

$(document).ready(function() {
  $("#btnekle").click(function() {
    var input = {
      "konu": $("#KonuAd").val(),
      "dersid": $("#ddlders").val()
    };
    var inputStr = JSON.stringify(input);
    alert(inputStr);
    $.ajax({
      url: "../islemler/konukaydet",
      type: "POST",
      data: inputStr,
      dataType: "json",
      success: function(output) { // callback method for further manipulations
        var str = JSON.stringify(output);
        alert("success ");
        $("#output").text(data);
      },
      error: function(data) { // if error occured
          alert("err");
        $("#error").text(data);
      }
    });

  });
});

對於Home方法，您的URL類似於“ ../islemler/home”

希望對您有所幫助。

Answer 5

解決問題 ，

腳本代碼

    function madeAjaxCall(){
    var data =  {}
    data["konu"] = $("#konuad").val()
    data["dersid"] = $("#ddlders").val()

 $.ajax({
  type: "post",
//  http://localhost:8080
  url: "/islemler/konukaydet",
  cache: false,    
//  data:'konu=' + $("#konuad").val() + "&dersid;=" + $("#ddlders").val(),
  data:data,
  success: function(response){
   $('#result').html("");
   var obj = JSON.parse(response);
   $('#result').html("First Name:- " + obj.konu +"</br>Last Name:- " + obj.dersid  );
  },
  error: function(){      
   alert('Error while request..');
  }
 });
}

和控制器代碼

@RequestMapping(value="islemler/konukaydet",method=RequestMethod.POST)
private   @ResponseBody  Konular KonuKaydet (HttpServletRequest request, HttpServletResponse response) 
{
    _konu.setKonu(request.getParameter("konu"));
    _konu.setDersid(Integer.parseInt(request.getParameter("dersid")));
    _konu.setSinavid(1);
    _konu =  dao.save(_konu);
        System.out.println("kaydet e girdi !");

    return _konu;
}

非常感謝... :)