原生 Javascript 写ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="day1.html">woshi a  </a>
    <div>
        <lable for="Sname">姓名</lable>
        <input type="text" id="Sname">
        <lable for="Sage">年龄</lable>
        <input type="text" id="Sage">
        <lable for="Ssex">性别</lable>
        <input type="text" id="Ssex">
        <button onclick="soushu()">Ssex搜索</button>
    </div>
   <table id="student">
        <thead>
            <tr></tr>
        </thead>
       <tbody>
       </tbody>
   </table>
    <script src="../js/jquery-1.11.3.js"></script>
    <script>
        window.function () {
            getData();
        }
        //ajax    jqery 获取方式 
        function soushu() {
            let stuname=$("#Sname").val()
            let stuage=$("#Sage").val()
            let stusex=$("#Ssex").val()
            $.ajax({
                type:"post",
                url:"/soushu.do",
                data:{
                    stuname,stuage,stusex
                },
                success(data){
                   showStu(data)
                }
            })
        }
        function getData() {
            $.ajax({
                type:"get",
                url:"/ajaxGetData.do",
                success(data){
                    showStu(data) //
                }
            })
        }
        //渲染数据
        function showStu(data) {
            var data=JSON.parse(data)  //转换格式
            $("#student>thead>tr").html(``)
            $("#student>tbody").html(``)
            for(item in data[0]){
               $("#student>thead>tr").append(`<th>${item}</th>`)
            }
            $.each(data,(index,item)=>{
                // if(item['性别']==null){
                //     item['姓名']= '未填写'
                // }else{
                //     item['姓名']= new Date(item['姓名']).toLocaleDateString()
                // }
                $("#student tbody").append(`
                    <tr>
                        <td>${item['序号']}</td>
                        <td>${item['姓名']}</td>
                        <td>${item['年龄']}</td>
                        <td>${item['性别']}</td>
                        <td>${item['学号']}</td>
                        <td>
                            <button onclick="deleBtn('${item['学号']}')">删除</button>
                            <button>修改</button>
                        </td>
                    </tr>
                `)
            })
        }
    </script>
</body>
</html>

。。。。。。。。。。。。。。。。。。。。

//node js controller
getSoushu(a,b){
let {stuname,stuage,stusex}= a.body
let sql = “SELECT c_id,c_name,c_age,c_sex,c_hao FROM class WHERE 1=1”
let arr=[];
let order = “order by c_id”
if(stuname!=""){
stuname= stuname+’%’//字符串拼接 %号
sql =${sql} and c_name like ?;
arr.push(stuname)
}
if(stuage!=""){
sql =${sql} and c_age=?
arr.push(stuage)
}
if(stusex!=""){
sql =${sql} and c_sex= ?
arr.push(stusex)
}
sql =sql +order
stuDao.getStuDao(sql,arr,(err,data)=> {
if(data){
let qureyData = JSON.stringify(data)
console.log(qureyData)
qureyData =qureyData.replace(/c_id/g,“序号”)
qureyData =qureyData.replace(/c_name/g,“姓名”)
qureyData =qureyData.replace(/c_age/g,“年龄”)
qureyData =qureyData.replace(/c_sex/g,“性别”)
qureyData =qureyData.replace(/c_hao/g,“学号”)
b.send(qureyData)
}
})

原生 Javascript 写ajax

猜你喜欢