程序报错,请老师检查一下

程序报错,请老师检查一下

Uncaught TypeError: $.post is not a function
    at HTMLButtonElement.btn.onclick (demo1.html:24)
    
 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    <div id="container"></div>
    <button type="button" id="btn">Request</button>
    <script src="ajax.js"></script>
    <script type="text/javascript">
    let container=document.getElementById("container");
    let btn=document.getElementById("btn");
    // btn.onclick=function(){
    //     $.get("test.php",{"username":"zhangsan","age":18},function(data){
    //         let str="";
    //         for(let i in data){
    //             str+=i+" : "+data[i];
    //         }
    //         container.innerHTML=str;
    //     },"json"); 
    // }
    btn.onclick=function(){
        $.post("test.php",{"username":"zhangsan","age":18},function(data){
            let str="";
            for(let i in data){
                str+=i+" : "+data[i]+"<hr/>";
            }
            container.innerHTML=str;
        },"json"); 
    }

    </script>

</body>
</html>


正在回答

登陆购买课程后可参与讨论,去登陆

4回答

你好,老师运行你的最后贴出的代码是没有问题的,如图:

http://img1.sycdn.imooc.com//climg/5e7604b409fbf9d010620594.jpg

祝学习愉快!

提问者 安迪4 2020-03-21 11:50:19
let $ = new class {

    constructor()
    {
        this.xhr = new XMLHttpRequest();
        this.xhr.onreadystatechange = () => {
            if (this.xhr.readyState == 4 && this.xhr.status == 200) {
                // process response text
                let response = this.xhr.responseText;
                if (this.type == "json") {
                    response = JSON.parse(response);
                }
                this.callback(response);
            }
        }
    }

    get(url, parameters, callback, type = "text")
    {
        // url = test.php?username=zhangsan&age=20
        // parameters = {"username": "zhangsan", "age": 20}
        let data = this.parseParameters(parameters);
        if (data.length > 0) {
            url += "?" + data;
        }
        this.type = type;
        this.callback = callback;
        this.xhr.open("GET", url, true);
        this.xhr.send();
    }

    post(url, parameters, callback, type = "text")
    {
        let data = this.parseParameters(parameters);
        this.type = type;
        this.callback = callback;
        this.xhr.open("POST", url, true);
        this.xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        this.xhr.send(data);
    }

    parseParameters(parameters)
    {
        // username=zhangsan&age=20
        let buildStr = "";
        for (let key in parameters) {
            let str = key + "=" + parameters[key];
            buildStr += str + "&";
        }
        return buildStr.substring(0, buildStr.length - 1);
    }
};


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    <div id="container"></div>
    <button type="button" id="btn">Request</button>
    <script src="ajax.js"></script>
    <script type="text/javascript">
    let container=document.getElementById("container");
    let btn=document.getElementById("btn");
    btn.onclick=function(){
        $.get("test.php",{"username":"zhangsan","age":18},function(data){
            let str="";
            for(let i in data){
                str+=i+" : "+data[i]+"<hr/>";
            }
            container.innerHTML=str;
        },"json"); 
    }
    // btn.onclick=function(){
    //     $.post("test.php",{"username":"zhangsan","age":18},function(data){
    //         let str="";
    //         for(let i in data){
    //             str+=i+" : "+data[i]+"<hr/>";
    //         }
    //         container.innerHTML=str;
    //     },"json"); 
    // }

    </script>

</body>
</html>



<?php
echo "<h1>测试一下</h1>";
// echo $_GET['username'];
// echo "<hr/>";
// echo $_GET['age'];
echo json_encode($_GET);
// echo json_encode($_POST);


guly 2020-03-21 11:07:54

你好,ajax.js 代码中 class $改为 class Ajax{ 进行测试,如果解决您的问题请采纳,祝学习愉快!

  • 提问者 安迪4 #1
    仍有报错:VM90:1 Uncaught SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>) at XMLHttpRequest.xhr.onreadystatechange (ajax.js:11)
    2020-03-21 11:47:24
提问者 安迪4 2020-03-21 10:01:52
补充ajax.js代码如下:
class $
{
    constructor()
    {
        this.xhr=new XMLHttpRequest();
        this.xhr.onreadystatechange=()=>
        {
            if (this.xhr.readyState==4 && this.xhr.status==200) 
                {
                    let response=this.xhr.responseText;
                    if (this.type=="json") {
                        response=JSON.parse(response);
                    }
                    this.callback(response);
                }
        }
    }
    get(url,parameters,callback,type="text")
    {
        //url=test.php?username=zhangsan&age=18
        //parameters={"usernaem":"zhangsan","age":18}
        let data=this.parseParameters(parameters);
        if (data.length>0) 
            {
                url+="?"+data;
            };
        this.type=type;
        this.callback=callback;
        this.xhr.open("GET",url,true);
        this.xhr.send();
    }


    post(url,parameters,callback,type="text")
    {
        let data=this.parseParameters(parameters);
        this.type=type;
        this.callback=callback;
        this.xhr.open("POST",url,true);
        this.xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        this.xhr.send(data);
    }

    parseParameters(parameters)
    {
        //username=zhangsan&age=18
        let BuildStr="";
        for(let key in parameters)
        {
            let str=key+"="+parameters[key];
            BuildStr+=str+"&";
        }
        return BuildStr.substring(0,BuildStr.length-1);
    }

};

// $.get("test.php",{"username":"zhangsan"},function(data){
//     container.innerHTML=data;
// },"json");

// $.post("test.php",{"username":"zhangsan"},function(data){
//     container.innerHTML=data;
// },"json");


问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师