AJAX从服务器获取数据遍历输出暂时到页面上------AJAX

旧约Alatus

已于 2023-11-14 22:16:02 修改

阅读量108

点赞数 1

分类专栏： JAVA AJAX 计算机网络文章标签： javascript ajax java java-ee tomcat servlet 前端

于 2023-11-14 11:02:43 首次发布

本文链接：https://blog.csdn.net/2201_75960169/article/details/134394476

版权

JAVA 同时被 3 个专栏收录

534 篇文章 3 订阅

订阅专栏

计算机网络

131 篇文章 0 订阅

订阅专栏

AJAX

45 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script type="text/javascript">
  window.onload = function ()
  {
    document.getElementById("show").onclick = function ()
    {
      var ajax = new XMLHttpRequest();
      ajax.onreadystatechange = function ()
      {
        if(ajax.readyState === 4)
        {
          if(ajax.status === 200)
          {
            document.getElementById("stuTbody").innerHTML = ajax.responseText;
          }
          else
          {
            alert(ajax.status);
          }
        }
      }
      ajax.open("GET","/ajax/ajaxRequest4?Time=" + new Date().getTime(),true);
      ajax.send();
    }
    document.getElementById("btn").onclick = function ()
    {
      var ajax = new XMLHttpRequest();
      ajax.onreadystatechange = function ()
      {
        if(ajax.readyState === 4)
        {
          if(ajax.status === 200)
          {
            document.getElementById("myDiv").innerHTML = ajax.responseText;
          }
          else
          {
            alert(ajax.status);
          }
        }
      }
      ajax.open("POST","/ajax/AJAXRequest3",true);
      //send方法就是放在请求体里面提交的
      //会自动在请求体提交数据
      //使用js获取用户名密码
      var username = document.getElementById("username").value;
      var password = document.getElementById("password").value;
      console.log(username);
      console.log(password);
      //需要模拟ajax为form表单
      //这个设置不可以放在open开启链接之前
      ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
      //我们需要设置form的请求头的内容类型
      //这里的格式依旧是遵循Http协议来,需要遵循name=value的格式提交
      //下面就会模拟form表单了
      ajax.send("username=" + username + "&password=" + password);
    }
  }
</script>
用户名<input type="text" name="username" id="username">
<br>
密码<input type="password" name="password" id="password">
<br>
<button id="btn">发送AJAX的Post</button>
<br>
<div id="myDiv"></div>
<br>
<button id="show">展示学生列表</button>
<table width="50%" border="1px">
  <tr>
    <th>序号</th>
    <th>姓名</th>
    <th>年龄</th>
    <th>住址</th>
  </tr>
  <tbody id="stuTbody">
  </tbody>
</table>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script type="text/javascript">
  window.onload = function ()
  {
    document.getElementById("show").onclick = function ()
    {
      var ajax = new XMLHttpRequest();
      ajax.onreadystatechange = function ()
      {
        if(ajax.readyState === 4)
        {
          if(ajax.status === 200)
          {
            document.getElementById("stuTbody").innerHTML = ajax.responseText;
          }
          else
          {
            alert(ajax.status);
          }
        }
      }
      ajax.open("GET","/ajax/ajaxRequest4?Time=" + new Date().getTime(),true);
      ajax.send();
    }
    document.getElementById("btn").onclick = function ()
    {
      var ajax = new XMLHttpRequest();
      ajax.onreadystatechange = function ()
      {
        if(ajax.readyState === 4)
        {
          if(ajax.status === 200)
          {
            document.getElementById("myDiv").innerHTML = ajax.responseText;
          }
          else
          {
            alert(ajax.status);
          }
        }
      }
      ajax.open("POST","/ajax/AJAXRequest3",true);
      //send方法就是放在请求体里面提交的
      //会自动在请求体提交数据
      //使用js获取用户名密码
      var username = document.getElementById("username").value;
      var password = document.getElementById("password").value;
      console.log(username);
      console.log(password);
      //需要模拟ajax为form表单
      //这个设置不可以放在open开启链接之前
      ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
      //我们需要设置form的请求头的内容类型
      //这里的格式依旧是遵循Http协议来,需要遵循name=value的格式提交
      //下面就会模拟form表单了
      ajax.send("username=" + username + "&password=" + password);
    }
  }
</script>
用户名<input type="text" name="username" id="username">
<br>
密码<input type="password" name="password" id="password">
<br>
<button id="btn">发送AJAX的Post</button>
<br>
<div id="myDiv"></div>
<br>
<button id="show">展示学生列表</button>
<table width="50%" border="1px">
  <tr>
    <th>序号</th>
    <th>姓名</th>
    <th>年龄</th>
    <th>住址</th>
  </tr>
  <tbody id="stuTbody">
  </tbody>
</table>
</body>
</html>

package com.bjpowernode.AJAX.servlet;

import com.bjpowernode.oa.utils.DBUtil;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

@WebServlet("/ajaxRequest4")
public class ajaxRequest4 extends HttpServlet
{
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        Connection connection = null;
        PreparedStatement statement = null;
        ResultSet resultSet = null;
        PrintWriter out = response.getWriter();
        try
        {
            connection = DBUtil.getConnection();
            String sql = "select * from t_stu";
            statement = connection.prepareStatement(sql);
            resultSet = statement.executeQuery();
            while (resultSet.next())
            {
                long id = resultSet.getLong("id");
                String username = resultSet.getString("username");
                int age = resultSet.getInt("age");
                String address = resultSet.getString("address");
                out.println("<tr><td>");
                out.println(id);
                out.println("</td><td>");
                out.println(username);
                out.println("</td><td>");
                out.println(age);
                out.println("</td><td>");
                out.println(address);
                out.println("</td></tr>");
            }
        }
        catch (SQLException e)
        {
            throw new RuntimeException(e);
        }
        finally
        {
            DBUtil.close(connection,statement,resultSet);
        }
    }
}

package com.bjpowernode.AJAX.servlet;

import com.bjpowernode.oa.utils.DBUtil;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

@WebServlet("/ajaxRequest4")
public class ajaxRequest4 extends HttpServlet
{
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        Connection connection = null;
        PreparedStatement statement = null;
        ResultSet resultSet = null;
        PrintWriter out = response.getWriter();
        try
        {
            connection = DBUtil.getConnection();
            String sql = "select * from t_stu";
            statement = connection.prepareStatement(sql);
            resultSet = statement.executeQuery();
            while (resultSet.next())
            {
                long id = resultSet.getLong("id");
                String username = resultSet.getString("username");
                int age = resultSet.getInt("age");
                String address = resultSet.getString("address");
                out.println("<tr><td>");
                out.println(id);
                out.println("</td><td>");
                out.println(username);
                out.println("</td><td>");
                out.println(age);
                out.println("</td><td>");
                out.println(address);
                out.println("</td></tr>");
            }
        }
        catch (SQLException e)
        {
            throw new RuntimeException(e);
        }
        finally
        {
            DBUtil.close(connection,statement,resultSet);
        }
    }
}