AJAX学习笔记01

AJAX学习笔记01

学习课程：

部署第一个AJAX程序

学习步骤：

 

1.建立Java Web 项目——AJAX_01：

 

2.建立Servlet，包名test ，类名AjaxServlet，doPost()代码：

request.setCharacterEncoding( "utf-8" ); response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter(); String s = request.getParameter( "username" ); out.print( "返回结果:" + s );

 

3.修改index.jsp页面代码：

<div id="result"></div> <form id="form1" action="servlet/AjaxServlet" method="post"> <input type="text" id="username" name="username"/> <input type="button" id="submit" value="提交"  onclick="verify()"/>  </form>

 

 4.在WebRoot下建立包jslib，将jquery.js放到这个包中，并且建立verify.js文件，写入代码：

function verify(){ //1.获取文本框中的内容 var jqueryObj = $("#username"); var username = jqueryObj.val(); alert( username ); //2.将文本框中的数据发送给Servlet //怀疑下面一句代码向Servlet发送数据的时候，对于中文会传递乱码 //因为如果在编辑框中直接输入回车的话，会直接载入Servlet，而单击按钮之后是先载入这个JS页面， //然后通过这个JS页面将得到的数据传递给Servlet $.get( "servlet/AjaxServlet?username=" + username , null , callback/*回调函数*/ ); } function callback(data){ alert( "服务器的数据回来了" ); //3.接受服务器端返回来的数据 var resultObj = $("#result"); //4.将服务器端返回来的数据动态显示到页面上 resultObj.html( data ); }

 5.在index.jsp中导入js代码：

<script type="text/javascript" src="jslib/verify.js"></script> <script type="text/javascript" src="jslib/jquery.js"></script>