软件系统开发定制Ajax：ajax发送Post请求、ajax案例

目录：

（1）ajax发送Post请求

（2）ajax发送post软件系统开发定制请求模拟提交表单数据

（3）ajax软件系统开发定制案例验证用户名是否可用

（4）发送ajax软件系统开发定制请求动态展示学生列表案例

 

（1）ajax发送Post请求

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>发送ajax post请求</title>
  6. </head>
  7. <body>
  8.  
  9. <script type="text/javascript">
  10.     window.onload = function () {
  11.         document.getElementById("mybtn").onclick = function () {
  12.             // 发送AJAX POST请求
  13.             // 1. 创建AJAX核心对象
  14.             var xhr = new XMLHttpRequest();
  15.             // 2. 软件系统开发定制注册回调函数
  16.             xhr.onreadystatechange = function (){
  17.                 if (this.readyState == 4) {
  18.                     if (this.status == 200) {
  19.                         document.getElementById("mydiv").innerHTML = this.responseText
  20.                     }else{
  21.                         alert(this.status)
  22.                     }
  23.                 }
  24.             }
  25.             // 3. 开启通道
  26.             xhr.open("POST", "/ajax/ajaxrequest3", true)
  27.  
  28.             // 4. 发送请求
  29.             xhr.send()
  30.         }
  31.     }
  32. </script>
  33.  
  34. <button id="mybtn">发送AJAX POST请求</button>
  35.  
  36. <div id="mydiv"></div>
  37.  
  38. </body>
  39. </html>

AjaxRequest3Servlet：out软件系统开发定制返回的数据回被浏览器：XMLHttpRequest对象获取

  1. package com.bjpowernode.ajax.servlet;
  2. import javax.servlet.ServletException;
  3. import javax.servlet.annotation.WebServlet;
  4. import javax.servlet.http.HttpServlet;
  5. import javax.servlet.http.HttpServletRequest;
  6. import javax.servlet.http.HttpServletResponse;
  7. import java.io.IOException;
  8. import java.io.PrintWriter;
  9.  
  10.  
  11. @WebServlet("/ajaxrequest3")
  12. public class AjaxRequest3Servlet extends HttpServlet {
  13.     @Override
  14.     protected void doPost(HttpServletRequest request, HttpServletResponse response)
  15.             throws ServletException, IOException {
  16.         response.setContentType("text/html;charset=UTF-8");
  17.         PrintWriter out = response.getWriter();
  18.         out.print("<font color='red'>软件系统开发定制用户名已存在！！！</font>");
  19.  
  20.        
  21.     }
  22. }

 （2）ajax发送post请求模拟提交表单数据

ajaxPost.html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>发送ajax post请求</title>
  6. </head>
  7. <body>
  8.  
  9. <script type="text/javascript">
  10.     window.onload = function () {
  11.         document.getElementById("mybtn").onclick = function () {
  12.             // 发送AJAX POST请求
  13.             // 1. 创建AJAX核心对象
  14.             var xhr = new XMLHttpRequest();
  15.             // 2. 注册回调函数
  16.             xhr.onreadystatechange = function (){
  17.                 if (this.readyState == 4) {
  18.                     if (this.status == 200) {
  19.                         document.getElementById("mydiv").innerHTML = this.responseText
  20.                     }else{
  21.                         alert(this.status)
  22.                     }
  23.                 }
  24.             }
  25.             // 3. 开启通道
  26.             xhr.open("POST", "/ajax/ajaxrequest3", true)
  27.  
  28.             // 4. 发送请求
  29.             // 怎么模拟AJAX提交form表单呢？设置请求头的内容类型(这行代码非常关键，是模拟form表单提交的关键代码。)
  30.             // 设置请求头的内容类型时，必须在open之后。
  31.             xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
  32.  
  33.             // 放到send()这个函数的小括号当中的数据，会自动在请求体当中提交数据。
  34.             // 使用JS代码获取用户填写的用户名和密码
  35.             var username = document.getElementById("username").value;
  36.             var password = document.getElementById("password").value;
  37.             //xhr.send("注意格式：放在这里的数据就是在请求体当中提交的，格式不能随便来，还是需要遵循HTTP的协议：name=value&name=value&name=value")
  38.             xhr.send("username="+username+"&password="+password)
  39.         }
  40.     }
  41. </script>
  42.  
  43. 用户名<input type="text" id="username"><br>
  44. 密码<input type="password" id="password"><br>
  45.  
  46. <button id="mybtn">发送AJAX POST请求</button>
  47.  
  48. <div id="mydiv"></div>
  49.  
  50. </body>
  51. </html>

