会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132647个问题
WEB前端全系列/第五阶段:前后端交互/网络请求AJAX 151楼

老师,用post请求接收不到前台返回的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.5.1.js"></script>
</head>
<body>
<span>用户名:</span><input type="text" class="username"><br>
<span>密码:</span><input type="text" class="password"><br>
<button>get无参请求</button>
<button>get有参请求</button>
<button>post请求</button>
<script>
    /*
    Ajax
    描述 Ajax全称为Asynchronous JavaScript and XML
         是一种前后台数据交互的手段
    说明 原生的Ajax实现比较麻烦,需要借助xmlhttprequest对象来构建
         而今天我们实现的是jQuery已经封装好的现成方法
    说明 get无参请求 一般用来向后台获取数据使用,不会发送给后台内容
         get有参请求 一般向贴吧、社区等需要根据页码或者指定的属性来获取数据使用,
                     这种情况下参数一般都比较小
         post请求    一般用于登录、注册等保密性高的地方
     */
    var $usernameInput=$('.username');
    var $passwordInput=$('.password');
    var $btns=$('button');
    $btns.eq(0).click(function () {
        $.ajax({
            //请求方式为get
            type:'get',
            //指明请求要发送到的php后台地址
            url:'10jqAjax请求.php',
            //交互的数据格式为json
            dataType:'json',
            //当后台返回数据时,本函数自动执行,用来获取后台返回的具体数据内容
            success:function (res) {
                console.log(res);
                console.log(res.info);
            }
        });
    })
    $btns.eq(1).click(function () {
        $.ajax({
            //请求方式为get
            type:'get',
            //指明请求要发送到的php后台地址
            url:'10jqAjax请求.php?username='+$usernameInput.val()+"password"+$passwordInput.val(),
            //交互的数据格式为json
            dataType:'json',
            //当后台返回数据时,本函数自动执行,用来获取后台返回的具体数据内容
            success:function (res) {
                console.log(res);
                console.log(res.info);
            }
        });
    })
    $btns.eq(2).click(function () {
        $.ajax({
            //请求方式为post
            type:'post',
            //指明请求要发送到的php后台地址
            url:'10jqAjax请求.php',
            date:{
                uname:$usernameInput.val(),
                upass:$passwordInput.val()
            },
            //交互的数据格式为json
            dataType:'json',
            //当后台返回数据时,本函数自动执行,用来获取后台返回的具体数据内容
            success:function (res) {
                console.log(res);
                console.log(res.info);
            }
        });
    })
</script>
</body>
</html>

<?php
     //post请求
     //php中构建数组结构
     $successArr= array('msg'=>'ok','info'=>$_POST);
     //通过echo和json_encode(对象)方法将这个数组转换成json,并返回到前端
     echo json_encode($successArr);
?>

blob.png

WEB前端全系列/第五阶段:前后端交互/PHP、数据库编程与设计 152楼
WEB前端全系列/第五阶段:前后端交互/服务器 153楼
WEB前端全系列/第五阶段:前后端交互/PHP、数据库编程与设计 154楼
WEB前端全系列/第五阶段:前后端交互/PHP、数据库编程与设计 155楼
WEB前端全系列/第五阶段:前后端交互/PHP、数据库编程与设计 157楼
WEB前端全系列/第五阶段:前后端交互/服务器 158楼
WEB前端全系列/第五阶段:前后端交互/MySQL数据库 159楼

新建文件夹.zip

老师,我又不知道哪里出问题了,登录后没反应

WEB前端全系列/第五阶段:前后端交互/PHP、数据库编程与设计 160楼
WEB前端全系列/第五阶段:前后端交互/PHP、数据库编程与设计 163楼
WEB前端全系列/第五阶段:前后端交互/网络请求AJAX 165楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637