Jquery spring表单标记中元素的getJSON/ajax get不起作用

我在一个相当简单的功能上面临一个奇怪的问题。我在我的spring“form”标记中放置了一个“input:submit”元素，并正在对其执行getJSON功能。但是直到我把元素放在表单标记之外，它才起作用。我无法得到答案。有人能解释一下我应该知道的这种非常简单的行为吗

这是相关代码

我的jsp页面（正在运行）

我使用ObjectMapper只是为了验证

这是我的联络班

 package com.org.hemanth.contacts.model;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.Table;

@Entity
@Table(name="CONTACTS")
public class Contact {

@Id
@Column(name="ID")
@GeneratedValue
private Integer id;

@Column(name="FIRSTNAME")
private String firstname;

@Column(name="LASTNAME")
private String lastname;

@Column(name="EMAIL")
private String email;

@Column(name="TELEPHONE")
private String telephone;


public String getEmail() {
    return email;
}
public String getTelephone() {
    return telephone;
}
public void setEmail(String email) {
    this.email = email;
}
public void setTelephone(String telephone) {
    this.telephone = telephone;
}
public String getFirstname() {
    return firstname;
}
public String getLastname() {
    return lastname;
}
public void setFirstname(String firstname) {
    this.firstname = firstname;
}
public void setLastname(String lastname) {
    this.lastname = lastname;
}
public Integer getId() {
    return id;
}
public void setId(Integer id) {
    this.id = id;
}

 }

现在，如果我将该表放在带有method=“get”和commandName=“contact”的spring“form”标记中，则根本不会显示json数据。这两次它肯定都会传到控制器，但我不知道当它返回时会发生什么

此外，我的浏览器inspect元素中弹出了一个警告“请使用preventDefault”，不确定使用什么或在哪里使用它

---

非常感谢您的帮助。谢谢

如果您添加表单标签，则如果您点击按钮，您的表单将被提交。在提交表单之前，您的查询点击处理程序将启动，执行json操作，从控制器获取一些json，然后表单将被提交，页面的新版本将被获取

为了防止这种情况，您必须在单击处理程序完成其工作后中断此默认事件处理

改变

$(document).ready(function() {
    $('#randomPerson').click(function() {
        $.getJSON('${pageContext.request.contextPath}/contacts/random', function(contact) {
              $('#personResponse').text(contact.firstname);
            });

    });
});

到

---

将阻止默认事件处理，因此表单提交将不会被发送。

尝试类似的操作

因为当你把你的表格放在表格中时，它会被简化

解决方案1

单击按钮取消表单提交

$(document).ready(function() {
    $('#randomPerson').click(function(e) {
        $.getJSON('${pageContext.request.contextPath}/contacts/random', function(contact) {
              $('#personResponse').text(contact.firstname);
            });
        e.preventDefault();
    });
});

解决方案2

将您的输入类型更改为button而不是submit，这样单击它表单就不会被提交

<input type="button" id="randomPerson" value="Get Random Person" /><br/><br/>  

ok。但是如果我使用method=“get”，那么表单不应该提交，对吗？但它提出，这是为什么？按钮中的“submit”类型是否凌驾于它之上？这没关系，如果方法是GET或POST，表单总是在单击submit按钮时提交。这两种方法都是提交数据的方式Dok。但是如果我使用method=“get”，那么表单不应该提交，对吗？但它提出，这是为什么？按钮中的“submit”类型是否会覆盖它？get没有理由不能提交表单。如果您使用get（例如，服务器接受的最大路径长度），您可能会遇到麻烦，但如果您愿意，您可以获得一个表单-至少只要您不尝试上载文件，但这是另一个故事…一些背景：ok。。。所以发生的事情是，当我给按钮类型“submit”时，它的行为就像一个“post”，每次都检索到新的jsp，尽管我在form method属性correct？排序中给了“get”。它的行为与post不同，它提交表单（通过get，而不是post）。但是检索到一个新的jsp是正确的。这是一种竞争条件：表单提交和ajax调用都被执行，新的jsp被提交“wins”获取。

$(document).ready(function() {
    $('#randomPerson').click(function(evt) {
        $.getJSON('${pageContext.request.contextPath}/contacts/random', function(contact) {
              $('#personResponse').text(contact.firstname);
            });
        evt.preventDefault();

    });
});

evt.preventDefault();

$(document).ready(function() {
    $('#randomPerson').click(function(e) {
        $.getJSON('${pageContext.request.contextPath}/contacts/random', function(contact) {
              $('#personResponse').text(contact.firstname);
            });
        e.preventDefault();
    });
});

<input type="button" id="randomPerson" value="Get Random Person" /><br/><br/>