html实现查题

最新推荐文章于 2023-06-06 07:43:33 发布

是rick啊

最新推荐文章于 2023-06-06 07:43:33 发布

阅读量664

点赞数 2

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_50166407/article/details/120169528

版权

笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

简单js和ajax实现

https://rickblog.icu/chati/

题库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"。该默认值适合大多数应用场合。

学习链接 https://www.cnblogs.com/zhangruisoldier/p/8006099.html

整体效果

在这里插入图片描述

整体代码

	<!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~

是rick啊

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html实现查题

简单js和ajax实现https://rickblog.icu/chati/题库api看看憨憨，买了个题目api直接弄到微信小程序里面，我直接抓包得到了他的api https://api.wkdnb.cn/935811140.php?tm=题库Response answer: "鸦片战争" code: "200" cs: "[吃瓜]累计查询次数：[2593855]" gg: "有惊喜哦！" question: "中国近代史的...
复制链接

扫一扫