ajax 局部刷新

骑猪看日落 2022-06-11 05:55 284阅读 0赞

1、jsp网页文件代码

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Insert title here</title>
    <script type="text/javascript"> function check(){ var xhr=new XMLHttpRequest(); var name=document.getElementById("name").value; /* xhr.open("get","refresh.do?name="+name, true);//get请求方式 */ xhr.open("post", "refresh.do",true); xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//post请求方式固定的方法 xhr.onreadystatechange=function(){ alert("得到响应"); if(xhr.readyState==4){ alert("正在加载"); if(xhr.status==200){ alert("刷新成功"); document.getElementById("title").innerHTML="hello world!!"; }else{ alert("系统错误，请重试..."); } }else{ alert("正在刷新，请等待..."); } } //xhr.send(null);//get请求方式 xhr.send("name="+name);//post可以提交中文，而get不行 } </script>
    </head>
    <body>
        <form action="">
            <input type="text" name="name" id="name" onblur="check()">
            <input type="submit" value="提交">
        </form>
        <div id="title"></div>
    </body>
    </html>

2、web.xml配置

<servlet>
        <servlet-name>refresh</servlet-name>
        <servlet-class>text.Refresh</servlet-class>
      </servlet>
      <servlet-mapping>
        <servlet-name>refresh</servlet-name>
        <url-pattern>*.do</url-pattern>
      </servlet-mapping>

3、java servlet代码

package test;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    public class Refresh extends HttpServlet{ 
        @Override//如果使用的是get请求方式，则使用doGet方法
        protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            //转编码
            req.setCharacterEncoding("utf-8");
            resp.setContentType("text/html;charset=utf-8");
            String name=req.getParameter("name");
            PrintWriter out = resp.getWriter();
            System.out.println(name);
            if(name.equals("username")){
                out.print("用户名存在");
            }else{
                out.print("可以使用");
            }
        }
    }

![这里写图片描述][SouthEast]

[SouthEast]: /images/20220611/a8fb17adb2a6447394460fa53e59b8e7.png