html实现查题 – rick blog,rickblog

简单js和ajax实现

题库api

看到一个憨憨，买了个题目api直接弄到微信小程序里面，我直接抓包

得到了他的api https://api.wkdnb.cn/935811140.php?tm=

题库Response

answer: "鸦片战争"
code: "200"
cs: "[吃瓜]累计查询次数：[2593855]"
gg: "有惊喜哦！"
question: "中国近代史的开端"
y: "虽然你单身，但是你胖若两人。"

html中form表单获取用户输入

<input type="timu" id="timu"> 输入框
<input type="submit" id="submit" value="查找" onclick="test()">

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<ul>

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://rick.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.rick.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>

end~