我正在尝试在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类型的特定方法?
答案 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)