AjaxRequest3Servlet：

  1. package com.bjpowernode.ajax.servlet;
  2. import javax.servlet.ServletException;
  3. import javax.servlet.annotation.WebServlet;
  4. import javax.servlet.http.HttpServlet;
  5. import javax.servlet.http.HttpServletRequest;
  6. import javax.servlet.http.HttpServletResponse;
  7. import java.io.IOException;
  8. import java.io.PrintWriter;
  9.  
  10.  
  11. @WebServlet("/ajaxrequest3")
  12. public class AjaxRequest3Servlet extends HttpServlet {
  13.     @Override
  14.     protected void doPost(HttpServletRequest request, HttpServletResponse response)
  15.             throws ServletException, IOException {
  16.         response.setContentType("text/html;charset=UTF-8");
  17.         PrintWriter out = response.getWriter();
  18.         //out.print("<font color='red'>用户名已存在！！！</font>");
  19.  
  20.         // 获取提交数据
  21.         String username = request.getParameter("username");
  22.         String password = request.getParameter("password");
  23.         out.print("用户名是：" + username + "，密码是：" + password);
  24.     }
  25. }

 （3）ajax案例验证用户名是否可用

 ajax5.html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>AJAX POST请求验证用户名是否可用</title>
  6. </head>
  7. <body>
  8.  
  9. <script type="text/javascript">
  10.     window.onload = function(){
  11.  
  12.         //获得焦点，span标签清空
  13.         document.getElementById("username").onfocus = function (){
  14.             document.getElementById("tipMsg").innerHTML = ""
  15.         }
  16.  
  17.         //失去焦点，触发ajax请求
  18.         document.getElementById("username").onblur = function (){
  19.             //console.log("正在发送AJAX POST请求验证用户名")
  20.             // 发送AJAX POST请求
  21.             // 1.
  22.             var xhr = new XMLHttpRequest()
  23.             // 2.
  24.             xhr.onreadystatechange = function () {
  25.                 if (this.readyState == 4) {
  26.                     if (this.status == 200) {
  27.                         document.getElementById("tipMsg").innerHTML = this.responseText
  28.                     }else{
  29.                         alert(this.status)
  30.                     }
  31.                 }
  32.             }
  33.             // 3.开启通道
  34.             xhr.open("POST", "/ajax/ajaxrequest4", true)
  35.             // 4.设置表单请求头
  36.             xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
  37.             // 获取表单数据
  38.             var username = document.getElementById("username").value
  39.             xhr.send("uname=" + username)
  40.         }
  41.     }
  42. </script>
  43.  
  44. 用户名：<input type="text" id="username">
  45.  
  46. <span id="tipMsg"></span>
  47.  
  48. </body>
  49. </html>

AjaxRequest4Servlet:

  1. package com.bjpowernode.ajax.servlet;
  2.  
  3. import javax.servlet.ServletException;
  4. import javax.servlet.annotation.WebServlet;
  5. import javax.servlet.http.HttpServlet;
  6. import javax.servlet.http.HttpServletRequest;
  7. import javax.servlet.http.HttpServletResponse;
  8. import java.io.IOException;
  9. import java.io.PrintWriter;
  10. import java.sql.*;
  11.  
  12.  
  13. @WebServlet("/ajaxrequest4")
  14. public class AjaxRequest4Servlet extends HttpServlet {
  15.     @Override
  16.     protected void doPost(HttpServletRequest request, HttpServletResponse response)
  17.             throws ServletException, IOException {
  18.         // 获取用户名
  19.         String uname = request.getParameter("uname");
  20.         // 打布尔标记（一种编程模型）
  21.         boolean flag = false; // 默认是用户名不存在。
  22.         // 连接数据库验证用户名是否存在
  23.         Connection conn = null;
  24.         PreparedStatement ps = null;
  25.         ResultSet rs = null;
  26.         try {
  27.             // 1.注册驱动
  28.             Class.forName("com.mysql.cj.jdbc.Driver");
  29.             // 2.获取连接
  30.             conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/bjpowernode?useUnicode=true&characterEncoding=utf8&serverTimezone=UTC", "root", "123456");
  31.             // 3.获取预编译的数据库操作对象
  32.             String sql = "select id,name from t_user where name = ?";
  33.             ps = conn.prepareStatement(sql);
  34.             ps.setString(1, uname);
  35.             // 4.执行SQL语句
  36.             rs = ps.executeQuery();
  37.             // 5.处理结果集
  38.             if (rs.next()) {
  39.                 // 用户名已存在。
  40.                 flag = true;
  41.             }
  42.  
  43.         } catch (Exception e) {
  44.             e.printStackTrace();
  45.         } finally {
  46.             // 6.释放资源
  47.             if (rs != null) {
  48.                 try {
  49.                     rs.close();
  50.                 } catch (SQLException e) {
  51.                     e.printStackTrace();
  52.                 }
  53.             }
  54.             if (ps != null) {
  55.                 try {
  56.                     ps.close();
  57.                 } catch (SQLException e) {
  58.                     e.printStackTrace();
  59.                 }
  60.             }
  61.             if (conn != null) {
  62.                 try {
  63.                     conn.close();
  64.                 } catch (SQLException e) {
  65.                     e.printStackTrace();
  66.                 }
  67.             }
  68.         }
  69.  
  70.         // 响应结果到浏览器
  71.         response.setContentType("text/html;charset=UTF-8");
  72.         PrintWriter out = response.getWriter();
  73.         if (flag) {
  74.             // 用户名已存在，不可用
  75.             out.print("<font color='red'>对不起，用户名已存在</font>");
  76.         }else{
  77.             // 用户名不存在，可以使用
  78.             out.print("<font color='green'>用户名可以使用</font>");
  79.         }
  80.     }
  81. }

 数据库表中的数据：

 （4）发送ajax请求动态展示学生列表案例

 

