（二）jQuery+ajax与servlet的交互

来源：互联网发布：马尔萨斯陷阱知乎编辑：程序博客网时间：2024/05/22 12:21

前面了解到jQuery.ajax的概念，里面的知识点讲述的很清楚。

然后下一件事就是来完成一个例子来理解jQuery.ajax.：

这里实现jQuery+ajax+servlet来实现两者的交互（不用struts是因为自己觉得该回顾一下servlet）,这个例子很简单，就是jsp页面表单里面的值，通过异步来和servlet交互：

首先我们应该知道jQuery.ajax一些基本知识：比如url,data,dataType.......这里是知识点：jQuery.ajax

jsp页面：

  <body>   <form action="">   <input type="text" id="name" name="name" onblur="Check()">   <div id="show"></div>//用来显示传过去的name.  </form>  </body>

js:

function Check() {$.ajax({type:"POST",url:"./Check",//web.xml中的url-pattern，使用struts改成：命名空间/action_**即可.0data:{name:$("#name").val(), },dataType:"text",//类型beforeSend:function(XMLHttpRequest){$("#show").text("loading..");},success:function(data,textStatus){//data代表servlet返回的数据，随意命名，一般写msg$("#show").text(data);//给id为show的div显示返回的text$("#show").css("color","red");},});}

servlet:

public class Check extends HttpServlet{public void service(HttpServletRequest request, HttpServletResponse response)    throws ServletException, IOException {     //处理中文问题   request.setCharacterEncoding("utf-8");   response.setContentType("text/html;charset=utf-8");   System.out.println("开始交互");   String name=request.getParameter("name");//获取ajax传过来的值   PrintWriter out = response.getWriter();   out.write(name);//相应   System.out.println("name=="+name+"\n");   out.flush();   out.close();   System.out.println("交互结束");  }}

web.xml

 <servlet>  <servlet-name>Check</servlet-name>     <servlet-class>a.Check</servlet-class>   <!--Servlet的类--></servlet><servlet-mapping>  <servlet-name>Check</servlet-name>                 <url-pattern>/Check</url-pattern>                   <!--映射的url路径 --></servlet-mapping>

这里就完成一个最简单的交互,将传过去的值返回回来，可以在次基础上做自己需要的事情，验证注册名是否合法，登录名是否为空，以及其他的操作。

阅读全文

1 0