AJAX通过手动拼接的方式从数据库动态取值并将拼接的JSON动态拼接到前端页面------AJAX

客官°小女子只卖身不卖艺 2024-02-18 10:32 43阅读 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)
>               {
>                 var fromJava = ajax.responseText;
>                 var json  = JSON.parse(fromJava);
>                 console.log(json);
>                 var html = "";
>                 for (var i = 0; i < json.length; i++)
>                 {
>                   var stu = json[i];
>                   html += "<tr><th>";
>                   html += stu.id;
>                   html += "</th><th>";
>                   html += stu.username;
>                   html += "</th><th>";
>                   html += stu.age;
>                   html += "</th><th>";
>                   html += stu.address;
>                   html += "</th><tr>";
>                 }
>                 document.getElementById("stuTbody").innerHTML = html;
>               }
>               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").value = 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)
>               {
>                 var fromJava = ajax.responseText;
>                 var json  = JSON.parse(fromJava);
>                 console.log(json);
>                 var html = "";
>                 for (var i = 0; i < json.length; i++)
>                 {
>                   var stu = json[i];
>                   html += "<tr><th>";
>                   html += stu.id;
>                   html += "</th><th>";
>                   html += stu.username;
>                   html += "</th><th>";
>                   html += stu.age;
>                   html += "</th><th>";
>                   html += stu.address;
>                   html += "</th><tr>";
>                 }
>                 document.getElementById("stuTbody").innerHTML = html;
>               }
>               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").value = 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();
>                 StringBuilder stringBuilder = new StringBuilder();
>                 stringBuilder.append("[");
>                 while(resultSet.next())
>                 {
>                     long id = resultSet.getLong("id");
>                     String username = resultSet.getString("username");
>                     int age = resultSet.getInt("age");
>                     String address = resultSet.getString("address");
>                     //将我们拼接的HTML代码改为拼接字符串
>                     stringBuilder.append("{\"id\" :");
>                     stringBuilder.append("\"" + id + "\"");
>                     stringBuilder.append(",\"username\" :");
>                     stringBuilder.append("\"" + username + "\"");
>                     stringBuilder.append(",\"age\" :");
>                     stringBuilder.append("\"" + age + "\"");
>                     stringBuilder.append(",\"address\" :");
>                     stringBuilder.append("\"" + address + "\"");
>                     stringBuilder.append("}");
>                     stringBuilder.append(",");
>     //                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>");
>                 }
>                 stringBuilder.deleteCharAt(stringBuilder.length() - 1);
>                 stringBuilder.append("]");
>                 out.println(stringBuilder);
>             }
>             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();
>                 StringBuilder stringBuilder = new StringBuilder();
>                 stringBuilder.append("[");
>                 while(resultSet.next())
>                 {
>                     long id = resultSet.getLong("id");
>                     String username = resultSet.getString("username");
>                     int age = resultSet.getInt("age");
>                     String address = resultSet.getString("address");
>                     //将我们拼接的HTML代码改为拼接字符串
>                     stringBuilder.append("{\"id\" :");
>                     stringBuilder.append("\"" + id + "\"");
>                     stringBuilder.append(",\"username\" :");
>                     stringBuilder.append("\"" + username + "\"");
>                     stringBuilder.append(",\"age\" :");
>                     stringBuilder.append("\"" + age + "\"");
>                     stringBuilder.append(",\"address\" :");
>                     stringBuilder.append("\"" + address + "\"");
>                     stringBuilder.append("}");
>                     stringBuilder.append(",");
>     //                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>");
>                 }
>                 stringBuilder.deleteCharAt(stringBuilder.length() - 1);
>                 stringBuilder.append("]");
>                 out.println(stringBuilder);
>             }
>             catch (SQLException e)
>             {
>                 throw new RuntimeException(e);
>             }
>             finally
>             {
>                 DBUtil.close(connection,statement,resultSet);
>             }
>         }
>     }