index.cshtml

@using System.Data

@model System.Data.DataTable

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

    <title>Document</title>

    <script type="application/javascript">

          function onInputChange(event){

            console.log(event.target.value);

            if(event.target.value == ''){

                const casArea = document.getElementById('div-cas');

            const cases = casArea.getElementsByTagName('p');

            for(let i = cases.length-1;i>0;i--){

                cases[i].remove();

            }

            document.getElementById("cas").innerText = '';

            document.getElementById("mw").innerText = '';

            }

        }

        function loadCAS() {

            var casArray = [];

            const casArea = document.getElementById('div-cas');

            const cases = casArea.getElementsByTagName('p');

            for(let i = cases.length-1;i>0;i--){

                cases[i].remove();

            }

            document.getElementById("cas").innerText = '';

            document.getElementById("mw").innerText = '';

            var flag = 1;

            var searchurl = 'https://commonchemistry.cas.org/api/search?q='; // 获取 JSON 数据的链接

            var request;

            if (window.XMLHttpRequest) {

                request = new XMLHttpRequest(); //发送 Ajax 请求,适用于 Chrome, mozilla 等浏览器

            } else if (window.ActiveXObject) {

                request = new ActiveXObject("Microsoft.XMLHTTP"); // 发送 Ajax 请求,适用于 IE 浏览器

            }

            var keyword = document.getElementById("keyword").value;

            searchurl += encodeURIComponent(keyword);

            request.open("GET", searchurl, false);

            request.onreadystatechange = function() {

                if (request.readyState == 4 && request.status == 200) {

                    var response = request.responseText;

                    console.log(JSON.parse(response));

                    let count = Number(JSON.parse(response).count.toString());

                    console.log("count="+ count);

                    if( count == 0){

                        document.getElementById("cas").innerText = '暂无数据';

                        flag  = 0;

                    }

                    else{

                            console.log("cas01:"+JSON.parse(response).results[0].rn);

                            document.getElementById("cas").textContent = JSON.parse(response).results[0].rn;

                            casArray.push(JSON.parse(response).results[0].rn.toString());

                        for(let i = 1;i<count;i++){

                          const newCas = document.createElement('p');

                          newCas.textContent = JSON.parse(response).results[i].rn;

                          casArray.push(JSON.parse(response).results[i].rn.toString());

                          const casArea = document.getElementById('div-cas');

                          casArea.appendChild(newCas);

                        }

                    }

                   

                }else if(request.readyState == 4 && request.status == 404){

                }

            }

            request.send();

            if(flag == 1){

               

                        for(let i = 0;i<casArray.length;i++){

                            console.log("cas"+ i +":"+casArray[i]);

                        }

                 $.ajax({

                        url: '/HomeController/Index',

                        method: 'POST',

                        data: { casArray: JSON.stringify(casArray) },

                        success: function(response){

                            console.log("请求成功");

                        },

                        error: function(error){

                            console.log("请求失败");

                        }

                        });

                loadMW();

               

            }

        }

        function loadMW(){

            var detailurl = 'https://commonchemistry.cas.org/api/detail?cas_rn='; // 获取 JSON 数据的链接

            var request;

            if (window.XMLHttpRequest) {

                request = new XMLHttpRequest(); //发送 Ajax 请求,适用于 Chrome, mozilla 等浏览器

            } else if (window.ActiveXObject) {

                request = new ActiveXObject("Microsoft.XMLHTTP"); // 发送 Ajax 请求,适用于 IE 浏览器

            }

            var cas = document.getElementById("cas").innerText.toString();

            console.log('loadMW-cas:'+cas);

            detailurl += encodeURIComponent(cas);

            request.open("GET", detailurl, false);

            request.onreadystatechange = function() {

                if (request.readyState == 4 && request.status == 200) {

                    var response = request.responseText;

                    console.log(JSON.parse(response));

                    document.getElementById("mw").innerHTML = JSON.parse(response).molecularMass;

                }else if(request.readyState == 4 && request.status == 404){

                }

            }

            request.send();

        }

    </script>

</head>

<body>

    <label for="keyword"> Keyword: </label>

   <input type="text" id="keyword" name="keyword"  οninput="onInputChange(event)" >

   <button type="button" οnclick="loadCAS()">点击加载</button>

 <br>

 <div id="div-cas">

     CAS: <p id="cas"></p>

 </div>

 <div id="div-mw">

     MW: <p id="mw"></p>

 </div>

<table class="table table-hover">

<thead>

<tr>

<th>分类</th>

<th>名称</th>

<th>CAS</th>

</tr>

</thead>

@if (Model != null)

{

<tbody>

@foreach (DataRow row in Model.Rows)

{

<tr>

<td>@row["category"]</td>

<td>@row["name"]</td>

<td>@row["cas"]</td>

</tr>

}

</tbody>

}

else

{

<p>No data available.</p>

}

</table>

</body>


 

  • 9
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值