首页search.html页面中一个输入框，输入产品id，在页面上输出产品的id，产品名称，产品价格。使用ajax传递数据，返回数据为json类型。(限时30)

search.html页面中一个输入框，输入产品id，在页面上输出产品的id，产品名称，产品价格。使用ajax传递数据，返回数据为json类型。(限时30)

时间: 2024-11-27 10:08:06 浏览: 17

在search.html页面中，你可以创建一个简单的HTML结构，包含一个输入框用于用户输入产品ID，然后利用JavaScript和Ajax技术动态获取并显示结果。以下是简化的步骤： 1. HTML部分: ```html <!DOCTYPE html> <html lang="zh"> <head> <title>Search Product</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <input type="text" id="product-id-input" placeholder="请输入产品ID"> <div id="result-container"></div> <script src="search.js"></script> </body> </html> ``` 2. JavaScript (search.js)部分: ```javascript $(document).ready(function() { $('#product-id-input').on('keyup', function(event) { const productId = $(this).val(); if (productId) { $.ajax({ url: '/api/search', // 这里假设服务器API地址 method: 'GET', data: { productId }, dataType: 'json', success: function(response) { if (response && response.product) { $('#result-container').empty().append( `<p>ID: ${response.product.id}</p>` + `<p>Name: ${response.product.name}</p>` + `<p>Price: ${response.product.price}</p>` ); } else { $('#result-container').append('<p>未找到对应的产品。</p>'); } }, error: function(error) { $('#result-container').append('<p>请求失败，请稍后再试。</p>'); console.error('Error:', error); } }); } else { $('#result-container').empty(); // 清空结果区域，当输入为空时 } }); }); ``` 这个示例中，当你在输入框中输入产品ID并按下回车键时，会发送一个GET请求到服务器 `/api/search` ，并将输入的ID作为参数。服务器返回JSON格式的数据，前端解析并展示在指定的 `#result-container` 区域。

阅读全文