混合 ajax 和 jsp 以将数据放入 servlet

Question

我有一个带有两个文本字段（signUp 和 post）的 jsp 文件。现在，我希望将发布文本和注册文本调用到 servlet。通常它与request.getParameter() 一起使用，但现在我希望使用 AJAX 函数将帖子文本发送到带有 AJAX 函数的 servlet，并以正常方式（这意味着 jsp 文件中的输入名称，然后是 request.getParameter）。

是否可以在一个 servlet 中混合这两个部分，因为我有这个：

<form name="form1" method="POST" action="PostWallServlet" id="form1"> 

form1 是 ajax 代码。我不知道这应该如何工作。正常的站着

`<form action="PostWallServlet"  method="POST" >

一切都可以通过 Servlet 调用。但是，目前我不知道如何混合这两个组件。

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    PostWall pw=new PostWall();
    SimpleDateFormat df = new SimpleDateFormat("YYYY/MM/DD hh:mm:ss");
    Calendar cal = Calendar.getInstance();
    System.out.println("Current Date Time : " + df.format(cal.getTime()));

    String message = "";
    String sender = request.getParameter("sender");  
    String post = request.getParameter("message");
    String a= df.format(cal.getTime()).toString();

    pw.setSender(sender);
    pw.setPost(post);
    pw.setDate(a);
    if (pwi.addPost(pw)) {  
           message = "Student Successfuly Added";  
          } else {  
           message = "Student Adding Failed";  
          }  

    //RequestDispatcher rd = request.getRequestDispatcher("post.jsp");  
      //rd.forward(request, response);  
}




$(document).ready(function(){
  $('#Add').click(function(){
           sendData();
    });
   });
function sendData(){
   var mge = $('#newText').val();
    alert(mge);
    $.ajax({
        type: "POST",
        url: "PostWallServlet",
        data: { message : mge  }
      }).done(function( msg ) {
        alert( "Data Saved: " + msg );
      });
}
        </script>
      <form name="form1" method="GET" action="PostWallServlet" id="form1"></form>

      <table border="0" width="100%">  
            <tr>  
                <td colspan="3">  ${message}</td>  
            </tr>  


            <tr>  
                <td>Sender</td>  
                <td>:</td>  
                <td><input type="text" name="sender" value="" size=20/></td>  
            </tr> 
            <tr>  
                <td>Post</td>  
                <td>:</td>  
                <td><input type="text" name="post" value="" size=500 id="newText"/ ></td>  
            </tr>  



            <tr>  
                <td></td>  
                <td></td>  
                <td><input type="submit" value="Add" name="Add" /></td>  
            </tr>  
        </table>  

有什么解决办法吗？

Answer 1

将表单的结束标签放在所有输入之后：

<form name="form1" method="GET" action="PostWallServlet" id="form1">
...
<td><input type="text" name="sender" value="" size=20 /></td>
...    
<td><input type="text" name="post" value="" size=500 id="newText" /></td>  
...
<td><input type="submit" value="Add" name="Add" /></td>  
...
</form>

您的输入必须在表单内部，而不是在表单之后。

还要确保以 /> 而不是 /> 结束您的输入标签。在其中一个 / 和 > 之间有一个空格。

对于 Ajax 部分，您需要提供输入 id 和名称：

<td><input type="text" name="sender" id="sender" value="" size=20 /></td>

然后在你的 Ajax 函数中获取数据：

 data: { sender: $('#sender').val(), post:  $('#post').val() }