无法调用控制器方法，使用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;
}

非常感谢... :)