siweilian
/
ai-yunying


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
							<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>直播间信息</title>  
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>  
    <style>  
        body, html {  
            height: 100%;  
            margin: 0;  
            display: flex;  
            align-items: center;  
            justify-content: center;  
            flex-direction: column;  
            font-family: Arial, sans-serif;  
        }  
        .container {  
            text-align: center;  
        }  
        .input-group {  
            margin-bottom: 20px;  
            /* height: 30px;   */

        } 
        #liveUrlInput {
        width: 100%; /* 使输入框宽度为父元素的100% */
        height: 100%;  
        padding: 12px 20px; /* 增加上下填充使其更高，增加左右填充使其更宽 */
        } 
        .result {  
            margin-top: 10px;  
        }  
        button {  
            padding: 10px 20px;  
        }  
    </style>  
</head>  
<body>  
    <div class="container">  
        <div class="input-group">  
            <input type="text" id="liveUrlInput" placeholder="请输入直播间地址">  
        </div>  
        <button onclick="getAudienceNumber()">获取人数</button>  
        <div class="result" id="result"></div>  
    </div>  
    <script>    
        function getAudienceNumber() {    
            var liveUrl = document.getElementById('liveUrlInput').value;    
            if (!liveUrl) {    
                alert('请输入直播间地址！');    
                return;    
            }    
            $.ajax({    
                url: '/live_url', // 使用相对路径，不再指定域名和端口  
                type: 'POST',    
                data: { live_url: liveUrl },    
                success: function(response) {    
                    // 假设后端返回的是JSON格式的数据    
                    // var data = JSON.parse(response);    
                    // 这里简单展示返回的数据，实际应用中可能需要根据返回的数据结构进行相应处理    
                    // document.getElementById('result').innerText = JSON.stringify(data);    
                    document.getElementById('result').innerText = response
                },    
                error: function(xhr, status, error) {    
                    document.getElementById('result').innerText = '请求失败：' + error;    
                }    
            });    
        }    
    </script>
</body>  
</html>