沧州网站制作多少钱,wordpress快速部署,郑州网站建设 服务创业,网站备案需要去哪里AJAX学习笔记2发送Post请求_biubiubiu0706的博客-CSDN博客
1.验证用户名是否可用
需求,用户输入用户名,失去焦点--onblur失去焦点事件,发送AJAX POST请求,验证用户名是否可用 新建表 前端页面 WEB-INF下新建lib包引入依赖,要用JDBC 后端代码
package com.web;import jav…AJAX学习笔记2发送Post请求_biubiubiu0706的博客-CSDN博客
1.验证用户名是否可用
需求,用户输入用户名,失去焦点--onblur失去焦点事件,发送AJAX POST请求,验证用户名是否可用 新建表 前端页面 WEB-INF下新建lib包引入依赖,要用JDBC 后端代码
package com.web;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.*;/*** author hrui* date 2023/9/3 22:11*/
WebServlet(/checkusername)
public class AjaxRequestCheckName extends HttpServlet {Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//获取用户名String username req.getParameter(username);//打布尔标记(一种编程模型)boolean flagfalse;//连接数据库校验用户名是否存在Connection connnull;PreparedStatement psnull;ResultSet rsnull;//1.注册驱动//System.setProperty(jdbc.drivers,com.mysql.cj.jdbc.Driver);try {Class.forName(com.mysql.cj.jdbc.Driver);//2.获取连接conn DriverManager.getConnection(xxx, xxx, xxx);//3.获取执行对象String sqlselect id,name from t_user where name?;ps conn.prepareStatement(sql);ps.setString(1, username);//4.执行sqlrs ps.executeQuery();//5.处理结果集if(rs.next()){//如果只有一条的情况//用户名存在flagtrue;}} catch (Exception e) {e.printStackTrace();}finally {if(rs!null){try {rs.close();} catch (SQLException e) {e.printStackTrace();}}if(ps!null){try {ps.close();} catch (SQLException e) {e.printStackTrace();}}if(conn!null){try {conn.close();} catch (SQLException e) {e.printStackTrace();}}}//响应结果到浏览器resp.setContentType(text/html;charsetutf-8);PrintWriter writer resp.getWriter();if(flag){writer.print(font colorred用户名存在,不可用/font);}else{writer.print(font colorgreen用户名可用/font);}}public static void main(String[] args) {try {//Class.forName(com.mysql.cj.jdbc.Driver);Connection conn DriverManager.getConnection(xxx, xxx, xxx);System.out.println(conn);} catch (Exception e) {e.printStackTrace();}}
}还可以在input获得焦点时候对span里面的数据清空 其实和input里面直接写 οnfοcusxxx方法 一样 2.用户点击按钮,发送AJAX请求 显示学院列表 测试 现在这种情况存在的问题是是后端代码又开始拼接HTML 能不能直接返回数据,剩下让前端处理 可以返回JSON 或者 XML 返回JSON数据 回顾JSON 也可以是这样 测试 上面是在JS代码中创建JSON对象,数组的访问 但是在后端返回前端时候,永远返回的都是字符串---如何将JSON字符串转换为JSON对象呢 测试 下面后端就用JSON格式字符串的方式返回数据 下面去连接下数据库 前端 后端
package com.web;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.*;/*** author hrui* date 2023/9/3 23:57*/
WebServlet(/studys)
public class AjaxRequestStudys extends HttpServlet {Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//连接数据库,查询学院resp.setContentType(text/html;charsetutf-8);PrintWriter writer resp.getWriter();StringBuilder buildernew StringBuilder();String jsonStr;// builder.append(tr);
// builder.append(td1/td);
// builder.append(td张三/td);
// builder.append(td20/td);
// builder.append(td北京大兴区/td);
// builder.append(/tr);
// builder.append(tr);
// builder.append(td2/td);
// builder.append(td李四/td);
// builder.append(td22/td);
// builder.append(td北京海淀区/td);
// builder.append(/tr);//拼接一个JSON数组回去//builder.append([);//用单引号也不行 前端解析不了
// builder.append({id:1,name:张三,age:20,addr:北京大兴区},);
// builder.append({id:2,name:李四,age:22,addr:北京海淀区});
// builder.append({\id\:1,\name\:\张三\,\age\:20,\addr\:\北京大兴区\},);
// builder.append({\id\:2,\name\:\李四\,\age\:22,\addr\:\北京海淀区\});//连接数据库校验用户名是否存在Connection connnull;PreparedStatement psnull;ResultSet rsnull;//1.注册驱动//System.setProperty(jdbc.drivers,com.mysql.cj.jdbc.Driver);try {Class.forName(com.mysql.cj.jdbc.Driver);//2.获取连接conn DriverManager.getConnection(xxx, xxx, xxx);//3.获取执行对象String sqlselect id,name,age,addr from t_stu;ps conn.prepareStatement(sql);//4.执行sqlrs ps.executeQuery();//5.处理结果集builder.append([);while(rs.next()){//如果只有一条的情况String id rs.getString(id);String name rs.getString(name);String age rs.getString(age);String addr rs.getString(addr);//{id:1,name:zhangsan,age:13,addr:北京大兴区}builder.append({\id\:id,\name\:\name\,\age\:age,\addr\:\addr\},);}//去掉最后一个{},后面的逗号jsonStrbuilder.substring(0, builder.length()-1)];} catch (Exception e) {e.printStackTrace();}finally {if(rs!null){try {rs.close();} catch (SQLException e) {e.printStackTrace();}}if(ps!null){try {ps.close();} catch (SQLException e) {e.printStackTrace();}}if(conn!null){try {conn.close();} catch (SQLException e) {e.printStackTrace();}}}writer.print(jsonStr);}
}测试 这样拼接JSON太麻烦 使用fastjson对程序进行改进
引入jar包 不需要那么麻烦进行拼接
package com.web;import com.alibaba.fastjson.JSON;
import com.pojo.Student;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.*;
import java.util.ArrayList;
import java.util.List;/*** author hrui* date 2023/9/3 23:57*/
WebServlet(/studys)
public class AjaxRequestStudys extends HttpServlet {Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//连接数据库,查询学院resp.setContentType(text/html;charsetutf-8);PrintWriter writer resp.getWriter();
// StringBuilder buildernew StringBuilder();
// String jsonStr;ListStudent listnew ArrayList();// builder.append(tr);
// builder.append(td1/td);
// builder.append(td张三/td);
// builder.append(td20/td);
// builder.append(td北京大兴区/td);
// builder.append(/tr);
// builder.append(tr);
// builder.append(td2/td);
// builder.append(td李四/td);
// builder.append(td22/td);
// builder.append(td北京海淀区/td);
// builder.append(/tr);//拼接一个JSON数组回去//builder.append([);//用单引号也不行 前端解析不了
// builder.append({id:1,name:张三,age:20,addr:北京大兴区},);
// builder.append({id:2,name:李四,age:22,addr:北京海淀区});
// builder.append({\id\:1,\name\:\张三\,\age\:20,\addr\:\北京大兴区\},);
// builder.append({\id\:2,\name\:\李四\,\age\:22,\addr\:\北京海淀区\});//连接数据库校验用户名是否存在Connection connnull;PreparedStatement psnull;ResultSet rsnull;String s;//1.注册驱动//System.setProperty(jdbc.drivers,com.mysql.cj.jdbc.Driver);try {Class.forName(com.mysql.cj.jdbc.Driver);//2.获取连接conn DriverManager.getConnection(xxx, xxx, xxx);//3.获取执行对象String sqlselect id,name,age,addr from t_stu;ps conn.prepareStatement(sql);//4.执行sqlrs ps.executeQuery();//5.处理结果集//builder.append([);while(rs.next()){//如果只有一条的情况String id rs.getString(id);String name rs.getString(name);String age rs.getString(age);String addr rs.getString(addr);//{id:1,name:zhangsan,age:13,addr:北京大兴区}//builder.append({\id\:id,\name\:\name\,\age\:age,\addr\:\addr\},);Student stunew Student(id,name,age,addr);list.add(stu);}//去掉最后一个{},后面的逗号//jsonStrbuilder.substring(0, builder.length()-1)];s JSON.toJSONString(list);} catch (Exception e) {e.printStackTrace();}finally {if(rs!null){try {rs.close();} catch (SQLException e) {e.printStackTrace();}}if(ps!null){try {ps.close();} catch (SQLException e) {e.printStackTrace();}}if(conn!null){try {conn.close();} catch (SQLException e) {e.printStackTrace();}}}writer.print(s);}
}
测试 下面用XML进行数据交互(XML体积大,现在相对用的少)
后端代码 注意下Content-Type
WebServlet(/xmlstudys)
public class AjaxRequestXML extends HttpServlet {Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//注意响应类型是XMLresp.setContentType(text/xml;charsetutf-8);PrintWriter writer resp.getWriter();StringBuilder xmlnew StringBuilder();/*XML格式StudentsStudentid1/idname张三/nameage22/ageaddr北京大兴区/addr/StudentStudentid2/idname李四/nameage23/ageaddr北京海淀区/addr/Student/Students*/xml.append(Students);xml.append(Student);xml.append(id1/id);xml.append(name张三/name);xml.append(age22/age);xml.append(addr北京大兴区/addr);xml.append(/Student);xml.append(Student);xml.append(id2/id);xml.append(name李四/name);xml.append(age23/age);xml.append(addr北京海淀区/addr);xml.append(/Student);xml.append(/Students);writer.print(xml);}
}
前端代码
!DOCTYPE html
html langen
headmeta charsetUTF-8title使用XML完成数据交互/title
/head
body
script typetext/javascriptwindow.onloadfunction(){document.getElementById(btn).onclickfunction(){var xhrnew XMLHttpRequest();xhr.onreadystatechangefunction (){if(this.readyState4){if(this.status200){//服务器响应XML字符串,如何接收//使用XMLHTTPRequest的responseXML属性,接收之后,自动封装成document对象(文档对象)var xmlDocthis.responseXML;console.log(xmlDoc)}else{}}}xhr.open(get,/ajax/xmlstudys,true)//xhr.setRequestHeader(Content-Type,application/x-www-form-urlencoded)xhr.send()}}
/scriptinput typebutton value显示学生列表 idbtntable width50% border1pxtrth序号/thth姓名/thth年龄/thth住址/th/trtbody idstubody!-- tr--!-- td1/td--!-- td张三/td--!-- td20/td--!-- td北京大兴区/td--!-- /tr--!-- tr--!-- td2/td--!-- td李四/td--!-- td22/td--!-- td北京海淀区/td--!-- /tr--/tbody
/table
/body
/html
测试 具体前端代码
!DOCTYPE html
html langen
headmeta charsetUTF-8title使用XML完成数据交互/title
/head
body
script typetext/javascriptwindow.onloadfunction(){document.getElementById(btn).onclickfunction(){var xhrnew XMLHttpRequest();xhr.onreadystatechangefunction (){if(this.readyState4){if(this.status200){//服务器响应XML字符串,如何接收//使用XMLHTTPRequest的responseXML属性,接收之后,自动封装成document对象(文档对象)var xmlDocthis.responseXML;console.log(xmlDoc)//获取所有student元素,返回了多个对象,是个数组var studentsxmlDoc.getElementsByTagName(student)console.log(students[0].nodeName)var htmlfor(var i0;istudents.length;i){var stustudents[i]//获取student节点下所有子元素var sstu.childNodes;htmltrfor(var j0;js.length;j){var nodes[j]if(node.nodeNameid){console.log(idnode.textContent)htmltdnode.textContent/td}if(node.nodeNamename){console.log(namenode.textContent)htmltdnode.textContent/td}if(node.nodeNameage){console.log(agenode.textContent)htmltdnode.textContent/td}if(node.nodeNameaddr){console.log(addrnode.textContent)htmltdnode.textContent/td}}html/tr}document.getElementById(stubody).innerHTMLhtml}else{}}}xhr.open(get,/ajax/xmlstudys,true)//xhr.setRequestHeader(Content-Type,application/x-www-form-urlencoded)xhr.send()}}
/scriptinput typebutton value显示学生列表 idbtntable width50% border1pxtrth序号/thth姓名/thth年龄/thth住址/th/trtbody idstubody!-- tr--!-- td1/td--!-- td张三/td--!-- td20/td--!-- td北京大兴区/td--!-- /tr--!-- tr--!-- td2/td--!-- td李四/td--!-- td22/td--!-- td北京海淀区/td--!-- /tr--/tbody
/table
/body
/html
