Question

我正在尝试使用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获得的值，在DIV中创建Text Input。我的期望是我点击两次“提交”按钮，然后是两个文本框;如果我单击提交按钮三次，则3个文本框等。不幸的是，这里没有发生。始终只显示一个文本框，替换前一个文本框。

我该如何解决这个问题？

Answer 1

$.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中的现有数据（所以你之前的运行被覆盖了）

Ajax` appendTo`替换现有元素

1 个答案: