AJAX学习笔记01

举报
wh_bn 发表于 2021/12/15 22:20:42 2021/12/15
【摘要】 AJAX学习笔记01 学习课程： 部署第一个AJAX程序 学习步骤：   1.建立Java Web 项目——AJAX_01：   2.建立Servlet，包名test ，类名Aja...

AJAX学习笔记01

学习课程：

部署第一个AJAX程序

学习步骤：

 

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

 

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

 

  2. 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页面代码：

 

  2. <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="提交" οnclick="verify()"/> </form>

 

 

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

 

  2. 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代码：

 

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

 

 

文章来源: blog.csdn.net，作者：fengda2870，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/fengda2870/article/details/3293912

【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
Ajax JavaScript
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入