用js，html，css写代码

最新推荐文章于 2024-07-20 23:54:17 发布

挽风莬

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量108

点赞数 2

文章标签： ajax javascript html5 css

本文链接：https://blog.csdn.net/m0_60499747/article/details/120308108

版权

1.原生ajax操作

（1）初始化对象(XLHttpRequest)

var xhr = new XLHttpRequest()

（2）建立连接(设置请求行)

xhr.open(type,ur)

（3）设置请求头

xhr.setRequestHeader(key,val)

（4）发送请求

xhr.send(data) //get:data可以不传；

post：data必须传

form-data =>文件/图片

（5）监听响应

xhr.onreadystatechange = function(){

this.readyState //2、3、4（响应回来）

this.status //状态 200、304、404、500

if(this.readyState === 4 && this.status === 200){

console.log(this.response) //字符串

//反序列化

var res = JSON.parse(this.response) //对象

}

var $ = {

get:function(){

//五步操作

}

先安装下载原码：jquery原码下载，点击进入链接，选一个网址打开，然后在编辑器新建一个.js的文件，将原码全部复制粘贴

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login</title>
    <script src="../Jquery.js"></script>
    <style>
        .submit{
            background-color: cornflowerblue;
            font-size: 15px;
            margin-top: 10px;
            color: #fff;
        }
    </style>
</head>
<body>
    用户名：<input type="text"  placeholder="Enter your username">
    密码：<input type="password" placeholder="Enter your password">
    <span class="submit"  onclick="login()">登录</span>
</body>
<script>
     //全路径
     var baseUrl = 'http://47.93.206.13:8002'
    //登录方法
    function login(){
    //获取用户名和密码，并且保存到form对象中
    var form = {
        username:$('input[type="text"]').val(),
        password:$('input[type="password"]').val(),
    }
    $.ajaxSetup({
        headers:{
            'content-type':'application/json'
        }
    })
    //异步交互
    $.ajax({
        type:"POST",
        url:baseUrl+'/user/login',
        data:JSON.stringify(form),
        success:function(data){
        // console.log(data);
        if (data.status === 200){
            alert(data.message)
            location.assign('./ajax.html')
        }else{
          alert(data.message)
        }
      }
    })
    }
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery底层方法</title>
    <!-- 引入jquery -->
    <script src="../Jquery.js"></script>
    <!-- 引入Moment -->
    <script src="../Moment.js"></script>
    <style>
        .btn{
            width: 60px;
            height: 30px;
            border-radius:8px ;
            background-color:blue;
            color: #fff;
            text-align: center;
            line-height: 30px;
            font-size: 11px;
            margin-bottom: 10px;
        }
        body{
            margin: 0 0;
        }
        .main{
            width: 100%;
            top:0;
            min-height: 800px;
            background-color: rgba(0,0,0,0.5);
            position: absolute;
            display: none;
        }
        .dilog{
            width: 800px;
            height: 600px;
            background-color: #fff;
            position: absolute;
            top:3em;
            left: 50%;
            margin-left:-400px;
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <div class="btn" onclick="toAdd()">新增</div>
    <table border=1 width=100% cellspacing='0' cellpadding='0'>
        <thead>
            <tr>
                <th>编号</th>
                <th>标题</th>
                <th>状态</th>
                <th>发布时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>
                    <a href="">删除</a>
                    <a href="">编辑</a>
                </td>
            </tr>
        </tbody>
    </table>
    <!-- 模态框开始 -->
    <div class="main">
        <div class="dilog">
          <p>新增</p>
          <div class="form">
          用户名：<input type="text">
          密码<input type="password">
          </div>
          <div class="footer">
           <span onclick="cancelHandler()">取消</span>
           <span onclick="submitHandler()">确定</span>
          </div>
        </div>
    </div>
    <!-- 模态框结束 -->

</body>
<script>
    //全路径
    var baseUrl = 'http://47.93.206.13:8002'
    //查询所有资讯分类信息
    function findAllCategory(){
      //数据交互
      $.ajax({
         type:"GET" ,
         url:baseUrl+'/index/pageQueryArticles',
         data:'page=1&pageSize=20',
         success:function(res){
           console.log(res);
           if(res.status === 200){
            //    alert(res.message)
            //    console.log(res.data.list);
            //拿到实际数据
               var r = res.data.list
               //遍历数据
               r.forEach(function(item){
                //打印数组的每一项
                // console.log(item);
                //将数据展示到页面上
                var newTr = $('table tbody tr:first').clone(true)
                // console.log(newTr);
                //给每个td给内容
                newTr.children('td').eq(0).html(item.id)
                newTr.children('td').eq(1).html(item.title)
                newTr.children('td').eq(2).html(item.status)
                newTr.children('td').eq(3).html(moment(item.publishTime).format('YYYY-MM-DD hh:mm:ss'))
                //将克隆出来的tr追加到tbody
                $('table tbody').append(newTr)
               })
               $('table tbody tr').filter(function(index){
                //   console.log(index);
                  return index == 0
               }).remove()
           }else{
                alert(res.message)
           }
         }
      })
    }
    findAllCategory()
    //去添加
   function toAdd(){
        $('.main').css({'display':'block'})
    }
    //取消
    function cancelHandler(){
        $('.main').css({'display':'none'})
    }
    function submitHandler (){
        var form = {
            //获取用户输入的信息
            username:$('input[type="text"]').val(),
            password:$('input[type="password"]').val(),
        }
         //设置请求头Authorization
        $.ajaxSetup({
            headers:{
                'Authorization':'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiJNalU9Iiwic3ViIjoiYWRtaW4xIiwiaXNzIjoiMDk4ZjZiY2Q0NjIxZDM3M2NhZGU0ZTgzMjYyN2I0ZjYiLCJpYXQiOjE2MzEyNTg4MzQsImF1ZCI6InJlc3RhcGl1c2VyIiwiZXhwIjoxNjMxNDMxNjM0LCJuYmYiOjE2MzEyNTg4MzR9.eQYJV3BUkyswDyGWKkZi3ArOQ72CckXeKdC9ULKAsH4'
            }
        })
         //与后台进行交互
        $.ajax({
            //请求方式
            type: 'POST',
            //请求地址
            url: baseUrl+'/baseUser/saveOrUpdate',
            //请求参数
            data:form,
            //请求成功的回调函数
            success:function(data){
                console.log(data)
            }
        })

    }
</script>
</html>

挽风莬

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用js，html，css写代码

1.原生ajax操作（1）初始化对象(XLHttpRequest)varxhr=newXLHttpRequest()（2）建立连接(设置请求行)xhr.open(type,ur)（3）设置请求头xhr.setRequestHeader(key,val)（4）发送请求xhr.send(data)//get:data可以不传；post：data必须传form-data...
复制链接

扫一扫