Question

我有一个jquery ajax函数，当单击按钮$('#createBtn').click(function () { e.stopPropagation(); $.post("/user/add",$('form').serialize(), function(data) { if(data==true){ alert("Im here"); } alert(data); }); });时，它将调用Spring MVC方法以将数据插入表中。

e.stopPropagation()

对于任何成功的数据库插入，该方法始终返回一个真值。

问题在于，如果将$.post()放在e.stopPropagation()之前，则会打印出具有返回值（在这种情况下为 true ）的页面。如果将$.post()放在<c:url var="addAction" value="/user/add"></c:url> <form:form action="${addAction}" commandName="masterScreenForm"> <div class="input-group-append"> <input type=text name='uname' placeholder="Enter name"> </div> <button class="btn" id="createBtn">Click me</button> </div> </form:form>下方的任何位置，则会调用警报方法，但是由于程序尝试多次插入数据，因此应用程序将抛出完整性约束冲突。

JSP：

import scipy
import matplotlib.pyplot as plt
def binomcdf():
    p = 0.5
    n = 100
    x = 0
    result = []
    for a in range(10):
        result.append(scipy.stats.binom.cdf(x, n, p))
        x += 10
    return result

plt.hist(binomcdf())
plt.show()

如何使函数接受返回的值而不违反约束？

Answer 1

解决方案：

1）将按钮移至表单之外：

<form> stuff here </form> <button id="createBtn">Foo</button>

如果按钮在表单外部，则不会提交表单。

2）在按钮上停止提交

<form> stuff here </form> <button id="createBtn" onclick="return false">Foo</button>

此处按钮不会提交表单。

3）不要使用按钮。使用div作为“按钮”：

<form> stuff here </form> <div id="createBtn">Foo</div>

您可以使用CSS为div设置样式，使其看起来像一个按钮。

如果stopPropagation在return函数中，则它将不起作用。将它放在$ .post之后是没有意义的。但是，如果不在return函数中，它应该可以工作。帖子返回是一个不同的上下文，该函数将在帖子之前返回。

Answer 2

由于您使用的是jQuery，最干净的方法是：

从action中删除<form>。
将#createBtn的类型更改为submit。
使用jQuery处理表单提交事件。

请参考以下示例：

在您的HTML中（您可能要在这里消除form:form，因为您不再使用JSTL）：

<form:form>
   <div class="input-group-append">
      <input type=text name='uname' placeholder="Enter name">
   </div>

   <button type="submit" class="btn" id="createBtn">Click me</button>
</form:form>

在您的JavaScript中：

$('form').submit(function(e) {

  // Prevent form submit
  e.preventDefault();

  // Send the data without refreshing the page
  $.post( ... )
    .then(function(data) {
      if(data == true) {
        alert("Im here");
      }

      alert(data);
    })
});

此方法在提交表单时（而不是在单击按钮时）触发发送数据。这样，您可以：

点击Enter键（同时专注于input元素）以提交表单
触发浏览器表单验证逻辑（如果您有任何要验证的字段）

jQuery e.stopPropagation防止将值返回给函数

2 个答案: