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