（二）jQuery+ajax与servlet的交互-蒲公英云

（二）jQuery+ajax与servlet的交互

清疚 2022-06-14 05:42 335阅读 0赞

前面了解到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" οnblur="Check()">
   <div id="show"></div>//用来显示传过去的name.
  </form>
  </body>

js:

function Check() {
    $.ajax({
        type:"POST",
        url:"./Check",//web.xml中的url-pattern，使用struts改成：命名空间/action_**即可.0
        data:{
            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>