之前聽說過別人使用ajax制作一個在線聊天室，對ajax也不熟悉，但是最近有一個需求，做一個在線咨詢，也去網上查過n次資料，下過檔案，但是一直找不到我想要的，花費了三天終于是做完了，也沒寫過博客，解決了問題，現在記錄一下，
技術上用的是jsp+servlet+ajax，
資料庫
資料庫用到4張表，用戶表，客服表，用戶咨詢表，聊天記錄表，用戶狀態有3個狀態，分別為1,2,3，分別代表在線，請求咨詢，正在咨詢，
1、用戶user表，主要欄位有username，pwd，status；
2、客服表contact主要欄位有contactname，pwd；
3、用戶咨詢表record_user欄位有recordid，username；
4、聊天記錄表record_content欄位有recordid,username,usercontent,contactname,contactcontent,tim，
每張表的主鍵為id，用戶表和客服表中的pwd主要是用來登錄用，
設計思路：
1、一個用戶只有一個咨詢號，用戶第一次點擊咨詢的時候，添加咨詢號，如果用戶 有咨詢號，那么無需添加咨詢號，
2、客服端首頁將用戶處于2,3狀態的用戶展示出來，每10秒進行重繪一次界面，將2狀態的前端展示位請求咨詢，3狀態的展示位正在咨詢，正在咨詢的顏色為黃色，請求咨詢的顏色為紅色，點擊紅色可進入聊天，點擊黃色彈出彈窗顯示已有客服正在服務，
3、用戶進入咨詢界面或每發一次資訊狀態都變為2，客服進入咨詢界面或，每發一次資訊狀態都為3，
4、咨詢界面，用戶在左邊，客服在右邊，按照時間先后來排列，
sql="select * from record_content where recordid=? order by tim";
前端界面
前端css樣式
<style type="text/css">
*{
margin:0;
padding:0;
}
.one{
background:#fff;
margin-left:30%;
width:510px;
height:380px;
overflow-y:auto;
overflow-x:none;
}
.title{
margin-top:5px;
text-align:center;
margin-bottom:0px
}
.line{
margin-top:5px;
margin-bottom:5px;
}
.userContent{
background:#00BFFF;
margin-left:10px;
max-width:335px;
min-height:40px;
max-height:180px;
color:#fff;
line-height:40px;
border-radius:5px;
}
.contactInfo{
text-align:right;
margin-bottom:0px;
}
.contactContent{
background: #00FA9A;
margin-left:157px;
width:335px;
min-height:40px;
color:#fff;
line-height:40px;
max-height:180px;
border-radius:5px;
}
.chat{
margin-bottom:-1px;
margin-top:40px;
overflow-y:auto;
margin-left:30%;
margin-top:5px;
background:#fff;
width:500px;
}
.input{
width:380px;
height:30px;
margin-left:15px;
border-radius:5px;
border:1px blue solid;
}
.send{
margin-left:15px;
height:29px;
width:75px;
color:#fff;
border-radius:5px;
}
.recordid{
display:none;
}
.header{
width:510px;
height:20px;
background:#fff;
margin-left:30%;
}
</style>
前端body樣式
<div class="header">
<h5 class="title">客服咨詢</h5><span class="recordid" id="recordid">${recordid }</span>
<hr class="line">
</div>
<div class="one" id="one">
<!-- <div class="user">
<span class="userInfo"><span id="username">張三</span> 2020-10-14 09:29:33</span>
<div class="userContent">你好</div>
</div>
<div class="contact">
<p class="contactInfo">李四 2020-10-14 09:30:33</p>
<div class="contactContent">你好</div>
</div> -->
</div>
<div class="chat">
<input type="text" class="input" id="input">
<button class="send" id="send" onclick="send()">發送</button>
</div>
這里先將主體樣式注釋掉，后面內容用ajax添加，
前端js
<script type="text/javascript">
window.onload=function(){
var jsonString = '${beans}';
var jsonObject = JSON.parse(jsonString);
for(var i=0;i<jsonObject.length;i++){
if(jsonObject[i].usernam!=null){
$(".one").append(
"<div class='user'><span class='userInfo'><span>"
+jsonObject[i].usernam+
" </span>"
+jsonObject[i].tim+
"</span><div class='userContent'>"
+jsonObject[i].userContent+
"</div></div>");
}else{
$(".one").append(
"<div class='contact'><p class='contactInfo'>"
+jsonObject[i].contactnam+" "+jsonObject[i].tim+
"</p><div class='contactContent'>"
+jsonObject[i].contactContent+
"</div></div>");
}
}
document.getElementById("one").scrollTop=document.getElementById("one").scrollHeight;
}
</script>
<script type="text/javascript">
window.setInterval("refresh()",2000);//2秒執行一次,重繪功能
function refresh(){//用于追加新發的訊息
$.ajax({
type:"post",
url:"lianXiKeFuHistoryServlet",
contentType: "application/json;charset=utf-8",
success:function(data){
/* alert(data); */
console.log(data);
var jsonString = data;
var jsonObject = JSON.parse(jsonString);
for(var i=0;i<jsonObject.length;i++){
if(jsonObject[i].usernam!=null){
$(".one").append(
"<div class='user'><span class='userInfo'><span>"
+jsonObject[i].usernam+
" </span>"
+jsonObject[i].tim+
"</span><div class='userContent'>"
+jsonObject[i].userContent+
"</div></div>");
}else{
$(".one").append(
"<div class='contact'><p class='contactInfo'>"
+jsonObject[i].contactnam+" "+jsonObject[i].tim+
"</p><div class='contactContent'>"
+jsonObject[i].contactContent+
"</div></div>");
}
}
},
error:function(e){
console.log("失敗");
}
})
document.getElementById("one").scrollTop=document.getElementById("one").scrollHeight;
}
</script>
<script type="text/javascript">
window.setInterval("run()",500);//0.5秒執行一次
function run(){
var input=document.getElementById("input").value;
var send=document.getElementById("send");
if(input==""){
send.style.backgroundColor="#ddd";
send.disabled=true;//設定不可點擊
}else{
send.style.backgroundColor="blue";
send.disabled=false;//設定可點擊
}
}
</script>
<script type="text/javascript">
function send(){//發資訊，使用ajax，異步處理
var input=document.getElementById("input").value;
var input1=document.getElementById("input");
var recordid=document.getElementById("recordid").innerText;
$.ajax({
type:"post",
url:"addLianXiKeFuServlet?userContent="+input+"&recordid="+recordid,
contentType: "application/json;charset=utf-8",
success:function(data){
input1.value="";//發送成功之后，input的值變為空
/* refresh(); */
},
error:function(e){
alert("發送失敗");
}
})
}
</script>
當聊天窗內的訊息過多時，聊天框會溢位界面，所以聊天窗css樣式添加：
overflow-y:auto;
overflow-x:none;
每次進入聊天界面滾動條都在最上面，用戶體驗不好，于是設計每次進入，聊天窗滾動條在最下面，
document.getElementById("one").scrollTop=document.getElementById("one").scrollHeight;
輸入框為空時，訊息不能發送，按鈕為灰色，每0.5秒檢測一次，輸入框不為空，則按鈕變為藍色，界面每2秒重繪一次，時間重繪的太短，可能會一下子刷出幾條資料出來，
ajax使用Jquery的相對要簡單方便一些，可以使用json傳也可以使用拼接字串，但是使用json傳注意一定要加上：
contentType: "application/json;charset=utf-8"
防止后端接收到的是亂碼，
后端物體類
用戶物體類userBean，在這里只要注意username，pwd，status，
package Bean;
public class userBean {
private int id;
private String usernam;
private String telephone;
private String sex;
private String pwd;
private String age;
private String description;
private String status;
public userBean(int id, String usernam, String telephone, String sex, String pwd, String age,String description) {
this.id = id;
this.usernam = usernam;
this.telephone = telephone;
this.sex = sex;
this.pwd = pwd;
this.age = age;
}
public userBean(int id, String usernam, String telephone, String sex,String age,String description) {
this.id = id;
this.usernam = usernam;
this.telephone = telephone;
this.sex = sex;
this.age = age;
this.description=description;
}
public userBean(int id, String telephone, String sex,String age,String description) {
this.id = id;
this.telephone = telephone;
this.sex = sex;
this.age = age;
this.description=description;
}
public userBean(String usernam, String telephone, String sex, String age,String description) {
this.usernam = usernam;
this.telephone = telephone;
this.sex = sex;
this.description=description;
this.age = age;
}
public userBean(String usernam, String pwd) {
this.usernam=usernam;
this.pwd=pwd;
}
public userBean(String usernam) {
this.usernam=usernam;
}
public userBean(int id) {
// TODO Auto-generated constructor stub
this.id=id;
}
public userBean(int id, String telephone, String sex, String age) {
// TODO Auto-generated constructor stub
this.id = id;
this.telephone = telephone;
this.sex = sex;
this.age = age;
}
public userBean(int id, String usernam, String status) {
// TODO Auto-generated constructor stub
this.id=id;
this.usernam=usernam;
this.status=status;
}
public String getStatus() {
return status;
}
public void setStatus(String status) {
this.status = status;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getUsernam() {
return usernam;
}
public void setUsernam(String usernam) {
this.usernam = usernam;
}
public String getTelephone() {
return telephone;
}
public void setTelephone(String telephone) {
this.telephone = telephone;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
public String getPwd() {
return pwd;
}
public void setPwd(String pwd) {
this.pwd = pwd;
}
public String getAge() {
return age;
}
public void setAge(String age) {
this.age = age;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
}
客服物體類contactBean，這里只要注意contactname，pwd，
package Bean;
public class contactBean {
private int id;
private String contactnam;
private String telephone;
private String sex;
private String pwd;
private String age;
private String description;
public contactBean(String contactnam, String telephone, String sex, String pwd, String age) {
this.contactnam = contactnam;
this.telephone = telephone;
this.sex = sex;
this.pwd = pwd;
this.age = age;
}
public contactBean(String contactnam, String pwd) {
// TODO Auto-generated constructor stub
this.contactnam = contactnam;
this.pwd = pwd;
}
public contactBean(int id, String contactnam, String telephone) {
// TODO Auto-generated constructor stub
this.id=id;
this.contactnam = contactnam;
this.telephone = telephone;
}
public contactBean(String contactnam) {
// TODO Auto-generated constructor stub
this.contactnam=contactnam;
}
public contactBean(int id, String contactnam, String telephone, String sex, String age, String description) {
// TODO Auto-generated constructor stub
this.id=id;
this.contactnam = contactnam;
this.telephone = telephone;
this.sex = sex;
this.age = age;
this.description=description;
}
public contactBean(int id2, String telephone2, String sex2, String age2, String description2) {
// TODO Auto-generated constructor stub
this.id=id2;
this.telephone=telephone2;
this.sex=sex2;
this.age=age2;
this.description=description2;
}
public contactBean(int id, String contactnam, String telephone, String sex, String pwd, String age,
String description) {
// TODO Auto-generated constructor stub
this.id=id;
this.contactnam = contactnam;
this.telephone = telephone;
this.sex = sex;
this.pwd=pwd;
this.age = age;
this.description=description;
}
public contactBean(String contactnam2, String telephone2, String sex2, String age2) {
// TODO Auto-generated constructor stub
this.contactnam = contactnam2;
this.telephone = telephone2;
this.sex = sex2;
this.age = age2;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getContactnam() {
return contactnam;
}
public void setContactnam(String contactnam) {
this.contactnam = contactnam;
}
public String getTelephone() {
return telephone;
}
public void setTelephone(String telephone) {
this.telephone = telephone;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
public String getPwd() {
return pwd;
}
public void setPwd(String pwd) {
this.pwd = pwd;
}
public String getAge() {
return age;
}
public void setAge(String age) {
this.age = age;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
}
用戶咨詢物體類recordUserBean，
package Bean;
public class recordUserBean {
private int id;
private String recordid;
private String usernam;
public recordUserBean(int id, String recordid, String usernam) {
// TODO Auto-generated constructor stub
this.id=id;
this.recordid=recordid;
this.usernam=usernam;
}
public recordUserBean() {
// TODO Auto-generated constructor stub
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getRecordid() {
return recordid;
}
public void setRecordid(String recordid) {
this.recordid = recordid;
}
public String getUsernam() {
return usernam;
}
public void setUsernam(String usernam) {
this.usernam = usernam;
}
}
聊天記錄物體類recordContentBean，
package Bean;
public class recordContentBean {
private int id;
private String recordid;
private String usernam;
private String contactnam;
private String userContent;
private String contactContent;
private String tim;
public recordContentBean(int id, String recordid, String usernam, String contactnam, String userContent,
String contactContent,String tim) {
this.id = id;
this.recordid = recordid;
this.usernam = usernam;
this.contactnam = contactnam;
this.userContent = userContent;
this.contactContent = contactContent;
this.tim=tim;
}
public String getTim() {
return tim;
}
public void setTim(String tim) {
this.tim = tim;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getRecordid() {
return recordid;
}
public void setRecordid(String recordid) {
this.recordid = recordid;
}
public String getUsernam() {
return usernam;
}
public void setUsernam(String usernam) {
this.usernam = usernam;
}
public String getContactnam() {
return contactnam;
}
public void setContactnam(String contactnam) {
this.contactnam = contactnam;
}
public String getUserContent() {
return userContent;
}
public void setUserContent(String userContent) {
this.userContent = userContent;
}
public String getContactContent() {
return contactContent;
}
public void setContactContent(String contactContent) {
this.contactContent = contactContent;
}
}
控制器servlet
用戶端，需要四個servlet，分別是登錄servlet；進入聊天界面，將用戶的聊天記錄加載到前端界面的servlet，添加聊天記錄的servlet，每兩秒重繪一次界面的servlet，這里就不說登錄的了，說一下聊天的servlet，
1、將用戶的聊天記錄加載到前端界面的控制器：headLianXiKeFuServlet，上代碼！
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");
String usernam=(String)request.getSession().getAttribute("userSession");
Date d=new Date();
SimpleDateFormat df = new SimpleDateFormat("yyyyMMddhhmmss");//以時間作為咨詢id
String recordid=null;
//一個用戶只有一個咨詢視窗，也就是說只有一個咨詢號，創建一個之后，以后重新打開就不會重新創建
//先查詢資料庫中record是否有用戶，如果有則無需創建，如果沒有，則創建咨詢號
lianXiDao dao=new lianXiDao();
if (dao.queryUser(usernam)) {//如果表中沒有資料，那么添加一個咨詢號
System.out.print("已有咨詢號");
}else {
recordid=df.format(d);
if (dao.addRecord(recordid, usernam)) {//添加成功
System.out.print("咨詢號添加成功！");
}else {
System.out.print("咨詢號添加失敗！");
}
}
recordUserBean bean=dao.queryRecordid(usernam);
recordid=bean.getRecordid();
List<recordContentBean> beans=new ArrayList<>();
beans=dao.queryRecordHistroy(recordid);//界面重繪
Gson gson = new Gson();
String beans1 = gson.toJson(beans); //將List轉化為Json資料
//當用戶進入界面后，狀態變為2
dao.updateStatus("2", usernam);
request.setAttribute("beans", beans1);
response.getWriter().write(beans1);
request.setAttribute("recordid", recordid);
request.getRequestDispatcher("lianXiKeFu.jsp").forward(request, response);
}
2、添加聊天記錄的控制器：addLianXiKeFuServlet，上代碼！
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");
String usernam=(String)request.getSession().getAttribute("userSession");
String recordid=request.getParameter("recordid");
String userContent=request.getParameter("userContent");
String msg=null;
Date d=new Date();
SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");//時間
String tim=df.format(d);
lianXiDao dao=new lianXiDao();
//防止客服離開聊天界面之后，狀態變為其他狀態，故每次發送訊息，狀態都為2
dao.updateStatus("2", usernam);
if (dao.addRecordContent(recordid, usernam,userContent, tim)) {
msg="ok";
}else {
System.out.print("咨詢失敗");
msg="no";
}
}
3、前端每兩秒重繪一次界面的控制器：lianXiUpdateServlet，上代碼！
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");
String usernam=(String)request.getSession().getAttribute("userSession");
lianXiDao dao=new lianXiDao();
recordUserBean bean=dao.queryRecordid(usernam);
String recordid=bean.getRecordid();
List<recordContentBean> beans=new ArrayList<>();
beans=dao.queryRecord_5(recordid);//重繪界面
Gson gson = new Gson();
String beans1 = gson.toJson(beans); //將List轉化為Json資料
response.getWriter().write(beans1);
}
ajax請求servlet回傳前端json資料用的是：
response.getWriter().write();
前端決議json是：
var jsonObject = JSON.parse(data);
ajax請求之后，控制器訪問dao層，dao層訪問底層until，底層訪問資料庫，
注意事項：
1、訪問資料庫之后一定要關閉連接，因為每兩秒重繪一次界面，不關閉連接會對資料庫造成巨大負荷，沒一會就會給你報錯，
2、控制器回傳json資料，dao層回傳的List是Object型別的，前端js不能決議，所以要在后端進行決議，決議需要用到jar包，我用的jar包為gson.jar，
3、java在線時間的模板：yyyy-MM-dd HH:mm:ss，當小時為H時，為24小時制，當為h時為12小時制，我在設計的時候，早上還可以正常運行的，到了下午卻運行不出來了，找了半天問題，最后看到資料庫的時間記錄，下午15點結果變為3點，這樣就導致發的資訊刷不出來，
Dao層
lianxiDao
package Dao;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import com.mysql.jdbc.Statement;
import Bean.recordContentBean;
import Bean.recordUserBean;
import Bean.userBean;
import Until.DBUtil;
public class lianXiDao {
DBUtil dbUtil=new DBUtil();
ResultSet rs=null;
String sql=null;
public boolean queryUser(String usernam) {//查詢record_user表中是否有用戶的咨詢號
sql="select * from record_user where usernam=?";
Object[] params= {usernam};
return dbUtil.isExcut(sql, params);
}
public boolean updateStatus(String status,String usernam) {//改變用戶狀態
sql="update user set status=? where usernam=?";
Object[] params= {status,usernam};
return dbUtil.queryExecuteUpdate(sql, params);
}
public boolean addRecord(String recordid,String usernam) {//在record_user表中添加咨詢號
sql="insert into record_user(recordid,usernam) values(?,?)";
Object[] params= {recordid,usernam};
return dbUtil.queryExecuteUpdate(sql, params);
}
public recordUserBean queryRecordid(String usernam) {//查詢表中的資料
sql="select * from record_user where usernam=?";
Object[] params= {usernam};
recordUserBean bean = null;
rs=dbUtil.queryExecutQuery(sql, params);
try {
while(rs.first()) {
bean=new recordUserBean(rs.getInt("id"),rs.getString("recordid"),rs.getString("usernam"));
break;
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}finally {
dbUtil.closeAll(rs, (Statement)dbUtil.pstmt, dbUtil.connection);
}
return bean;
}
public boolean addRecordContent(String recordid,String usernam,String userContent,String tim) {//在record_user表中添加咨詢號--用戶
sql="insert into record_content(recordid,usernam,userContent,tim) values(?,?,?,?)";
Object[] params= {recordid,usernam,userContent,tim};
return dbUtil.queryExecuteUpdate(sql, params);
}
public boolean addRecordContentByContact(String recordid,String conatctnam,String conatctContent,String tim) {//在record_user表中添加咨詢號--客服
sql="insert into record_content(recordid,contactnam,contactcontent,tim) values(?,?,?,?)";
Object[] params= {recordid,conatctnam,conatctContent,tim};
return dbUtil.queryExecuteUpdate(sql, params);
}
public List<recordContentBean>queryRecord_5(String recordid) {//每秒重繪資料
sql="select * from record_content where recordid=? and tim >= now()-interval 2.3 second;";
Object[] params= {recordid};
recordContentBean bean = null;
List<recordContentBean> beans=new ArrayList<>();
rs=dbUtil.queryExecutQuery(sql, params);
try {
while(rs.next()) {
bean=new recordContentBean(rs.getInt("id"),rs.getString("recordid"),rs.getString("usernam"),rs.getString("contactnam"),
rs.getString("usercontent"),rs.getString("contactcontent"),rs.getString("tim"));
beans.add(bean);
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}finally {
dbUtil.closeAll(rs, (Statement)dbUtil.pstmt, dbUtil.connection);
}
return beans;
}
public List<recordContentBean>queryRecordHistroy(String recordid) {//查詢歷史聊天記錄
sql="select * from record_content where recordid=? order by tim";
Object[] params= {recordid};
recordContentBean bean = null;
List<recordContentBean> beans=new ArrayList<>();
rs=dbUtil.queryExecutQuery(sql, params);
try {
while(rs.next()) {
bean=new recordContentBean(rs.getInt("id"),rs.getString("recordid"),rs.getString("usernam"),rs.getString("contactnam"),
rs.getString("usercontent"),rs.getString("contactcontent"),rs.getString("tim"));
beans.add(bean);
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}finally {
dbUtil.closeAll(rs, (Statement)dbUtil.pstmt, dbUtil.connection);
}
return beans;
}
public List<userBean>queryUserByContact() {//查詢處于2,3狀態的用戶
sql="select * from user where status=2";
Object[] params= {};
userBean bean = null;
List<userBean> beans=new ArrayList<>();
rs=dbUtil.queryExecutQuery(sql, params);
try {
while(rs.next()) {
bean=new userBean(rs.getInt("id"),rs.getString("usernam"),rs.getString("status"));
beans.add(bean);
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}finally {
dbUtil.closeAll(rs, (Statement)dbUtil.pstmt, dbUtil.connection);
}
return beans;
}
public List<recordContentBean>queryRecordHistroy1(String recordid,String contactnam) {//客服進入聊天界面，查詢歷史聊天記錄
sql="select * from record_content where recordid=? or contactnam=? order by tim";
Object[] params= {recordid,contactnam};
recordContentBean bean = null;
List<recordContentBean> beans=new ArrayList<>();
rs=dbUtil.queryExecutQuery(sql, params);
try {
while(rs.next()) {
bean=new recordContentBean(rs.getInt("id"),rs.getString("recordid"),rs.getString("usernam"),rs.getString("contactnam"),
rs.getString("usercontent"),rs.getString("contactcontent"),rs.getString("tim"));
beans.add(bean);
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}finally {
dbUtil.closeAll(rs, (Statement)dbUtil.pstmt, dbUtil.connection);
}
return beans;
}
}
查詢兩秒內資料庫增加的資料：
select * from 表 where 時間欄位> now()-interval 2 second;
客服聊天界面
基本上和用戶的一樣，加一個每10秒重繪界面的：
<meta http-equiv="refresh" content="10"><!-- 界面每30秒重繪一次 -->
用戶狀態：
<script type="text/javascript">
var statu=document.getElementsByClassName("statu");
var a=document.getElementsByClassName("a");
for(var i=0;i<statu.length;i++){
if(statu[i].innerText=="2"){//狀態為2
statu[i].style.backgroundColor="red";
statu[i].innerText="請求咨詢";
statu[i].style.color="#fff";
}else{//狀態為3
statu[i].style.backgroundColor="yellow";
statu[i].innerText="正在咨詢";
a.href="#";
}
}
</script>
客服端基本上和用戶端差不多，只不過對資料庫操作有一些不同，如果想了解更多，可以評論，或者咨詢我，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/186193.html
標籤：其他
上一篇：為什么說學前端最容易拿高薪？