Flutter中如何从网站获取JSON并提取数字16

嘿，我来帮你搞定这个需求！要从指定的API返回结果里提取数字16，咱们可以分几步来实现，过程很清晰：

1. 先准备网络请求依赖 #

首先得给项目加上网络请求的工具包，打开你的pubspec.yaml，在dependencies里添加http包：

dependencies:
  flutter:
    sdk: flutter
  http: ^1.1.0 # 建议用最新稳定版本

保存后运行flutter pub get把依赖拉下来。

2. 编写请求+解析的核心代码 #

接下来写个异步方法，负责发起请求、解析JSON并提取目标数字。根据你提供的JSON结构，返回的data字段就是我们要的文本内容，转成整数就得到16了：

import 'dart:convert';
import 'package:http/http.dart' as http;

Future<int> getTargetNumber() async {
  // 发起网络请求
  final response = await http.get(
    Uri.parse('http://motyar.info/webscrapemaster/api/?url=http://teertoday.com/&xpath=/html/body/div[5]/div/table/tbody/tr[3]/td[1]#vws'),
  );

  // 检查请求是否成功
  if (response.statusCode == 200) {
    // 解析JSON字符串为Map
    final jsonResponse = jsonDecode(response.body);
    // 取出data字段的文本，转成整数
    final String numberText = jsonResponse['data'];
    if (int.tryParse(numberText) != null) {
      return int.parse(numberText);
    } else {
      throw Exception('返回的内容不是有效数字');
    }
  } else {
    throw Exception('请求失败，状态码：${response.statusCode}');
  }
}

3. 在UI中使用提取的数字 #

你可以用FutureBuilder来在界面上展示结果，这样能自动处理异步加载的状态：

FutureBuilder<int>(
  future: getTargetNumber(),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      // 成功拿到数字，展示出来
      return Center(child: Text('提取到的数字是：${snapshot.data}'));
    } else if (snapshot.hasError) {
      // 请求或解析出错，显示错误信息
      return Center(child: Text('出错了：${snapshot.error.toString()}'));
    }
    // 加载中显示转圈
    return const Center(child: CircularProgressIndicator());
  },
)

一些必加的配置和注意点 #

• Android权限：在android/app/src/main/AndroidManifest.xml里添加网络权限，不然没法发起请求：

  <uses-permission android:name="android.permission.INTERNET"/>
  

• iOS HTTP请求配置：如果你的API是HTTP协议（不是HTTPS），需要在ios/Runner/Info.plist里添加配置允许不安全连接：

  <key>NSAppTransportSecurity</key>
  <dict>
      <key>NSAllowsArbitraryLoads</key>
      <true/>
  </dict>
  

• 异常处理：上面的代码已经加了基础的异常判断，但你还可以根据需求扩展，比如处理网络超时、JSON结构变化等情况，避免APP崩溃。

内容的提问来源于stack exchange，提问作者MietieMn