Javascript 如何在modal bootsrap中发送参数？

演示和完整代码如下所示：

<button type="button">Click Me</button>

<div id="tes"></div>

<!-- Modal Currency-->
<div class="modal fade" id="priceModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">

            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

我的HTML代码如下所示：

<button type="button">Click Me</button>

<div id="tes"></div>

<!-- Modal Currency-->
<div class="modal fade" id="priceModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">

            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

点击我
接近

我的Javascript代码如下所示：

$(document).ready(function(){
        $("button").click(function(){
            $.ajax({
                //type: 'POST',
                //url: 'script.php',
                success: function(data) {
                    var priceModal = '{"attributes":{"Code":"DBL","Total":"200000"},"DayPrice":{"Date":"2016-05-26","Rate":"200000"}}';

                    var isitable = '<button class="btn blue tes_button" data-toggle="modal" data-target="#priceModal" id="priceModal='+priceModal+'">Test get parameter json array</button>';
                    $("#tes").html(isitable);
                }
            });
        });

        $('#priceModal').on('show.bs.modal', function(e) {
             //console.log('yes');
            var param = e.relatedTarget.id;
            // var hotel_code = $(this).data('id');
            console.log(param);
            // console.log(hotel_code);
        })
    });

$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$.ajax({
//键入：“POST”，
//url:'script.php'，
成功：功能（数据）{
var priceModal='{“属性”：{“代码”：“DBL”，“总计”：“200000”}，“日价格”：{“日期”：“2016-05-26”，“费率”：“200000”}”；
var isitable='Test get parameter json array'；
$（“#tes”）.html（可浏览）；
}
});
});
$（'#priceModal'）.on（'show.bs.modal'，函数（e）{
//console.log（'yes'）；
var param=e.relatedTarget.id；
//var hotel_code=$（this）.data（'id'）；
控制台日志（param）；
//控制台日志（酒店代码）；
})
});

当点击“点击我”按钮时，会显示“测试获取参数json数组”按钮

当单击按钮“测试获取参数json数组”时，我想将参数

priceModal

发送到modal。参数

priceModal

包含json数组。我做console.log（param）；在（'show.bs.modal'，函数（e）{中，'priceModal'）.on（'show.bs.modal'）

但结果是：

priceModal={

。 它无法获取priceModal的值

有什么办法解决我的问题吗

谢谢

当您调用

id=“priceModal=”+priceModal+”

时，您将json错误地附加到元素的id中

数据属性更合适，更像这样：

success: function(data) {
  var priceModal = {"attributes":{"Code":"DBL","Total":"200000"},"DayPrice":{"Date":"2016-05-26","Rate":"200000"}};
  var isitable = '<button class="btn blue tes_button" data-toggle="modal" data-target="#priceModal" data-price-modal="">Test get parameter json array</button>';
  $("#tes").html(isitable).find('[data-price-modal]').data('price-modal',priceModal);
}


$('#priceModal').on('show.bs.modal', function(e) {
  var param = $('[data-price-modal]').data('price-modal');
  console.log(param);
})

调用

id=“priceModal=”+priceModal+”

时，您将json错误地附加到元素的id中

数据属性更合适，更像这样：

success: function(data) {
  var priceModal = {"attributes":{"Code":"DBL","Total":"200000"},"DayPrice":{"Date":"2016-05-26","Rate":"200000"}};
  var isitable = '<button class="btn blue tes_button" data-toggle="modal" data-target="#priceModal" data-price-modal="">Test get parameter json array</button>';
  $("#tes").html(isitable).find('[data-price-modal]').data('price-modal',priceModal);
}


$('#priceModal').on('show.bs.modal', function(e) {
  var param = $('[data-price-modal]').data('price-modal');
  console.log(param);
})

---

将您的

JSON

放入

var priceModal = "{'attributes':{'Code':'DBL','Total':'200000'},'DayPrice':{'Date':'2016-05-26','Rate':'200000'}}";

var isitable = '<button class="btn blue tes_button" data-toggle="modal" data-target="#priceModal" id="priceModel" data-json='+priceModal+'">Test get parameter json array</button>';

---

将您的

JSON

放入

var priceModal = "{'attributes':{'Code':'DBL','Total':'200000'},'DayPrice':{'Date':'2016-05-26','Rate':'200000'}}";

var isitable = '<button class="btn blue tes_button" data-toggle="modal" data-target="#priceModal" id="priceModel" data-json='+priceModal+'">Test get parameter json array</button>';

---

---

这是什么

id=“priceModal=”+priceModal+”

？您的意思是这样将json添加到元素的id中吗？

data price modal=“+priceModal+”“

将更受欢迎@bleeted0d。这不是一个好主意id@mosestoh您想要在模型中获得的所有值都是

priceModal

这是什么

id=“priceModal=”+priceModal+”

？您的意思是像这样将json添加到元素的id中吗？

data price modal=“+priceModal+”“

将更受欢迎@bleeted0d。这不是一个好主意id@mosestoh您想要在模型中获得

priceModal

值的所有内容？？console.log（param）的结果；：

{

@mosestoh my bad，我忘了JSON在这种情况下有点麻烦。请看我的编辑，使用jQuery添加对象并让它处理细节实际上更容易。看起来我将使用这种方式：。但是存在error@mosestoh该JSFIDLE不使用上面的代码查看新的FIDLE:。我添加

console.log（JSON.parse（JSON））；

。存在错误：

语法错误：JSON.parse:JSON数据第1行第96列的JSON数据后出现意外的非空白字符。
控制台.log（param）的结果；
：
{
@mosestoh my bad，我忘了JSON在这种情况下有点麻烦。请看我的编辑，使用jQuery添加对象并让它处理细节实际上更容易。看起来我将使用这种方式：。但是存在error@mosestoh该JSFIDLE不使用上面的代码查看新的FIDLE:。我添加
console.log（JSON.parse（JSON））存在错误：
SyntaxError:JSON.parse:JSON数据第1行第96列的JSON数据后出现意外的非空白字符
。我认为这不太管用，请看这个，如果您在html中设置它，我非常确定您需要对字符串进行编码，以便以后能够从中获取有用的内容itself@DelightedD0D您是否检查了给定的Fiddle URL？？？@DelightedD0D，看起来我将使用这种方式。但是当我尝试JSFIDLE时，出现了错误。错误：
SyntaxError:JSON.parse:预期的属性名称或'}'在JSON数据的第1行第2列
。看起来它实际上无法转换为objects，这就是我说的，如果你想这样做，你必须在服务器上对字符串进行编码。
var isitable='中多余的双引号，'我认为这不太管用，看到这个，我非常确定你需要将字符串编码为如果您在html中设置了它，以后就可以从中获取任何有用的信息itself@DelightedD0D您是否检查了给定的Fiddle URL？？？@DelightedD0D，看起来我将使用这种方式。但是当我尝试JSFIDLE时，出现了错误。错误：
SyntaxError:JSON.parse:预期的属性名称或'}'在JSON数据的第1行第2列
。看起来它实际上无法转换为objectsexactly，这就是我所说的，如果你想这样做，你必须在服务器上对字符串进行编码。
var中多余的双引号是可解的
var priceModal = "{'attributes':{'Code':'DBL','Total':'200000'},'DayPrice':{'Date':'2016-05-26','Rate':'200000'}}";

var isitable = '<button class="btn blue tes_button" data-toggle="modal" data-target="#priceModal" id="priceModel" data-json='+priceModal+'">Test get parameter json array</button>';