AJAX小案例__生肖配对_生肖配对api-CSDN博客

本文链接：https://blog.csdn.net/weixin_48486631/article/details/115320438

AJAX小案例__生肖配对

斜体样式刚学习了AJAX后，由于没什么案例练手的，去网上找了点免费的API接口，做个小案例
本次运行浏览器为IE浏览器
由于小白还不会调试AJAX浏览器兼容性，只能在IE浏览器显示
下面是运行图：

先找一个API接口

需要注意一点，请求参数里的值都是需要解码的，不然获取输入框中文值无法转换后面代码里会说

首先HTML代码

    <h1 style="color: red;">生肖配对</h1>
    请输入男的生肖: <input type="text" id="men"><br>
    请输入女的生肖: <input type="text" id="women"><br>
    <button onclick="getDate()">点击生成</button><br>
    <div id="show_result" style="color: green;font-size: 30px;"></div>

由于是随便写的，就精简一点，样式什么的看看就行

后面重点Js代码

//创建XMLHttpRequest对象
    var xmlHttp;
    function createXMLHttpRequest(){
        xmlHttp=new XMLHttpRequest();
    }
    function getDate(){
        createXMLHttpRequest();
        //获取输入框值
        var men_SX = document.getElementById('men').value;
        var women_SX = document.getElementById('women').value;
        //将获取的输入框值进行解码   encodeURLComponent();
        var men_url="men="+encodeURIComponent(men_SX);
        var women_url="&women="+encodeURIComponent(women_SX);
        // 将参数拼接
        var url=men_url+women_url+"&key=bb0751510c019da36166c401d9036fc7";
        //创建请求
        xmlHttp.open("post","http://apis.juhe.cn/sxpd/query?"+url,true);
        //设置请求头
        xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        //接受服务器处理
        xmlHttp.onreadystatechange=goBackResult;
        //发送key值
        xmlHttp.send("Key:bb0751510c019da36166c401d9036fc7")


    }
    function goBackResult(){
        //所有加载完成进行下一步
        if(xmlHttp.readyState==4 && xmlHttp.status==200){
            // 获取服务器接受的值
            var jsonDate = xmlHttp.responseText;
            // 进行转换 返回json类型值
            var jsonObj = eval('(' + jsonDate + ')');
            // 拿到需要显示的值
            var dataResult=jsonObj.result.data;
            // 获取显示区域并将拿到的值放进去
            document.getElementById('show_result').innerHTML=dataResult;
        }
    }

js提交ajax请求，默认编码方式是ISO-8859-1，此编码方式不支持中文，故要将参数转换成UTF-8编码或者其他支持中文的编码，在后台解码成中文
** 这里用到了encodeURIComponent()方法来进行将输入框获取到的中文值来进行解码参考ajax请求带中文url的参数转码解码**

send发送的key值就是在API接口里会有key值，这个一定要带的