Question

我想将JSON数据放入Bootstrap Modal。

示例JSON：

(/list.php?action=cam_settings&id=1)
{
"id":"1",
"title":"TEST",
"enabled":"1",
"source":"rtsp://192.168.1.10/user=admin_password=tlJwpbo6_channel=1_stream=0.sdp?real_stream"
}

(/list.php?action=cam_settings&id=2)
{
"id":"2",
"title":"TEST 2",
"enabled":"1",
"source":"rtsp://192.168.1.123/user=admin_password=tlJwpbo6_channel=1_stream=0.sdp?real_stream"
}

样本模式：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<a id="1_ajax" data-toggle="modal" data-target="#cam_settings" class="btn btn-warning">ID 1</a>
<a id="2_ajax" data-toggle="modal" data-target="#cam_settings" class="btn btn-warning">ID 2</a>

<!-- Camera Settings Modal -->
<div class="modal fade" id="cam_settings" tabindex="-1" role="dialog" aria-labelledby="cam_settings">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="cam_settings">Настройки камеры</h4>
      </div>
      <div class="modal-body">
		<form action="" method="post">
		<fieldset>
            <div class="control-group">
              <label class="control-label" for="id">ID</label>
              <div class="controls">
                <input type="text" id="id" name="id" required class="form-control input-lg">
              </div>
            </div>
         
            <div class="control-group">
              <label class="control-label" for="name">Название</label>
              <div class="controls">
                <input type="text" id="name" name="name" required class="form-control input-lg">
              </div>
            </div>
		
            <div class="control-group">
              <label class="control-label" for="source">Источник</label>
              <div class="controls">
                <input type="text" id="source" name="source" required class="form-control input-lg">
              </div>
            </div>
		
			<div class="checkbox">
				<label>
				<input type="checkbox"> Камера включена
				</label>
			</div>
		
			<input class="btn btn-primary" type="submit" value="Сохранить">
		</fieldset>
		</form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Удалить камеру</button>	  
        <button type="button" class="btn btn-default" data-dismiss="modal">Отмена</button>
      </div>
    </div>
  </div>
</div>

＆＃13;

问题是如何将id（id =＆＃34; 1_ajax＆＃34;）从按钮转移到GET查询以及如何解析JSON答案？我需要AngularJS吗？或者可以用jquery做什么？

Answer 1

我创建了一个jQuery函数来为我填充模态，它适用于所有DOM元素，而不仅仅是模态。你可以在这里看到它：https://jsfiddle.net/Loenix34/x9y30jnw/3/

这是代码

if( $ ) {
    $.fn.fill = function(prefix, data) {
        $(this).each(function(key, value) {
            var container = $(this);
            $.each(data, function(key, value) {
                container.find("."+prefix+key).each(function() {
                    var element = $(this);
                    if( element.is("img") ) {
                        element.attr("src", value);
                    } else
                    if( element.is("a") ) {
                        element.attr("href", value);
                    } else
                    if( element.is(":input") ) {
                        element.val(value);
                    } else {
                        element.text(value);
                    }
                });
            });
        });
    };
}

正如你所看到的，它用文本填充常见元素，输入值作为值，锚点作为链接，图像作为源。

享受！

将JSON数据转换为Bootstrap模式

1 个答案: