Ajax在jQuery中的应用 （4）向jsp提交表单数据

ajax技术带给我们的是良好的用户体验，同时，使用jquery可以简化开发，提高工作效率。

下面就介绍一下大致的开发步骤。

工具/原料

• 本文中使用的是 jquery-1.3.2.min.js

方法/步骤

1. 新建两个页面:

   1、show.jsp：调用ajax，将表单中的数据发送给ajax.jsp页面。

   2、ajax.jsp：获取show.jsp页面传递的表单数据，并返回结果。

   两个页面的编码格式要设置为GBK：

   <%@ page contentType="text/html;charset=GBK"%>

2. show.jsp页面的重点部分：

   1、添加对 jquery-1.3.2.min.js 的引用：

   <script type="text/javascript" src="jquery-1.3.2.min.js"></script>

   2、设置表单的id，在调用ajax的方法时要用到。

   <form id="ajaxFrm" >

   3、设置一个div，用于显示ajax.jsp页面返回的结果

   <div id="ajaxDiv"></div>

   4、增加一个按钮，用来调用ajax

   <input type="button" onClick="doFind();" value="调用一下ajax" >

   5、增加调用ajax的函数：

   function doFind(){

   $.ajax({

   cache: false,

   type: "POST",

   url:"ajax.jsp", //把表单数据发送到ajax.jsp

   data:$('#ajaxFrm').serialize(), //要发送的是ajaxFrm表单中的数据

   async: false,

   error: function(request) {

   alert("发送请求失败！");

   },

   success: function(data) {

   $("#ajaxDiv").html(data); //将返回的结果显示到ajaxDiv中

   }

   });

   }

3. ajax.jsp页面的源代码：

   <%@ page contentType="text/html;charset=GBK"%>

   <%

   String userName = request.getParameter("UserName");

   if(userName!=null){

   userName = new String(userName.getBytes("ISO-8859-1"), "utf-8");//解决乱码的问题

   }

   String returnString = "";

   returnString="你好，" + userName;

   out.print(returnString);

   %>

4. 运行效果如下：