创建form
<divstyle="width:230px;background:#E0ECFF;padding:10px;"> <formid="ff"action="/demo5/ProcessServlet"method="post"> <table> <tr> <td>Name:</td> <td><inputname="name"type="text"></input></td> </tr> <tr> <td>Email:</td> <td><inputname="email"type="text"></input></td> </tr> <tr> <td>Phone:</td> <td><inputname="phone"type="text"></input></td> </tr> <tr> <td></td> <td><inputtype="submit"value="Submit"></input></td> </tr> </table> </form> </div>
转换成Ajax表单
我们写一些jquery代码使表单以ajax方式发送。注意,当数据返回时,form插件的success函数激发,所以我们可以处理一点事情。
$('#ff').form({ success:function(data){ $.messager.alert('Info', data, 'info'); } });
服务处理:
protectedvoiddoPost(HttpServletRequest request, HttpServletResponse response) throwsServletException, IOException { // TODO Auto-generated method stub String name = request.getParameter("name"); String email = request.getParameter("email"); String phone = request.getParameter("phone"); System.out.println(name+":"+email+":"+phone); PrintWriter out = response.getWriter(); out.print("Name:"+name+"<br/>Email:"+email+"<br/>Phone:"+phone); out.flush(); out.close(); }
当我们点击发送按钮时,可以看到;