ajax 局部刷新

最新推荐文章于 2022-04-17 09:21:00 发布

boy_TJ

最新推荐文章于 2022-04-17 09:21:00 发布

阅读量369

点赞数

分类专栏： java-web 文章标签： ajax servlet

本文链接：https://blog.csdn.net/TJLsir/article/details/76474033

版权

java-web 专栏收录该内容

5 篇文章 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("可以使用");
        }
    }
}