如何直接从输入表单获取文本内容并存入变量？

嘿，我懂你想要什么啦！你希望把输入框里填写的城市名（比如London）直接存到变量里，而不是出现表单提交后的URL输出对吧？咱们来调整一下代码：

一、直接获取输入框的值（阻止表单跳转） #

首先要阻止表单默认的提交跳转行为，不然页面会刷新，咱们就没法正常处理输入值啦。

HTML代码（给表单加个ID方便选择） #

<form id="weatherForm">
  <input type="text" name="city" placeholder="Enter City here..">
  <input type="submit" value="Submit">
</form>

JavaScript代码 #

// 给表单绑定提交事件
$('#weatherForm').on('submit', function(e) {
  // 阻止默认提交行为，避免页面跳转
  e.preventDefault();
  
  // 获取输入的城市名并存入变量
  const cityName = $('input[name="city"]').val();
  
  // 现在你可以随意使用这个变量啦
  console.log('存入变量的城市名：', cityName);
  
  // 如果需要生成你提到的URL格式，也可以这样拼接
  const targetUrl = `getWeather.html?city=${cityName}:76`;
  console.log(targetUrl); // 输出类似 "getWeather.html?city=London:76"
});

二、从URL参数中提取城市名 #

如果你的场景是页面已经跳转到了getWeather.html?city=London:76，想要从这个URL里把London提取出来存变量，可以用URLSearchParams来解析：

// 解析当前页面的URL参数
const urlParams = new URLSearchParams(window.location.search);
// 获取city参数的值，比如得到"London:76"
const cityParamValue = urlParams.get('city');
// 用冒号分割字符串，取第一部分就是城市名
const cityName = cityParamValue.split(':')[0];

console.log(cityName); // 输出 London

小提示 #

• 第一种方式适合在提交表单时直接获取输入值，不用跳转页面；
• 第二种方式适合页面跳转后，从URL里提取已提交的城市名。

内容的提问来源于stack exchange，提问作者iBim's da Michi