无法在spring mvc形式中使用ajax

时间:2013-03-17 00:23:07

标签: jquery ajax json spring-mvc

我正在尝试在spring mvc中实现基于ajax的帖子。

这是我的代码:

<form:form method="POST" commandName="emailDomain">
    <form:textarea path="emailText" rows="5" id="emailList"
        placeholder="Write emails to submit us, saperated by ';'"
        style="width: 100%" />

<form:select items="${categoryMap}" path="categoryId" id="categoryList"
    onchange="showEmails()" />

    <br />
    <p align="center">
        <button type="button" value="Submit" id="submitEmails">Submit emails</button>
    </p>
    <p align="center" class="text-info">${var}</p>
</form:form>

我的ajax代码是:

<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>

     <script type="text/javascript">
     function showEmails() {

            var categoryId = $('#categoryList').val();
    var emailText = $('#emailList').val();

    $.ajax({
        type : "POST",
        url : "http://localhost:8081/chatbooster/forms/email.html?cat=1",
                data : "categoryId=" + categoryId + "&emailText=" + emailText,
        success : function(response) {


        },
        error:function (xhRequest, ErrorText, thrownError) {
            alert('Error: '  + '  ' + thrownError);
        }
    });
}

问题是在点击按钮后,它显示错误为警报但没有任何解释。之后,它跳转到显示json响应的页面。如果我根本不使用spring form标签,代码就可以工作。它将显示没有错误并且不会显示json响应但是再次,我将无法从数据库填充选择下拉列表。

我的控制器是:

@Controller
  @RequestMapping(value = "/email.html")
  public class EmailController{

    @RequestMapping(method = RequestMethod.GET)
      public String showForm(Model model,
          @RequestParam(value = "cat", required = true) String category,
          HttpServletRequest request, HttpServletResponse response) {
        clearSession(request, response);

        return "email";
      }

    @RequestMapping(value = "/submitemails", method = RequestMethod.GET)
      public @ResponseBody
      String submitAndRefreshEmails() {
        System.out.println("check");

        return "email";
      }

    @RequestMapping(method = RequestMethod.POST)
      public @ResponseBody
      EmailJsonResponse addEmail(@Valid EmailDomain emailDomain,
          BindingResult result,
          @RequestParam(value = "cat", required = true) String category,
          HttpServletRequest request, HttpServletResponse response)
      throws Exception {

        //return emailjsonresponse object, a simple object carrying few ints and strings

      }

    @ModelAttribute("categoryMap")
      public Map<Long, String> populateCategoryList(
          @RequestParam(value = "cat", required = true) String category)
      throws Exception {

        // populating drop down 

      }

  }

我已经阅读了很多关于此问题的讨论,但我无法了解如何制作这样的情况?有人可以帮帮我吗?我指的是这个例子http://www.javacodegeeks.com/2012/02/spring-mvc-and-jquery-for-ajax-form.html

修改1:

我甚至试过这个新的:

<script type="text/javascript">
  $(document).ready(function() {
      $('#submitEmails').onclick(function() {
          $.getJSON('http://localhost:8081/chatbooster/forms/submitemails.html?cat=1',
                {
                    categoryId : $('#categoryList').val(),
                    emailText : $('#emailList').val(),
                    ajax : 'true'
                }, 
                function(data) {
                    alert('data found');
                }
          );
      });
  });

但我仍然被json回应。我无法理解为什么会这样?我尝试了这个http://rockhoppertech.com/blog/spring-mvc-3-cascading-selects-using-jquery/。当我不使用spring form组件时,我能够实现ajax。但是这会给我填充数据库中的下拉元素带来麻烦。有一些我想念的东西。有什么想法可以吗?

修改2

现在我明白这个问题的原因是什么。这是我提交的表格,最终导致我对json的回应。我需要做的是从按钮调用jquery函数,使按钮类型的提交按钮而不是提交类型。单击它将调用与控制器的GET请求类型相关的方法。但为此我需要在单击提交按钮时调用submitAndRefreshEmails方法。任何人都可以告诉我该怎么做?当控制器中有很多这样的方法时,如何调用GET类型的特定方法?

1 个答案:

答案 0 :(得分:0)

由于您正在进行AJAX调用,因此您希望在不重新加载HTML页面的情况下返回一小段信息(您的JSON数据)。因此使用@ResponseBody

如果AJAX调用绑定到表单提交,它将触发页面加载(我似乎无法找到解释这一点的好消息来源)。因此,您需要停止默认行为。

$form.bind('submit', function(e) {
    $.post('epdReviewSaveChanges.json', mData, function(response) {
            //do stuff...
    }

    e.preventDefault();
    return false;
});

对上述内容的一点解释,取自here

该代码的

e.preventDefault()部分阻止浏览器执行默认操作。 return false;更进一步,因为它还可以防止该事件传播(或“冒泡”)DOM。

我怀疑你遇到的原始问题与如何使用AJAX调用/ Spring有关。我不是在谈论任何跨域问题,这可能需要额外/不同的解决方案。

问题2 关于映射到控制器中的特定方法,您可以使用value来区分不同的调用。例如:

@RequestMapping(value="/Upload.html",method = RequestMethod.POST)