目前在做的项目我主要是用jQuery封装的ajax来实现前后端的交互,由于老师希望在前端使用原生js,所以让我们在前后端数据交互这块尝试其他的方法。
目录结构以及其他部分参考上篇,本篇文章仅修改c-test.js文件。
链接在此https://blog.csdn.net/ZengJiajia0325/article/details/126005445
c-test.js:
// ajax jQuery版
function onBtnClick(){
var name=$('#name').val();
console.log(name);
$('#t').text(name);
$.post('/test',
{
username:name
},
function(data){
console.log(data);
alert(data.msg);
var rs=data.data;
var sex;
if(rs[0].sex==1){
sex="男";
}else{
sex="女";
}
var str="<ul>";
str+="<li>"+sex+"</li>";
str+="</ul>";
$('#t').append(str);
},"json");
}
// ajax 原生js版
/*
type 代表 请求方式
url 代表 请求url路径
data 代表 发送数据
success 代表 下载数据成功以后执行的函数
error 代表 下载数据失败以后执行的函数
*/
function $ajax({type = "get", url, data, success, error}){
var xhr = null;
try{
xhr = new XMLHttpRequest();
}catch(error){
xhr = new ActiveXObject("Microsoft.XMLHTTP")
}
if(type == "get" && data){
url += "?" + querystring(data);
}
xhr.open(type, url, true);
if(type == "get"){
xhr.send();
}else{
//设置提交数据格式
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
data ? xhr.send(querystring(data)) : xhr.send();
}
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
if(success){
success(xhr.responseText);
}
}else{
if(error){
error("Error:" + xhr.status);
}
}
}
}
}
function querystring(obj){
var str = '';
for(var attr in obj){
str += attr + "=" + obj[attr] + "&";
}
return str.substring(0, str.length - 1);
}
function onBtnClick1(){
var name=document.getElementById('name').value;
console.log(name);
var t=document.getElementById('t');
t.innerHTML=name;
$ajax({
type: "post",
url: "/test",
data: {
username: name
},
success: function(data){
console.log(data);
data=JSON.parse(data);
alert(data.msg);
var rs=data.data;
var sex;
if(rs[0].sex==1){
sex="男";
}else{
sex="女";
}
var str="<ul>";
str+="<li>"+rs[0].realname+"</li>";
str+="</ul>";
var ul=document.createElement('ul');
var li=document.createElement('li');
li.innerHTML=sex;
ul.appendChild(li);
t.appendChild(ul);
},
error: function(msg){
alert("POST请求数据错误:" + msg);
}
})
}
/**
* @description 事件绑定,兼容各浏览器
* @param target 事件触发对象
* @param type 事件
* @param func 事件处理函数
*/
function addEvents(target, type, func) {
if (target.addEventListener) //非ie 和ie9
target.addEventListener(type, func, false);
else if (target.attachEvent) //ie6到ie8
target.attachEvent("on" + type, func);
else target["on" + type] = func; //ie5
}
// fetch版
function onBtnClick2(){
var name=document.getElementById('name').value;
console.log(name);
var t=document.getElementById('t');
t.innerHTML=name;
fetch('/test', {
method:'POST',
headers:{ 'Content-Type': 'application/json' },
body: JSON.stringify({
username: name
})
})
.then(e => e.json())
.then((data) => {
console.log(data);
alert(data.msg);
var rs=data.data;
var sex;
if(rs[0].sex==1){
sex="男";
}else{
sex="女";
}
var str="<ul>";
str+="<li>"+rs[0].realname+"</li>";
str+="</ul>";
var ul=document.createElement('ul');
var li=document.createElement('li');
li.innerHTML=sex;
ul.appendChild(li);
t.appendChild(ul);
})
.catch(e => console.log("error", e))
}
// axios版
function onBtnClick3(){
var name=document.getElementById('name').value;
console.log(name);
var t=document.getElementById('t');
t.innerHTML=name;
axios.post('/test', {
username: name
})
.then(function (res) {
console.log(res);
var data=res.data;
alert(data.msg);
var rs=data.data;
var sex;
if(rs[0].sex==1){
sex="男";
}else{
sex="女";
}
var str="<ul>";
str+="<li>"+rs[0].realname+"</li>";
str+="</ul>";
var ul=document.createElement('ul');
var li=document.createElement('li');
li.innerHTML=sex;
ul.appendChild(li);
t.appendChild(ul);
})
.catch(function (error) {
console.log(error);
});
}
function init() {
// jquery
// $('#btn').on('click',onBtnClick);
// 原生ajax
var btn=document.getElementById('btn');
addEvents(btn,'click',onBtnClick1);
// fetch
// addEvents(btn,'click',onBtnClick2);
// axios
// addEvents(btn,'click',onBtnClick3);
}
init();
使用时在init中注释相应代码即可。
说明:此次实现的功能是输入用户名显示性别,所以数据库需要相应修改,至少需包含username和sex两个字段。其中,1表男,2表女。