Question

我在一个相当简单的功能上遇到了一个奇怪的问题。我已经输入了一个＆＃34;输入：提交＆＃34;我春天的元素＆＃34;形式＆＃34;标记并在其上执行getJSON功能。但是直到我将元素放在表单标记之外它才起作用。我无法得到答案。有人能否对我应该知道的这个非常简单的行为有所了解？

以下是相关代码。

我的jsp页面（这是有效的）

 <%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
 <%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
 <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
 <html>
  <head>
<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js">        </script>
<title>Spring 3 MVC Series - Contact Manager</title>
<style type="text/css">
    body {
        font-family: sans-serif;
    }
    .data, .data td {
        border-collapse: collapse;
        width: 100%;
        border: 1px solid #aaa;
        margin: 2px;
        padding: 2px;
    }
    .data th {
        font-weight: bold;
        background-color: #5C82FF;
        color: white;
    }
</style>
</head>
<body>

<h2>Contact Manager</h2>


<table>
<tr>
    <td>
     <h2>Random Person Generator</h2>
     <input type="submit" id="randomPerson" value="Get Random Person" /><br/><br/>
     <div id="personResponse"> </div>
    </td>
</tr>

</table>



<script type="text/javascript">

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

        });
    });

</script>

</body>
</html>

我的控制器方法：

@RequestMapping(value ="/contacts/random", method = RequestMethod.GET ,headers = "Accept=*/*")
public @ResponseBody Contact randomPerson() {
    Contact contact = contactService.getRandom();
    System.out.println(contact.getFirstname());

    ObjectMapper mapper = new ObjectMapper();
    try {
        String result = mapper.writeValueAsString(contact);
        System.out.println(result);
    } catch (JsonGenerationException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    } catch (JsonMappingException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    } catch (IOException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
    return contact;
}

我正在使用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;
}

 }

现在，如果我把桌子放在一个弹簧＆＃34;形式＆＃34;标签方法=＆＃34; get＆＃34;和commandName =＆＃34;联系＆＃34;，根本不显示json数据。它肯定会在时间到达控制器，但我不知道它返回时会发生什么。

此外，我在浏览器检查元素中弹出此警告为＆＃34;请使用preventDefault＆＃34; ，不确定使用它的地方或地点。

任何帮助非常感谢。谢谢！

Answer 1

如果您添加表单标签，则只需按一下按钮即可提交表单。在提交表单之前，您的查询点击处理程序将启动，执行他的json东西，从您的控制器获取一些json - 然后表单将被提交并且将获得新页面的新版本。

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

更改

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

    });
});

到

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

    });
});

evt.preventDefault();

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

Answer 2

尝试这样的事情

因为当您将表单放入表单时，表单会被合并

解决方案1 

在按钮上点击提交表单

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

解决方案2

将您的输入类型更改为按钮而不是提交，因此点击它时表单不会被提交

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

getJSON / ajax获取spring form标签内的元素不起作用

2 个答案: