将JSON数据转换为Bootstrap模式 [英] JSON data into a Bootstrap modal

问题描述

我想将JSON数据放入Bootstrap Modal.

I want to put JSON data into 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"
}

示例模式:

<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>

问题是如何从按钮将ID(id ="1_ajax")传输到GET查询，以及如何解析JSON答案?我需要AngularJS吗?还是可能与jquery有关?

The question is how to transfer id (id="1_ajax") from buttons to GET query and how to parse the JSON answer? Do I need AngularJS? Or it is possible to do with jquery?

推荐答案

我创建了一个jQuery函数来为我填充模式，它可用于所有DOM元素，而不仅是模式. 您可以在此处查看其运行情况: https://jsfiddle.net/Loenix34/x9y30jnw/3/

I created a jQuery function to fill a modal for me, it works with all DOM element, not only modals. You can see it in action here : 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);
                    }
                });
            });
        });
    };
}

如您所见，它用文本，输入作为值，锚定作为链接以及图像作为源填充常用元素.

As you can see, it fills common elements with text, input as value, anchor as link and image as source.

享受！

这篇关于将JSON数据转换为Bootstrap模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！