工具/原料

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

新建两个页面:

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

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

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

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

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中

}

});

}

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);

%>

运行效果如下：