使用从服务接收的 JSON 填充引导模式答案

【问题标题】：Populate Bootstrap Modal using JSON received from service使用从服务接收的 JSON 填充引导模式
【发布时间】：2017-03-20 19:12:01
【问题描述】：

我正在尝试使用从服务调用收到的 JSON 中的值填充模态框。对象简单易懂的结构是这样的：

var object = [
{Value1: "Val1",
 Value2: "Val",
 Value3: [{a:"a",b:"b"}]
}]

ajax 调用是这样的：

$.ajax({
    type: "GET",
    url: "myURL",
    data: id,                                
    async: true,
    dataType: "json",
    contentType: "application/json; charset= UTF-8",
    success: function (response) {

       //alert("Successfully Inserted");
       //alert(JSON.stringify(response));          
    },
    error: function (error) {
        console.log(error);
        alert("Error!!");
    }
});

我验证了响应及其正确出现。

HTML：

<a href="#openModal">Open Modal</a>

<div id="openModal" class="modalDialog">
    <div>   <a href="#close" title="Close" class="close">X</a>

            <h2>Modal Box</h2>
<input type = "text" id="one" placeholder="Place Val1"/>
<input type = "text" id="two" placeholder="Place Val2"/>
<input type = "text" id="three" placeholder="Place a here"/>
<input type = "text" id="four" placeholder="PLace b here"/>

    </div>
</div>

我想在收到来自服务的 JSON 后，在 Open Modal 点击时填充模态。有人可以帮我做这件事吗？这是fiddler，它解释了我想要实现的更多目标。

【问题讨论】：

标签： javascript jquery ajax modal-dialog bootstrap-modal

【解决方案1】：

ajax成功后，响应如下处理

success: function (response) {
             // add data to modal and open the modal.
             $("#openModal").modal('show');
        },

【讨论】：

【解决方案2】：

我会创建一个这样的函数来为你填充：

success: function (response) {

     PopulateModal(response);
     $("#openModal").modal("show");         
},


function PopulateModal(data) {
    //*** this function targets each input and assigns the correct values
}

【讨论】：