Ajax如何页面跳转传值

[HsuVenChing]

在商品列表页点击购买按钮，弹出商品的确定下单信息（类似淘宝那种，我是用iframe层来显示）。应该如何做，最好有代码，对Ajax还是有点不理解（菜鸡一个）；

[快乐是一切]

不用iframe， 可以用一个将确认下单信息的页面放在一个div里面，默认隐藏display: none; 点击购买的时候显示display:block;

[HsuVenChing]

引用 12 楼 三岁打酱油 的回复:

jquery事件委托

<div class="商品列表id">
<button pid="遍历的商品id">购买</button>
div>

$('商品列表id').on('click', '购买按钮', function () {
var id = $(this).attr('pid')
//ajax请求
//ajax响应数据赋值到dom显示之前隐藏的div
})

感谢您的解答，这样拿到id，可是应该怎么获取这个id下的所有数据，id.name，id.images这些数据

[jio可]

数据是通过ajax请求api返回的

$.ajax({
  url: "地址",
  data: {id: 'xxxx'},
  dataType: 'json',
  success: function(res){
    console.log(res)
  }
});

[HsuVenChing]

引用 1 楼 快乐是一切 的回复:

不用iframe， 可以用一个将确认下单信息的页面放在一个div里面，默认隐藏display: none; 点击购买的时候显示display:block;

怎么把商品id的值传到详情页获取数据出来？

[HsuVenChing]

怎么去拿到这样的url值，后面串数字

[快乐是一切]

引用 2 楼 hdiebk 的回复:

[quote=引用 1 楼 快乐是一切 的回复:] 不用iframe， 可以用一个将确认下单信息的页面放在一个div里面，默认隐藏display: none; 点击购买的时候显示display:block;

怎么把商品id的值传到详情页获取数据出来？[/quote] 可以传到后台，后台再传到另一个页面。前台页面之间传递不了数值的。解析url也是后台做的，这些逻辑不能放在前端。

[jio可]

后台重定向一个地址url，为什么要用这种方式。iframe性能很差

[weixin_43869905]

把值放到url路径上 然后在url路径上取,最好是 传到后台 后台在返回

[jio可]

点击购买发ajax请求后台返回后把数据写到页面div设置display:block

[HsuVenChing]

引用 6 楼 weixin_43869905 的回复:

把值放到url路径上 然后在url路径上取,最好是 传到后台 后台在返回

怎么去获取这个url中的id值，取值，传值这个不太懂，能有代码吗？麻烦了

[HsuVenChing]

引用 6 楼 weixin_43869905 的回复:

把值放到url路径上 然后在url路径上取,最好是 传到后台 后台在返回

引用 5 楼 三岁打酱油 的回复:

后台重定向一个地址url，为什么要用这种方式。iframe性能很差

我做的是一个移动端商场，就是想在点击购买的时候，直接在低部弹出，选择规格，类似手机淘宝的样式

[jio可]

var id = location.href.split('id/')[1].split('.')[0] 这个id不是前端传给后台的?

[HsuVenChing]

引用 10 楼 三岁打酱油 的回复:

var id = location.href.split('id/')[1].split('.')[0] 这个id不是前端传给后台的?

商品的id,我遍历出来了，该以哪种形式绑定到点击按钮中，再进行点击后取值，传值，这部分还是懵，为什么我拿的url是这种格式的，而有些含有&符号以及?之类的

[jio可]

jquery事件委托

<div class="商品列表id">
<button pid="遍历的商品id">购买</button>
div>

$('商品列表id').on('click', '购买按钮', function () {
var id = $(this).attr('pid')
//ajax请求
//ajax响应数据赋值到dom显示之前隐藏的div
})

[HsuVenChing]

引用 14 楼 三岁打酱油 的回复:

数据是通过ajax请求api返回的

$.ajax({
  url: "地址",
  data: {id: 'xxxx'},
  dataType: 'json',
  success: function(res){
    console.log(res)
  }
});

我一直以为只有一个请求地址就可以了，原来还有，很感谢你的回复以及教学