“艾在救援” 登录、查药功能实现（Ajax，Jason，javascript）

以下是一个简化的示例，展示了如何使用JavaScript、Ajax和JSON实现登录和查药的功能：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Medical Rescue</title>
    <script>
        function login() {
            var username = document.getElementById('username').value;
            var password = document.getElementById('password').value;
            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/login', true);
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    alert('Login result: ' + response.message);
                }
            };
            xhr.send(JSON.stringify({ username: username, password: password }));
        }
 
        function searchMedicine() {
            var medicineName = document.getElementById('medicineName').value;
            var xhr = new XMLHttpRequest();
            xhr.open('GET', '/search?medicineName=' + encodeURIComponent(medicineName), true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    alert('Search result: ' + response.medicineInfo);
                }
            };
            xhr.send();
        }
    </script>
</head>
<body>
    <h1>Medical Rescue</h1>
    <h2>Login</h2>
    <input type="text" id="username" placeholder="Username" />
    <input type="password" id="password" placeholder="Password" />
    <button onclick="login()">Login</button>
 
    <h2>Search Medicine</h2>
    <input type="text" id="medicineName" placeholder="Medicine Name" />
    <button onclick="searchMedicine()">Search</button>
</body>
</html>

在这个例子中，我们定义了两个函数login()和searchMedicine()，它们通过Ajax请求与服务器交互。login()函数使用POST方法发送JSON格式的登录信息，而searchMedicine()函数使用GET方法发送搜索请求。服务器应响应这些请求并返回JSON格式的响应。

请注意，这个代码示例假定服务器端已经实现了相应的路由和逻辑来处理这些请求。此外，实际应用中应该使用HTTPS来保护用户数据，并对输入进行验证和清理以避免XSS攻击和其他安全问题。

“艾在救援” 登录、查药功能实现（Ajax，Jason，javascript）

评论已关闭

推荐阅读