我正在尝试将一些表单数据提交到 Servlet使用JQuery并检索 Servlet来自同一个的回应 JQuery 。请看下面的代码。
<%--
Document : index
Created on : Feb 23, 2015, 8:18:52 PM
Author : Yohan
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
var form = $('#customItemForm');
function formSubmit(){
$.ajax({
url:'SampleServlet',
data: $("#customItemForm").serialize(),
success: function (data) {
$("#results").text(data);
var $textbox = $('<input type=text>').appendTo($('<div>')).appendTo($('#results'));
$textbox.attr("id",data);
//alert($textbox.attr("id"));
}
});
}
</script>
</head>
<body>
<form method="get" action="SampleServlet" id="customItemForm" onsubmit="formSubmit(); return false;">
Name <input type="text" name="name">
<button>Submit</button>
</form>
<br>
<div id="results"></div>
</body>
</html>
在上面的 JQuery 部分代码中，我试图读取从 servlet 获得的值，创建一个 Text Input在一个 DIV 中。我的期望是，如果我单击“提交”按钮两次，然后单击 2 个文本框；如果我点击提交按钮三次，然后点击 3 个文本框，依此类推。不幸的是，这并没有发生在这里。始终只出现一个文本框，替换前一个文本框。
我该如何解决这个问题？
最佳答案
$.ajax({
url:'SampleServlet',
data: $("#customItemForm").serialize(),
success: function (data) {
$("#results").text(data); //replace with $("#results").append(data)
var $textbox = $('<input type=text>').appendTo($('<div>')).appendTo($('#results'));
$textbox.attr("id",data);
//alert($textbox.attr("id"));
}
});
}
您需要进行上述更改，因为 .text() 会替换 div 中的现有数据(因此您之前的运行会被覆盖)
关于javascript - Ajax `appendTo` 替换现有元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28681512/