AJAX传参,JS获取当前URL参数(超级实用)

本文详细介绍了如何通过JavaScript获取AJAX请求的URL参数,并提供了实例演示,适合AJAX开发场景使用。
AJAX传参,JS获取当前URL参数,当我们需要获取页面的URL参数的时候,可以通过下面这段JS代码获取:
var getParam = function(name){
    var search = document.location.search;
    var pattern = new RegExp("[?&]"+name+"\=([^&]+)", "g");
    var matcher = pattern.exec(search);
    var items = null;
    if(null != matcher){
            try{
                    items = decodeURIComponent(decodeURIComponent(matcher[1]));
            }catch(e){
                    try{
                            items = decodeURIComponent(matcher[1]);
                    }catch(e){
                            items = matcher[1];
                    }
            }
    }
    return items;
};


调用方法:

alert(getParam('参数名'));

URL参数示例:http://example.com?cid=123&dsf=12&ids=9384

alert(getParam('cid'));  ======》结果123

alert(getParam('ids')); ======》结果9384


注:该方法无论任何长度的参数,中间间隔多少个参数,只要你的查找的请求参数参数名对应,就能找出!使用AJAX开发必备啊!如果大家有更好的方法解决AJAX传参问题,老猫愿闻其详!

### 使用 JavaScript AJAX 发送带参数的 POST 请求并接收响应 为了实现通过 AJAX 发送带有参数的 POST 请求,可以利用 `XMLHttpRequest` 或者更方便的 jQuery 库中的 `.ajax()` 方法。下面展示的是基于 jQuery 的解决方案。 #### 准备工作 确保页面已经引入了 jQuery 库。可以通过 CDN 方式快速加载: ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``` #### 构建表单数据对象 创建一个包含要提交的数据的对象,并将其序列化为 JSON 字符串以便于传输[^1]。 ```javascript let formData = { "searchTerm": document.getElementById('searchInput').value, "category": document.querySelector('input[name=category]:checked').value }; let jsonData = JSON.stringify(formData); ``` #### 配置 $.ajax 设置项 设置请求类型 (`type`) 为 `"POST"` 并指定目标 URL 和待发送的数据(`data`). 如果服务器端期望接收到 JSON 数据,则应相应调整 `contentType` 属性来指明这一点[^4]. ```javascript $.ajax({ type: 'POST', url: '/api/search', // 替换成实际接口地址 contentType: 'application/json; charset=utf-8', dataType: 'json', data: jsonData, success: function(response){ console.log("Success:", response); displayResults(response.items); }, error: function(xhr,status,errorThrown){ alert("Error occurred while processing your request."); console.error(status + ": " + errorThrown); } }); ``` 当使用 `$.ajax({type:"POST"})`, 浏览器会先发起一次 OPTIONS 请求来进行预检 (Preflight),这是 CORS 协议的一部分,用于确认跨域资源共享的安全策略[^2]. 一旦成功返回结果,可以在回调函数中处理这些数据;如果发生错误则执行相应的异常处理逻辑。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值