我是spring mvc 4和jquery的新手,我必须为我的学校创建一个项目,其中有一个jsp Screenshot of JSP Page 页面,如附件中的图片所示。
在jsp页面中,在两个不同的行中有两组文本区域,当用户在'DataSet1 textArea‘中输入一些数据并单击'Process1’按钮时,然后对控制器进行ajax调用,并更新模型以在ResultSet1文本区域中显示结果,在下面的行中也应该发生同样的事情(可以在这里进行新的ajax调用而不干扰行1的textAreas吗?)我的问题是,在这种情况下,什么设计方法最适合?
我正在分享我的代码和我目前采用的设计方法所面临的问题:这是我的控制器代码:
@RequestMapping(value = "/tokenizer", method = RequestMethod.GET)
public String goTokenize(Model model) {
TokenData data = new TokenData();
model.addAttribute("tokenData", data);
return "tokenizer";
}
@RequestMapping(value = "/tokenizer", method = RequestMethod.POST)
public String setTokenize(@Valid @ModelAttribute TokenData tokenData, Errors errors) {
if (errors.hasErrors()) {
return "tokenizer";
}
return "tokenizer";
}
下面是我用来捕获单击按钮的js代码
<script type="text/javascript">
$(document).ready(function() {
//For button Process
$('#json').click(function(event) {
$.ajax({
type : 'POST',
contentType : "application/json",
url : 'tokenizer',
data : JSON.stringify($("#textarea").val()),
dataType : 'json',
success : function(result) {
$('#result').html(result.text);
},
error : function(e) {
console.log('Error: ' + e)
alert('Error: ' + e);
}
});
});
//For button Process2
$('#json1').click(function(event) {
$.ajax({
type : 'POST',
contentType : "application/json",
url : 'tokenizer',
data : JSON.stringify($("#textareanew").val()),
dataType : 'json',
success : function(result) {
console.log("success--"+result)
$('#textarea').val(result.text);
},
error : function(e) {
console.log('Error: ' + e)
alert('Error: ' + e);
}
});
});
});
</script>
这是我的模型对象
public class TokenData {
@NotEmpty
private String tokenData;
private String resultData;
@NotEmpty
private String tokenDataNew;
public String getTokenDataNew() {
return tokenDataNew;
}
public void setTokenDataNew(String tokenDataNew) {
this.tokenDataNew = tokenDataNew;
}
public String getResultDataNew() {
return resultDataNew;
}
public void setResultDataNew(String resultDataNew) {
this.resultDataNew = resultDataNew;
}
private String resultDataNew;
public String getResultData() {
return resultData;
}
public void setResultData(String resultData) {
this.resultData = resultData;
}
public String getTokenData() {
return tokenData;
}
public void setTokenData(String tokenData) {
this.tokenData = tokenData;
}
我面临的问题是
我在jsp页面中使用
form:form modelAttribute="tokenData" id="formx" action="${formxyz}">
如果我不在jsp中使用表单标记,那么数据绑定和验证(Jsr 303)就不起作用
2.由于我使用的是表单标签,因此当我点击按钮时(按钮类型是“提交”类型,因为“按钮”类型不能处理数据绑定),那么当我点击任何按钮时,整个表单数据都会转到控制器,所有表单字段的验证以及其他处理都会发生。
我的问题是,有没有什么方法可以让我从jsp页面上的多个按钮进行多个ajax调用,并且JSR303验证可以正常工作?
提前感谢你的帮助。
发布于 2018-05-28 10:09:11
简而言之,Javascript不能调用JSP的任何函数。
然而,JSR303验证是由Hibernate验证器(这是JSR303的一个实现)在控制器级别完成的,而不是由JSP完成的。
所以答案是肯定的。为了防止表单提交,你可以去掉按钮中的type=' submit‘,然后让AJAX向你的控制器发送数据。JSR 303将由您的控制器完成。
对于您的"null“数据问题:首先,请检查AJAX调用中的" data”字段。数据必须是JSON格式,与您的TokenData结构完全相同。其次,如果您希望控制器返回数据而不是ModelAndView,则应该在方法级别使用@ResponseBody
进行注释,或者在类级别使用@RestController
进行注释。
欲了解更多信息,请阅读:https://docs.spring.io/spring/docs/current/spring-framework-reference/web.html
https://stackoverflow.com/questions/50556202
复制相似问题