Question

我有以下课程

public class Student {

private String firstName;
private String lastName;
private BigDecimal balance;
private List<Option> options;

...
}

这是我的表格

    <form:form action="processForm" modelAttribute="student">

    First name: <form:input path="firstName" />

    <br><br>

    Last name: <form:input path="lastName" />

    <br><br>

    Balance: <form:input path="balance" />

    <br><br>


    School Options: 

    <button onclick="addOptionForm('options')">Add a school option</button>

    <br><br>

    <div id="options"></div>


    <input type="submit" value="Submit" />

</form:form>

AJAX功能

function addOptionForm(id) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        document.getElementById(id).innerHTML = this.responseText;
    }
};
xhttp.open("GET", "option-form", true);
xhttp.send();
}

单击Add school option按钮时，我尝试使用AJAX加载额外的字段。问题是单击按钮后提交表单。

有没有办法用JavaScript或AJAX做到这一点，我可以从绑定的Student对象访问列表吗？

Answer 1

您需要添加属性type='button'以阻止提交。 type='submit'是button的默认行为。

<button type="button" onclick="addOptionForm('options')">Add a school option</button>

单击按钮时，将其他字段添加到弹簧窗体

1 个答案: