[成都|内门弟子]CSS-何俊|2021年03月30日的日报-技能树.IT修真院

发表于： 2021-03-30 22:17:42

1 1041

今天完成的事情：

学习jquery，ajax

做任务6页面

配置nginx

    # 任务5
    server{
        listen      8080; #监听端口
        server_name localhost; #监听地址
    
        location / {  #请求的url过滤，正则匹配，~为区分大小写，~*为不区分大小写。
            root  C:\WindowsJs\Jnshu\jnshu.js; #根目录
            index index.html index.htm; #设置默认页
            try_files $uri $uri\ \index.html =404;
        }

        location /carrots-admin-ajax/{
            proxy_pass http://dev.admin.carrots.ptteng.com/;#请求转向mysvr 定义的服务器列表
        }
    }

AJAX:

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面

jquery ajax :

定义和用法

ajax() 方法通过 HTTP 请求加载远程数据。

该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。

最简单的情况下，$.ajax() 可以不带任何参数直接使用

原生代码

        // 原生：
        var btn = document.getElementById('btn');
        btn.onclick = function () {
            var user = document.getElementById('user').value; //用户名
            var pass = document.getElementById('pass').value; //密码
            var xmlhttp = new XMLHttpRequest; //XMLHttpRequest 对象

            xmlhttp.open('post', '/carrots-admin-ajax/a/login', true); //使用open方法
            xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //添加 HTTP 头
            xmlhttp.send("name=" + user + "&pwd=" + pass); //发送数据到服务器
            xmlhttp.onreadystatechange = function (data) { //监听事件
                if (xmlhttp.readyState == 4 
                    &&
                    xmlhttp.status == 200) { 
                    var data = xmlhttp.responseText;
                    data = JSON.parse(data);
                    // console.log("data:",data);
                    // if (data.message == "success"){
                    if (data.code == 0) {
                        location.assign("http://dev.admin.carrots.ptteng.com/#/login"); //跳转网页
                    } else {
                        document.getElementById("hide").innerHTML = data.message;
                    }
                }
            }
        }

jquery ajax 代码

        $('#btn').click(function () {
            var username = $('#user').val();
            var password = $('#pass').val();

            $.ajax({
                method: 'POST',
                url: '/carrots-admin-ajax/a/login',
                data: {
                    name: username,
                    pwd: password
                },
                success: function (data) {
                    data = JSON.parse(data);
                    console.log(data);
                    if (data.message === 'success') {
                        location.href = 'http://dev.admin.carrots.ptteng.com'
                    } else {
                        $('#hide').append(data.message);
                    }
                }
            });
        });