js访问url变，IE显示不变

最新推荐文章于 2019-01-17 18:07:28 发布
转载 最新推荐文章于 2019-01-17 18:07:28 发布 · 468 阅读 · 0
文章标签：

#ie #js

本文介绍了一个简单的JavaScript函数，用于通过AJAX发送HTTP GET请求。该函数使用XMLHttpRequest对象，并设置了必要的请求头信息。同时，定义了请求状态改变时的回调函数。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 function sendRequest(url){
     createXMLHttpRequest();
     XMLHttpR.open("GET",url,true);
     XMLHttpR.setRequestHeader("Content-Type","text/html;charset=utf-8");
     XMLHttpR.onreadystatechange = processResponse;
     XMLHttpR.send(null);
 }
网页变灰的方法，适用于IE
ma_pei的博客
04-07 3285
在哀悼日的时候如何让网页变灰？ 1、适用于谷歌、火狐、360极速模式的代码 html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); ...
Jquery $.getJSON 在IE下的缓存问题解决方法
12-10
然而，在Internet Explorer（IE）浏览器中，由于其特有的缓存机制，可能会导致一些预期之外的问题，比如当URL不变时，IE会直接使用缓存中的旧数据，而不是重新从服务器获取更新的信息。 在本案例中，开发者在实现...
JS实现页面跳转 浏览器地址栏保持不变
weixin_33832340的博客
04-07 2736
JS实现页面跳转 浏览器地址栏保持不变 在公司内部框架中，发现点击超链接，页面发生跳转，而浏览器地址栏URL始终保持不变。分析其实现机制，响应A标签onclick事件，通过Ajax向服务器端发送http请求，然后將服务器返回数据写到当前document对象。 实现代码如下： //IE浏览器创建XmlHttpRequest对象 var xmlhttp...
JS 页面发生跳转但是url 不发生变化
热门推荐
梦和远方的博客
01-17 1万+
有时候总想不改变url进行页面的跳转，而且有时候还要携带一些参数，或者参数还要安全或者过大，使用get或者post请求. iframe实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport&quo
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐) .zip
06-16
以上就是使用JavaScript在IE和Firefox等浏览器中读取XML文件并以HTML表格显示数据的完整步骤。需要注意的是，为了提高用户体验，可以考虑使用Promise或者async/await来处理异步操作，以及使用ES6的语法糖来简化代码...
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
10-14
Vue.js自身和许多现代JavaScript库广泛使用了ES6特性，而IE11并不完全支持这些新特性。以下是一些解决这个问题的方法： **解决方法一：使用Babel-Polyfill** 1. 安装`babel-polyfill`： ```bash npm install --...
CSS行为expression轻松实现IE6无抖动固定定位
12-09
在早期的Web开发中，尤其是针对Internet Explorer 6 (IE6) 的兼容性问题，开发者经常面临一个挑战：IE6不支持CSS中的`position: fixed`属性，这意味着无法实现元素随滚动条固定显示的效果。然而，为了在IE6中模拟这...
Ajax open 用法
误许的专栏
09-06 6276
 open创建一个新的http请求，并指定此请求的方法、URL以及验证信息语法oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);参数bstrMethodhttp方法，例如：POST、GET、PUT及PROPFIND。大小写不敏感。bstrUrl请求的URL地址，可以为绝对地址也可以为相对地址。va
JS覆盖当前整个网页 URL不变打开自定义的网址
L_melody的博客
12-27 2373
JS覆盖当前整个网页 URL不变打开自定义的网址 function browserRedirect() { var sUserAgent= navigator.userAgent.toLowerCase(); var bIsIpad= sUserAgent.match(/ipad/i) == "ipad"; var bIsIphoneOs= sUserAgent.match(/ip...
XMLHttpRequest对象传递参数中文乱码问题
记录点滴.......
01-02 1325
在浏览器端使用XMLHttpRequest对象向服务器端传送中文参数,如果不在浏览器端和服务器端进行处理时,会出现中文乱码问题.针对这种问题,有很多的解决办法,但往往都是在IE下可以正常显示中文,在其他浏览器下(比如FireFox)却仍然是乱码.在FireFox下解决了乱码问题,但回到IE下访问却出现了乱码问题.所以针对要在目前流行的各种浏览器下解决中文乱码问题,才能使编写的Web程序变得通...
js脚本让状态栏不显示url链接地址
bosschen
05-22 1765
如下所示 <script type="text/javascript"> function window.onload(){ var olink = document.links; for(var i=0; i< olink.length; i++){ olink[i].onmouseover = function(){ windo...
JS在新标签页中打开链接URL，兼容IE,Chrome,Firefox
jQuery,CSS,Asp.net及前端开放问题汇总
01-20 1万+
相信大家经常会遇到这种情况：我们需要通过AJAX的方式 获取跳转的链接地址 然后在新标签页中 跳转至获取到的链接，这时我们需要如何实现呢？网上搜了太多中文文档 不能完美解决。window.open('http://www.bing.com/')//这个实在新窗口中打开文档 一般我们的浏览器都会拦截The link is right below： http://stackoverflow.com
js 对象拼接为 url字符串传参
最新发布
07-15
<think>我们被要求将JavaScript对象转换为URL查询参数字符串。根据引用[2][3][4]，有几种方法可以实现。 目标：将对象如 { a: 1, b: '', c: '铁公鸡' } 转换为字符串 "a=1&b=&c=%E9%93%81%E5%85%AC%E9%B8%A1" 注意点： 1. 需要对键和值进行编码，使用encodeURIComponent（引用[3][4]） 2. 空字符串和0等值需要保留（引用[4]中示例b=''和f=0都保留了） 3. 数组的处理：引用[3]中展示了数组的处理，如{age:[24,25,26]}转换为"age=24&age=25&age=26" 4. 对于null和undefined，引用[4]中axios的处理是忽略（但引用[3]中处理为key=，即空字符串），我们需要明确需求：通常，我们可能希望忽略undefined，而null可以转为空字符串或者忽略？这里根据引用[4]的示例，axios忽略了null和undefined，但我们的需求可能不同。根据问题，我们只要求拼接，所以我们可以参考常见做法：忽略undefined，null转为空字符串。 但是，用户没有特别说明，我们可以按照常规做法： - 忽略undefined的属性 - null转为空字符串（即key= 的形式） - 数组则拆分成多个键值对（同一个键） 然而，引用[4]提供了两种方案： 方案一：使用axios的getUri方法（需要引入axios） 方案二：手动拼接，使用Object.keys和map，然后join 由于用户可能不想引入第三方库，我们重点介绍手动拼接方法。 步骤： 1. 获取对象的所有键（忽略undefined的属性） 2. 对每个键值对进行编码处理，并拼接成key=value形式 3. 将数组处理成多个键值对（同一个键对应多个值） 4. 用&连接所有键值对 但是，引用[3]中的方法可以处理数组，而引用[4]中的手动拼接方法没有处理数组（它直接将每个值转换为字符串，如果值是数组，会变成"a=1,2,3"这样，这不是我们想要的，因为通常我们希望是a=1&a=2&a=3）。 因此，我们需要一个能处理数组的方法。 我们可以这样设计： 遍历对象的每个属性： - 如果属性值是数组，则遍历数组的每个元素，对每个元素生成一个键值对（键相同，值分别为数组的每个元素） - 否则，生成一个键值对 然后，将所有的键值对用&连接。 另外，还要考虑嵌套对象？但通常URL查询参数是扁平的，所以不支持嵌套对象（引用[3]也提到只能处理单层）。如果有嵌套对象，我们需要决定如何处理（例如，使用JSON.stringify？但这样不符合标准查询参数格式）。所以，我们只处理单层对象（即值只能是基本类型或数组）。 实现函数： 根据引用[3]的示例，我们可以写出类似函数： 但是，引用[4]的方案二更简洁，只是没有处理数组。我们可以改进它，使其支持数组。 改进方案： 使用Object.entries()将对象转化为[key, value]数组，然后使用flatMap来处理每个键值对，如果是数组，则生成多个键值对，否则生成一个。然后对每个键值对进行编码，最后用&连接。 具体步骤： 1. 使用Object.entries(obj)获取键值对数组。 2. 使用flatMap遍历每个键值对： 如果值是数组，则遍历数组的每个元素，对每个元素生成一个[key, element]对 否则，生成一个[key, value]对（注意：这里我们忽略undefined，将null转为空字符串） 3. 然后对每一对进行编码：`encodeURIComponent(key) + '=' + encodeURIComponent(value)`，注意value为null时转为空字符串，undefined则跳过整个键值对。 4. 用'&'连接所有字符串。 注意：在第二步中，我们也要过滤掉值为undefined的键值对（包括数组中的undefined元素？通常我们也会忽略数组中的undefined元素）。 但是，数组中的空值（null, undefined）如何处理？ 我们可以这样规定： - 如果数组元素是undefined，则跳过该元素（不生成键值对） - 如果是null，则生成key= （空值） 因此，我们可以编写如下函数： ```javascript function objectToQueryString(obj) { return Object.entries(obj) .flatMap(([key, value]) => { // 如果值是undefined，则忽略整个属性 if (value === undefined) { return []; } // 如果值是数组 if (Array.isArray(value)) { // 过滤掉数组中的undefined，但保留null（转为空字符串） return value .filter(item => item !== undefined) // 过滤掉数组元素中的undefined .map(item => [key, item === null ? '' : item]); } // 非数组，直接返回键值对（注意：这里value可能是null） return [[key, value === null ? '' : value]]; }) .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}` ) .join('&'); } ``` 但是，上面的函数在处理非数组时，我们也将null转为了空字符串，而数组部分也做了同样处理。 然而，我们也可以考虑另一种情况：如果传入的对象中有嵌套对象怎么办？根据前面的约定，我们不处理嵌套对象，所以如果遇到嵌套对象，我们需要决定如何处理。通常，我们可以选择忽略（因为无法转换为标准查询参数）或者抛出错误。但这里我们按照简单原则，只处理基本类型和数组，如果遇到对象（非数组且不是null），我们可以将其转换为字符串（例如JSON.stringify）？但这样可能不符合标准。所以，更安全的做法是只处理基本类型和数组，遇到对象（非数组）则跳过或报错。 但是，用户的问题没有提到嵌套对象，所以我们先不考虑。 测试一下： 输入：{ a: 1, b: '', c: null, d: undefined, e: [1,2,null,undefined] } 期望输出：a=1&b=&c=&e=1&e=2&e= 注意：d被忽略，数组中的undefined被忽略，null转为空字符串。 但是，上述函数在数组处理中，我们过滤了undefined，但并没有将null转为空字符串？实际上我们在map中处理了：对于数组元素，如果是null，我们将其转为空字符串，否则保留原值。 因此，我们写一个测试： ```javascript console.log(objectToQueryString({ a: 1, b: '', c: null, d: undefined, e: [1,2,null,undefined] })); // 输出：a=1&b=&c=&e=1&e=2&e= ``` 但是，注意：原对象中b是空字符串，c是null，在非数组部分，我们返回了[[key, '']]（因为value为null时转为空字符串，空字符串则保持不变），所以b和c都会变成key= 的形式。 另外，在数组部分，我们过滤了undefined，所以数组e中只有1,2,null，然后null被转为空字符串，所以e=1&e=2&e=。 但是，这个输出中，c=和e=后面没有值，这符合预期（因为空字符串编码后还是空字符串）。 然而，我们还要注意，空字符串在编码后还是空字符串，所以b= 实际上就是b=，而c=也是c=，e=也是e=。 但是，在URL中，空值就是key=的形式。 另一种常见做法：如果值是空字符串或null，我们也可以选择不包含这个键？但通常，我们需要包含，因为有时候服务器需要区分没有提供值和提供了空值。 因此，上述函数可以满足要求。 但是，引用[4]中方案二更简洁，但不支持数组。如果我们不需要支持数组，那么可以使用更简洁的方法： ```javascript let queryString = Object.keys(params) .filter(key => params[key] !== undefined) // 过滤掉undefined .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key] === null ? '' : params[key])}` ) .join('&'); ``` 这个方法不支持数组，因为当params[key]是数组时，会被直接传入encodeURIComponent，数组会被转换成逗号分隔的字符串（如"1,2,null"），这通常不是我们想要的。 所以，如果用户需要支持数组，就使用第一个函数；如果不支持数组，则用第二个。 但是，用户的问题没有明确说明是否包含数组，所以我们提供两种方案，并说明区别。 另外，引用[4]中方案二还处理了空字符串（params[i]||''）——即如果params[i]是假值（包括空字符串、0、false）则使用空字符串？但这样会覆盖0和false。所以，我们不应该用||，而是单独处理null和undefined。 在引用[4]的方案二中，他们使用了： `${i}=${encodeURIComponent(params[i]||'')}` 这样会导致0和false被转换为空字符串，因为0||''得到''，false||''也得到''。所以，这是有问题的。 因此，我们修正为：只对undefined和null使用空字符串（其中undefined已经被过滤，所以只需要处理null）。但注意，在引用[4]的方案二中，他们并没有过滤undefined，因为params[i]可能是undefined，那么params[i]||''就会得到''，然后被编码。但这样就会把undefined属性也包含进来了（变成了key=），而通常我们希望忽略undefined属性。 所以，我们更推荐使用Object.entries的方式，并明确过滤undefined。 综上，我们给出两个版本： 版本1：不支持数组，但简洁（适用于对象值都是基本类型，没有数组） 版本2：支持数组（适用于值可能是数组的情况） 由于用户问题没有明确，我们提供两个版本供选择。 另外，引用[4]还提到了使用axios的方案，如果项目中已经使用了axios，那么可以直接使用axios.getUri方法，它内部处理了各种情况。 总结回答： 我们可以这样回答用户： 在JavaScript中，将对象转换为URL查询参数字符串有多种方法。以下是几种常见方法： 方法一：使用原生JavaScript（支持基本类型和数组） 下面是一个处理数组的函数： ```javascript function objectToQueryString(obj) { return Object.entries(obj) .flatMap(([key, value]) => { if (value === undefined) { return []; } if (Array.isArray(value)) { return value .filter(item => item !== undefined) // 过滤掉数组中的undefined元素 .map(item => [key, item === null ? '' : item]); // 将null转为空字符串 } return [[key, value === null ? '' : value]]; }) .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}` ) .join('&'); } ``` 方法二：使用原生JavaScript（不支持数组，但更简洁） 如果对象中不包含数组，可以使用以下方法： ```javascript function objectToQueryStringSimple(obj) { return Object.entries(obj) .filter(([key, value]) => value !== undefined) // 过滤掉undefined .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value === null ? '' : value)}` ) .join('&'); } ``` 方法三：使用第三方库axios（需要安装axios） 如果你已经在项目中使用了axios，可以使用axios的getUri方法： ```javascript import axios from 'axios'; const params = { a: 1, b: '', c: '铁公鸡' }; const url = 'http://example.com/api'; const fullUrl = axios.getUri({ url, params }); // fullUrl 就是拼接好的URL，包含查询字符串 ``` 注意：axios的getUri方法会忽略null和undefined，但会保留空字符串、0和false。具体行为可参考axios文档。 根据你的需求选择合适的方法。 相关问题： 1. 如何处理嵌套对象转换为查询字符串？ 2. 在URL查询参数中，数组的多种表示方法（如逗号分隔）如何实现？ 3. 如何将查询字符串解析为JavaScript对象？</think>### JavaScript 对象转 URL 查询参数字符串方法 在 JavaScript 中，将对象转换为 URL 查询参数字符串主要有以下几种方法： #### 方法一：手动拼接（基础版） ```javascript function objectToQueryString(obj) { return Object.keys(obj) .filter(key => obj[key] !== undefined && obj[key] !== null) .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`) .join('&'); } // 示例 const params = { name: "小明", age: 25, hobby: "编程" }; const query = objectToQueryString(params); console.log(query); // "name=%E5%B0%8F%E6%98%8E&age=25&hobby=%E7%BC%96%E7%A8%8B" ``` #### 方法二：处理特殊值（空值/数组） ```javascript function objectToQueryStringAdvanced(obj) { return Object.entries(obj) .flatMap(([key, value]) => { if (value === undefined || value === null) return []; if (Array.isArray(value)) { return value.map(v => `${encodeURIComponent(key)}=${encodeURIComponent(v)}`); } return [`${encodeURIComponent(key)}=${encodeURIComponent(value)}`]; }) .join('&'); } // 示例 const params = { name: "小明", hobbies: ["编程", "阅读"], empty: null }; console.log(objectToQueryStringAdvanced(params)); // "name=%E5%B0%8F%E6%98%8E&hobbies=%E7%BC%96%E7%A8%8B&hobbies=%E9%98%85%E8%AF%BB" ``` #### 方法三：使用 URLSearchParams（现代浏览器） ```javascript const params = { name: "小明", age: 25 }; const query = new URLSearchParams(params).toString(); console.log(query); // "name=%E5%B0%8F%E6%98%8E&age=25" ``` #### 方法四：使用第三方库（如 Axios） ```javascript // 需要先安装 axios import axios from 'axios'; const params = { name: "小明", age: 25 }; const url = axios.getUri({ url: 'https://api.example.com', params }); console.log(url); // "https://api.example.com?name=小明&age=25" ``` ### 关键注意事项 1. **编码处理**：必须使用 `encodeURIComponent()` 对键和值进行编码，确保特殊字符（如中文、空格）正确传输[^1][^3] 2. **空值处理**： - `undefined` 和 `null` 通常被忽略 - 空字符串保留为 `key=` 形式 3. **数组处理**：数组应转换为多个同名参数（如 `hobbies=编程&hobbies=阅读`） 4. **嵌套对象**：标准查询参数不支持嵌套，需先序列化为 JSON 字符串 5. **浏览器兼容性**：`URLSearchParams` 不支持 IE，需使用 polyfill > 示例：包含特殊字符的对象转换 > ```javascript > const params = { > name: "小明", > city: "北京", > note: "Hello & World!" > }; > // 输出: "name=%E5%B0%8F%E6%98%8E&city=%E5%8C%97%E4%BA%AC¬e=Hello%20%26%20World%21" > ``` ### 相关问题 1. 如何将 URL 查询字符串反向解析为 JavaScript 对象？ 2. 使用 `URLSearchParams` 时如何处理嵌套对象？ 3. 在 Node.js 环境中如何实现对象与查询字符串的转换？ 4. 当 URL 参数包含特殊字符（如 `&`, `=`）时，如何确保正确编码？ 5. 如何批量处理对象中的空值（`null`, `undefined`, 空字符串）？ [^1]: JavaScript 查询字符串处理指南 [^2]: 对象转 URL 查询字符串基础实现 [^3]: 支持数组和空值的 URL 参数转换 [^4]: Axios 的 URL 参数拼接实现
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值