ajax6.html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>发送AJAX请求，显示学生列表</title>
  6. </head>
  7. <body>
  8.  
  9. <script type="text/javascript">
  10.     window.onload = function () {
  11.         document.getElementById("btn").onclick = function () {
  12.             // 1.创建核心对象
  13.             var xhr = new XMLHttpRequest();
  14.             // 2.注册回调函数
  15.             xhr.onreadystatechange = function () {
  16.                 if (this.readyState == 4) {
  17.                     if (this.status == 200) {
  18.                         document.getElementById("stutbody").innerHTML = this.responseText
  19.  
  20.                     } else {
  21.                         alert(this.status)
  22.                     }
  23.                 }
  24.             }
  25.             // 3.开启通道
  26.             xhr.open("GET", "/ajax/ajaxrequest5?t=" + new Date().getTime(), true)
  27.             // 4.发送请求
  28.             xhr.send()
  29.         }
  30.     }
  31. </script>
  32.  
  33. <input type="button" value="显示学员列表" id="btn">
  34.  
  35. <table width="50%" border="1px">
  36.     <thead>
  37.     <tr>
  38.         <th>序号</th>
  39.         <th>姓名</th>
  40.         <th>年龄</th>
  41.         <th>住址</th>
  42.     </tr>
  43.     </thead>
  44.     <tbody id="stutbody">
  45.     <!--<tr>
  46.         <td>1</td>
  47.         <td>张三</td>
  48.         <td>20</td>
  49.         <td>北京大兴区</td>
  50.     </tr>
  51.     <tr>
  52.         <td>2</td>
  53.         <td>李四</td>
  54.         <td>22</td>
  55.         <td>北京海淀区</td>
  56.     </tr>-->
  57.     </tbody>
  58. </table>
  59.  
  60. </body>
  61. </html>

AjaxRequest5Servlet:

  1. package com.bjpowernode.ajax.servlet;
  2.  
  3. import javax.servlet.ServletException;
  4. import javax.servlet.annotation.WebServlet;
  5. import javax.servlet.http.HttpServlet;
  6. import javax.servlet.http.HttpServletRequest;
  7. import javax.servlet.http.HttpServletResponse;
  8. import java.io.IOException;
  9. import java.io.PrintWriter;
  10. import java.sql.*;
  11. import java.util.ArrayList;
  12. import java.util.List;
  13.  
  14.  
  15. @WebServlet("/ajaxrequest5")
  16. public class AjaxRequest5Servlet extends HttpServlet {
  17.     @Override
  18.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  19.         // 连接数据库，查询学员信息，拼接HTML代码，响应HTML代码到浏览器（这里就不再连接数据库了，写死了。）
  20.         response.setContentType("text/html;charset=UTF-8");
  21.         PrintWriter out = response.getWriter();
  22.  
  23.         // 不连接数据库，拼接HTML代码
  24.         StringBuilder html = new StringBuilder();
  25.  
  26.         html.append("<tr>");
  27.         html.append("<td>1</td>");
  28.         html.append("<td>王五</td>");
  29.         html.append("<td>20</td>");
  30.         html.append("<td>北京大兴区</td>");
  31.         html.append("</tr>");
  32.         html.append("<tr>");
  33.         html.append("<td>2</td>");
  34.         html.append("<td>李四</td>");
  35.         html.append("<td>22</td>");
  36.         html.append("<td>北京海淀区</td>");
  37.         html.append("</tr>");
  38.  
  39.         out.print(html);
  40.  
  41.  
  42.       
  43.     }
  44. }

点击按钮：

 上面项目，目前存在的缺点：在后端的java代码中又开始拼接HTML代码了。显然这是在后端java中写前端的HTML代码。不好维护。一般后端不会这样写拼html串返回，只会在后端查数据，把数据返回交给前端

能不能直接将数据返回，给WEB前端数据就行了。让WEB前端能够拿到数据就行，然后页面展示的功能交给WEB前端来处理。

我们后端的java代码能不能只返回数据？？？？可以。（返回数据可以采用JSON的格式，也可以采用XML的格式）

一般采用JSON，因为json体积小，xml体积大，解析起来有一定难度。

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发