IT修真院·坑乎 | Java(后端),CSS(前端),JavaScript(前端),PM(产品经理),UI(交互设计),QA(测试),Android(安卓APP),iOS(苹果APP),OP(运维),Python(后端)日常在线问答学习平台

通过server_name怎么设置访问本地项目？如何跨域向网址发起数据请求？

1

跨域 Ajax

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

    server {
        listen       12;
# 监听端口
        server_name  localhost;
# 在计算机网络中，localhost（意为“本地主机”，指“这台计算机”）是给回路网络接口（loopback）的一个标准主机名，相对应的IP地址为127.0.0.1（IPv4）和[::1]（IPv6）。
        location / {
# root 指向地址，index相当于文件名
            root   C:\Users\24328\Desktop\start-a-project.github.io\css-js\js-task5\;
            index  js-task5.html;
            try_files $uri $uri/ /index.html =404
        }
#调用ajax刷新的部分？不清楚定义，没百度到，就是ajax调用的部分。
        location /carrots-admin-ajax/{
            proxy_pass http://dev.admin.carrots.ptteng.com/;
        }

// 点击获取value值
$(".btn").eq(0).click(function() {
    var name = $(".name").get(0).value
    var pass = $(".password").eq(0).val()
    console.log(name)
    console.log(pass)
    if (name == '' || pass == '') {
        alert("请输入正确的账号密码")
    }
    var xhr = new XMLHttpRequest(); // 创建一个新的xhr实例
    xhr.open('post', 'http://www.example.com/page.php', true); //使用该实例向网站发起请求，规定请求的类型、URL 以及是否异步处理请求。
    xhr.onreadystatechange = function() { // 若产生变化则指定回调函数
        if (xmlhttp.readyState === 4 || xmlhttp.status === 200) { //判断是否发送成功和判断服务端是否响应成功
            var jsons = JSON.parse(xmlhttp.responseText); //转换
            console.log(jsons);
        }
    }
    xhr.send() //将请求发送到服务器。
}

配置本地现在倒是清楚了，使用的localhost：端口访问，比如我的就是localhost：1000直接输入到网址栏访问。
希望看到的别重复我的错误：若图片名称使用中文会导致使用代理时无法识别，导致图片名称乱码。
server{
        listen      1000;
        server_name localhost;
        location / {
            root   C:\Users\24328\Desktop\start-a-project.github.io\css-js\js-task5;  #指向文件夹
            index   index.html;    
        }
    }

往后台发送接口只能用同步，不能用异步

0

1

js基础

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var input1Value,input2Value,sendText;
$(document).ready(function () {
    $("#submitMassege").click(function () {
        var input1Value = $("#input1").val();
        var input2Value = $("#input2").val();
        var sendText={
            "name":input1Value,
            "pwd":input2Value
        };
        $.ajax({
            url: "/carrots-admin-ajax/a/login",
            type:"POST",
            data: sendText,
            async: false,
            success:function (result) {
                var response=JSON.parse(result);
                if (response.code==0){
                    alert("1");
                    window.location.href = "http://dev.admin.carrots.ptteng.com/#/dashboard";
                }
                else if (response.code=="-5003") {
                    // alert("1");
                }
                else if (response.code=="-5004") {
                    // alert("2");
                }
            }
        });
    });
});

无论验证是否正确页面都无法进行跳转。

0

1

Ajax

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

$('.log-in').click(function () {
    var username = $('#user').val();
    var password = $('#pwd').val();
    $('#tip').empty();
    if (username === '' || password === '') {
        $('#tip').append('请输入用户名和密码');
    }else{
        $.ajax({
            method: 'POST',
            url: '/carrots-admin-ajax/a/login',
            data:{
                name: username,
                pwd: password
            },
            success: function(response){
                if(response.message === 'success'){
                    location.href = 'http://dev.admin.carrots.ptteng.com';
                }else {
                    $('#tip').append(response.message);
                }
            }
        });
    }
});

当用户不存在时点击登录不进行提示

0

1

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="wrapper">
    <div class="login">
        <p class="text-primary title">后台登录</p>
        <div class="user">
            <input type="text" class="username form-control" placeholder="用户名" id="user">
        </div>
        <div class="pwd">
            <input type="password" class="password form-control" placeholder="密码" id="pwd">
        </div>
        <p id="tip"></p>
        <input type="submit" class="log-in btn btn-info" value="登录" id="log-in">
    </div>
</div>

$('.log-in').click(function () {
    var username = $('#user').val();
    var password = $('#pwd').val();
    $.ajax({
        method: 'POST',
        url: '/carrots-admin-ajax/a/login',
        data:{
            name: username,
            pwd: password
        },
        success: function(response){
            if(response.message === 'success'){
                location.href = 'http://dev.admin.carrots.ptteng.com'
            }else {
                $('#tip').empty().append(response.message);
            }
        }
    });
});

postman的用法

0

1

postman

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

// java的后台接口参数形式
// 请问postman或者Ajax应该怎么传参
@RequestMapping("/purchase")
public ApiResult purchase(@RequestParam Integer invoiceTypeId, @RequestBody  List<GoodsOutInDetailVo> list) {
    return ApiResultUtil.Success(invoiceTypeId.toString(),list);
}

学员服务器如何使用NGINX跨域

0

1

跨域

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

$(document).ready(function () {
    $("#btn").on("click",function () {
        var account = $(".account").val();
        var password = $(".password").val();
    $.post('/carrots-admin-ajax/a/login',
        {
            name: account, pwd: password
        },
        function(data,status) {
        var $data = JSON.parse(data);
            console.log($data);
        if ($data.message === "success") {
            window.location.href = "http://dev.admin.carrots.ptteng.com/";
        }
        else {
            $("#info").text($data.message)
        }
    });
});
});

Ajax的POST请求

0

1

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var userPassword = document.getElementsByClassName("bl_number");
var xhr = new XMLHttpRequest();
document.querySelector("button").onclick = function() {
    var user = userPassword[0].value;
    var password = userPassword[1].value;
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var checking = JSON.parse(xhr.responseText);
            console.log(checking. message);
            if (checking.code == 0) {
                location.href = "http://dev.admin.carrots.ptteng.com/";
            }
            else if (checking.code == -5003) {
                alert("用户不存在，请重新输入");
            }
            else if (checking.code == -5004) {
                alert("密码错误,请重新输入");
            }
        }
    }
    xhr.open("POST","/carrots-admin-ajax/a/login",true);
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xhr.send(`name = ${user} + &pwd = ${password}`);
}

什么时候需要设置头部信息

0

1

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本