程序报错，请老师检查一下
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>8
收起
正在回答
4回答
你好，老师运行你的最后贴出的代码是没有问题的，如图：
祝学习愉快！
安迪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);
安迪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");
PHP常用技术与ThinkPHP5框架开发
- 参与学习 人
- 提交作业 225 份
- 解答问题 3372 个
掌握用PHP开发互联网网站的必备功能，掌握当下主流的Linux系统开发，并熟练使用热门框架ThinkPhp开发电商团购项目，是通向PHP工程师必经之路。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星