简单js和ajax实现
题库api
看到一个憨憨，买了个题目api直接弄到微信小程序里面，我直接抓包
得到了他的api https://api.wkdnb.cn/935811140.php?tm=
题库Response
answer: "鸦片战争"
code: "200"
cs: "[吃瓜]累计查询次数：[2593855]"
gg: "有惊喜哦！"
question: "中国近代史的开端"
y: "虽然你单身，但是你胖若两人。"
html中form表单获取用户输入
输入框
- button 用于获取值
- type=”submit” 提交按钮
- οnclick=“test（）” 点击事件
<div class="box-right">
<div class="form">
<label for="timu">输入题目</label>
<input type="timu" id="timu">
<input type="submit" id="submit" value="查找" onclick="test()">
</div>
</div>
js中test函数拼接网址
var y = "https://api.wkdnb.cn/935811140.php?tm=" + document.getElementById("timu").value
js中ajax更改HTML
var html = "";
$.ajax({
type: "get",
url: y,
success: function (data) {
for (var k in data) {
if (k == 'question')
html += `<li>题目</li>` + `<li>${data[k]}</li>` + `<br/>`
if (data['code'] != "200")
html += "网站故障"
if (k == 'answer')
html += `<li>答案</li>` + `<li>${data[k]}</li>`
}
$("#div1 span ul").html(html);
},
error: function () {
alert("呃呃呃");
}
jquery中的ajax方法参数
- 1.url:
要求为String类型的参数，（默认为当前页地址）发送请求的地址。 - 2.type:
要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。 - 3.data:
要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看 processData选项。对象必须为key/value格式，例如{foo1:“bar1”,foo2:“bar2”}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:[“bar1”,“bar2”]}转换为&foo=bar1&foo=bar2。 - 4.dataType:
要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
*
xml：返回XML文档，可用JQuery处理。
html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
json：返回JSON数据。
jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
text：返回纯文本字符串。 - 5.success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
(1)由服务器返回，并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //调用本次ajax请求时传递的options参数
} - 6.error:
要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：
function(XMLHttpRequest, textStatus, errorThrown){
//通常情况下textStatus和errorThrown只有其中一个包含信息
this; //调用本次ajax请求时传递的options参数
} - 7.contentType：
要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。
整体效果
整体代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<title>rick查题目</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
/* background-image: linear-gradient(to bottom right, #bdbef8, #b9a3fd); */
}
.shell {
width: 640px;
height: 400px;
display: flex;
}
.box-left {
background-color: #fff;
height: 440px;
top: -20px;
position: relative;
width: 50%;
}
.box-left h3 {
font: 900 30px '';
margin: 50px 40px 40px;
}
.box-left span {
display: block;
color: #999;
font-style: 14px;
margin: 40px;
}
.box-right {
background-color: #474a59;
box-shadow: 0 0 40px 16px rgba(0, 0, 0, .2);
color: #f1f1f2;
width: 50%;
}
.form {
margin: 40px;
position: absolute;
}
label {
color: #c2c2c5;
display: block;
font-size: 14px;
height: 16px;
margin-top: 20px;
margin-bottom: 5px;
position: relative;
}
input {
background: transparent;
border: 0;
color: #f2f2f2;
font-style: 20px;
height: 30px;
line-height: 30px;
width: 100%;
outline: none !important;
}
label::before {
content: '';
display: block;
position: absolute;
top: 52px;
width: 100%;
height: 3px;
background-image: linear-gradient(to right, #44ffff, #b888ff);
}
#submit {
color: #fff;
margin-top: 40px;
width: 100px;
height: 35px;
background-color: rgba(255, 255, 255, .1);
border-radius: 20px;
float: right;
transition: .3s;
}
#submit:hover {
letter-spacing: 2px;
color: #000;
background-color: #fff;
}
</style>
<link rel="shortcut icon" href="https://rickblog.icu/images/favicon.png" />
</head>
<body>
<body background="https://api.iro.tw/webp_pc.php">
</body>
<div class="shell">
<div class="box-left" id="div1">
<h3>rick blog</h3>
<span>
<ul>
<li>www.rickblog.icu</li>
</ul>
</span>
</div>
<div class="box-right">
<div class="form">
<label for="email">输入题目</label>
<input type="email" id="email">
<input type="submit" id="submit" value="查找" onclick="test()">
</div>
</div>
</div>
<script>
function test() {
var y = "https://api.wkdnb.cn/935811140.php?tm=" + document.getElementById("email").value
var html = "";
$.ajax({
type: "get",
url: y,
success: function (data) {
for (var k in data) {
if (k == 'question')
html += `<li>题目</li>` + `<li>${data[k]}</li>` + `<br/>`
if (data['code'] != "200")
html += "网站故障"
if (k == 'answer')
html += `<li>答案</li>` + `<li>${data[k]}</li>`
}
$("#div1 span ul").html(html);
},
error: function () {
alert("1111");
}
});
}
</script>
</body>
</html>
https://rickblog.icu
end~