javascript - 在 Ajax 调用中，重新打开一个带有预加载数据的表单以进行编辑

Question

我是 Ajax 调用的新手，我想看看是否有办法在我退出表单后重新打开一个弹出表单，其中包含我预先输入的数据。

我有一个按钮，单击该按钮我正在运行我的 AJAX 调用以从数据库中获取部件名称。

以下是我的 AJAX 调用：

jQuery(document).ready(function() {
  jQuery(".trigger_popup").click(function() {
    jQuery('.popup_win').show();

  });

  jQuery('.popupCloseButton').click(function() {
    jQuery('.popup_win').hide();
  });
});


function getForm() {

  var form = document.getElementById("myForm");
  var myAjax = new Ajax.Updater("partnameoutput", "/jsp/PartNameOutput.jsp", {
    asynchronous: true,
    postBody: Form.serialize(form),
    method: 'post',

    onComplete: function() {
      displayPartName();
    }

  });
}

function displayPartName() {
  var form = document.getElementById("myForm");
  var partnameoutput = document.getElementById("partnameoutput").innerHTML;
  document.getElementById("partname").innerHTML = partnameoutput;
}

.popup_win {
  cursor: pointer;
  display: none;
  height: 100%;
  position: absolute;
  left: 20px;
  top: 150px;
  text-align: center;
  top: 0;
  width: 100%;
  z-index: 10000;
}

.popup_win .helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.popup_win>div {
  background-color: #fff;
  box-shadow: 10px 10px 60px #555;
  display: inline-block;
  max-width: 750px;
  height: auto;
  min-height: 100px;
  vertical-align: middle;
  width: 60%;
  position: relative;
  border-radius: 8px;
  padding: 25px 5%;
}

.popupCloseButton {
  background-color: #fff;
  border: 3px solid #999;
  border-radius: 50px;
  cursor: pointer;
  display: inline-block;
  font-family: arial;
  font-weight: bold;
  position: absolute;
  top: -20px;
  right: -20px;
  font-size: 25px;
  line-height: 30px;
  width: 30px;
  height: 30px;
  text-align: center;
}

.popupCloseButton:hover {
  background-color: #ccc;
}

.trigger_popup {
  cursor: pointer;
  font-size: 12px;
  display: inline-block;
  font-weight: bold;
}

.divTableCell,
.divTableHead {
  border: 1px solid #999999;
  display: table-cell;
  padding: 10px;
  border: 1px solid #000;
  -moz-border-radius: 10px;
}

.divTableRow {
  display: table-row;
}

.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
}

.divTableCell,
.divTableHead {
  border: 1px solid #999999;
  display: table-cell;
  padding: 10px;
  border: 1px solid #000;
  -moz-border-radius: 10px;
}

.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
  font-weight: bold;
}

.divTableFoot {
  background-color: #EEE;
  display: table-footer-group;
  font-weight: bold;
}

.divTableBody {
  display: table-row-group;
  border-spacing: 4px;
}

.TableBox {
  display: table;
  border-spacing: 6px;
}

.TableBox input[type=text] {}

.TableBox>div {
  display: table-row;
  border-spacing: 5px
}

.TableBox>div>div {
  display: table-cell;
  margin: 4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>


<td class="trigger_popup"><input type="button" value="Pop Up" onclick="getForm()"> </td>


<div class="popup_win" id="popup_win">
  <span class="helper"></span>
  <div>
    <div class="popupCloseButton">X</div>

    <div id="TableBox" class="TableBox" style="width: 110%;">



      <div>       
        <div><span class="partname" id="partname"></span></div>
      </div>

    </div>
  </div>
</div>
<div id="partnameoutput" style="display: none"></div>

这是我用来创建表单其余部分的 PartName.jsp 文件。现在，当我单击弹出按钮时，它会从数据库中填充数据并生成表单的其余部分。但是，当我退出表单并重新单击按钮时，它会删除所有内容。

有没有办法将数据保存在表单中而无需实际输入数据库。当我重新单击它并提交表单的其余部分时，我只需要在弹出窗口中保存查看我的数据。

<% 
String partname = request.getParameter("partname");
if (partname != "") {
	String partname = request.getParameter("PartName");
	List<User> user = User.getPartName(user);
	if (user.size() > 0) {
%>

<thead>
<tr><td colspan="5"><br><br><br><br></td></tr>
<tr>
<th align="left">
    <th align="left">Part Name</th>
    <th align="left">Year</th>
    <th align="left">Used</th>
	  <th align="left">Remaining</th>
 </th> 
</tr>
</thead>
<%
	int sum = 0;
	for (int i = 0; i < user.size(); i++) {
	User user = (User) user.get(i);
%>
<tr>
<td align="left">
<td><input type="text" value="<%=user.getPartName()%>"></td>
<td><input type="text" class="year" size="10"></td>
<td><input type="text" class="used" id = "used" name= "used" value="" size="10"></td>
<td><input type="text" class="remaining" name="remaining" id="remaining" size="10"></td> 
</td>			
</tr>

任何帮助表示赞赏。谢谢你。

标签： javascriptjqueryajax