AJAX通过前端发送AJAX请求获取数据库数据动态展示------AJAX

Love The Way You Lie 2024-02-20 04:16 66阅读 0赞

>     CREATE TABLE t_stu(id BIGINT AUTO_INCREMENT PRIMARY KEY,username VARCHAR(255),age INT,address VARCHAR(255));
>     INSERT INTO t_stu(id,username,age,address) VALUES(NULL,"zhangsan",15,"广州")
>     INSERT INTO t_stu(id,username,age,address) VALUES(NULL,"Jack",15,"广州")
>     INSERT INTO t_stu(id,username,age,address) VALUES(NULL,"Rose",15,"广州")
>     SELECT  * FROM t_stu
> 
> CREATE TABLE t\_stu(id BIGINT AUTO\_INCREMENT PRIMARY KEY,username VARCHAR(255),age INT,address VARCHAR(255));  
> INSERT INTO t\_stu(id,username,age,address) VALUES(NULL,"zhangsan",15,"广州")  
> INSERT INTO t\_stu(id,username,age,address) VALUES(NULL,"Jack",15,"广州")  
> INSERT INTO t\_stu(id,username,age,address) VALUES(NULL,"Rose",15,"广州")  
> SELECT \* FROM t\_stu

>     <!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>