显示上次 ajax 调用值的窗体

Question

页面中的多个表单，表单最初显示为空，从下一次调用开始显示上次 AJAX 调用的值

$(document).ready(function () {
$("#creationForm").hide();
$("#create").hide();
$("#submit").click(function() {
$("#creationForm").show();
$("#create").show();
return false;
});
});

JavaScript函数中的Ajax调用

$.ajax({
async: false,
cache: false,
url: "changeCreation.do",
method: "post",
data: {
"operationName": "submitButtonClicked",
"templateNameVal": templateName
},
success: function () {
}
});

<form action="changeCreation.do" method="post" id="myForm">
<button type="submit" id="submit" name="submit"
onclick="submitButton()">Submit</button>
</form>
<form action="changeCreation.do" method="post" id="creationForm"
---contains a lot of fields that should be populated after ajax call
</form>

Servlet 中的代码

if (operationName != null && operationName.equals("submitButtonClicked")) {
TemplateBean tbean = null;
try {
if (templateName != null) {
//DB call
tbean = service.getTemplateDetail(templateName, request);
if (tbean != null) {
tbean.setTemplateName(templateName);
}
} 
} catch (Exception e) {
LOGGER.log(Level.SEVERE, null, e);
}
session.setAttribute("templateBean", tbean);
}

表单创建表单未显示与从 myForm 的下拉列表中选择的模板名称对应的值

表单显示与选择1对应的值，同时从下拉列表中选择选择2

Answer 1

您在myForm内有提交按钮，因此单击按钮后，它正在提交表单而不是creationFormmyForm。在代码中执行以下更改 -

HTML：从按钮中删除type="submit"

<form action="changeCreation.do" method="post" id="myForm">
<button id="submit" name="submit"
onclick="submitButton()">Submit</button>
</form>

jQuery：显式提交表单并删除按钮单击的默认行为

$(document).ready(function () {
$("#creationForm").hide();
$("#create").hide();
$("#submit").click(function(e) {
e.preventDefault(); // remove default behavior of button submit
$("#creationForm").show();
$("#create").show();
$("#creationForm").submit(); // submit the form with id
});
});