Javascript 如何使用BackboneJs获取JSON数据并更新html？_Javascript_Html_Json_Backbone.js_Backgrid

Javascript 如何使用BackboneJs获取JSON数据并更新html？

javascript html json backbone.js

Javascript 如何使用BackboneJs获取JSON数据并更新html？,javascript,html,json,backbone.js,backgrid,Javascript,Html,Json,Backbone.js,Backgrid,我使用BackgridJs，它使用Backbonejs用数据填充网格这就是我的代码现在的样子： <!DOCTYPE html> <html> <head> <title>Terminal</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">

我使用BackgridJs，它使用Backbonejs用数据填充网格

这就是我的代码现在的样子：

<!DOCTYPE html>
<html>
  <head>
    <title>Terminal</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../js/backgrid/lib/backgrid.css" />
    <script src="../js/backgrid/assets/js/jquery.js"></script>
    <script src="../js/backgrid/assets/js/underscore.js"></script>
    <script src="../js/backgrid/assets/js/backbone.js"></script>
    <script src="../js/backgrid/lib/backgrid.js"></script>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <div class="btn-group">
    <a class="btn btn-ledger dropdown-toggle" data-toggle="dropdown" href="#">
    Ledger
    <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
    <li><a tabindex="-1" href="#">With Margin</a></li>
    <li><a tabindex="-1" href="#">Without Margin</a></li>
    </ul>
    </div>
    <div class="btn-group">
    <a class="btn btn-company-code dropdown-toggle" id = "company_code" data-toggle="dropdown" href="#">
    Company Code
    <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
    <li><a tabindex="-1" href="#">DHA</a></li>
    <li><a tabindex="-1" href="#">HAC</a></li>
    <li><a tabindex="-1" href="#">DHA</a></li>
    </ul>
    </div>
    <div class="btn-group">
    <a class="btn btn-cost-centre dropdown-toggle" data-toggle="dropdown" href="#">
    Cost centre
    <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
    <li><a tabindex="-1" href="#">ALL</a></li>
    <li><a tabindex="-1" href="#">NSE-EQ</a></li>
    </ul>
    </div>
    <div class="btn-group">
    <a class="btn btn-type dropdown-toggle" data-toggle="dropdown" href="#">
    Type
    <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
    <li><a tabindex="-1" href="#">CLNT</a></li>
    <li><a tabindex="-1" href="#">GENL</a></li>
    <li><a tabindex="-1" href="#">MARG</a></li>
    </ul>
    </div>

    <button type="submit" id = "submit" class="btn btn-success">
                <i class="icon-circle-arrow-right icon-large"></i> Submit
    </button>

    <div id="example-1-result" class="backgrid-container"></div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="../static/js/bootstrap.min.js"></script>

    <script>

    var Territory = Backbone.Model.extend({});

var Territories = Backbone.Collection.extend({
  model: Territory
  //url: "examples/territories.json"
});

//var territories = new Territories();
var territory1 = new Territory({ name: "How Bizarre", pop: 20 });
var territory2 = new Territory({ name: "How ", pop: 21 });
var territories = new Territories([territory1,territory2]);
var columns = [{
  name: "id", // The key of the model attribute
  label: "ID", // The name to display in the header
  editable: false, // By default every cell in a column is editable, but *ID* shouldn't be
  // Defines a cell type, and ID is displayed as an integer without the ',' separating 1000s.
  cell: Backgrid.IntegerCell.extend({
    orderSeparator: ''
  })
}, {
  name: "name",
  label: "Name",
  // The cell type can be a reference of a Backgrid.Cell subclass, any Backgrid.Cell subclass instances like *id* above, or a string
  cell: "string" // This is converted to "StringCell" and a corresponding class in the Backgrid package namespace is looked up
}, {
  name: "pop",
  label: "Population",
  cell: "integer" // An integer cell is a number cell that displays humanized integers
}, {
  name: "percentage",
  label: "% of World Population",
  cell: "number" // A cell type for floating point value, defaults to have a precision 2 decimal numbers
}, {
  name: "date",
  label: "Date",
  cell: "date",
}, {
  name: "url",
  label: "URL",
  cell: "uri" // Renders the value in an HTML anchor element
}];

// Initialize a new Grid instance
var refreshgrid = function(){
    var grid = new Backgrid.Grid({
      columns: columns,
      collection: territories
    });

    // Render the grid and attach the root to your HTML document
    $("#example-1-result").append(grid.render().$el);
}
// Fetch some countries from the url
//territories.fetch({reset: true});


    $(".dropdown-menu li").click(function(){
    $(this).closest('.btn-group').children('a').text($(this).text())
});

    $('#submit').on('click', function(event) {
        url = '/ledger/data'
        company_code = $("#company_code").text();

 // event.preventDefault(); // To prevent following the link (optional)
 $.post( url, { name: "John", time: "2pm" },function(data){
    ledgerData = JSON.parse(data);

    refreshgrid();
 });
      //$.post(url,function(response){
      //  alert(response);
      //});
});
    </script>
  </body>
</html>


终点站
你好，世界！


















提交
var Territory=Backbone.Model.extend（{}）；
var territions=Backbone.Collection.extend({
型号：Territory
//url:“examples/territions.json”
});
//var Territions=新界（）；
var territory1=新领土（{name:“多么奇怪”，pop:20}）；
var territory2=新领土（{name:“How”，pop:21}）；
var Territions=新界（[地区1，地区2]）；
变量列=[{
名称：“id”，//模型属性的键
标签：“ID”，//要在标题中显示的名称
可编辑：false，//默认情况下，列中的每个单元格都是可编辑的，但是*ID*不应该是可编辑的
//定义单元格类型，ID显示为整数，不带“，”分隔1000。
单元格：Backgrid.IntegerCell.extend({
订单分隔符：“”
})
}, {
姓名：“姓名”，
标签：“姓名”，
//单元格类型可以是Backgrid.cell子类、任何Backgrid.cell子类实例（如上面的*id*）或字符串的引用
cell:“string”//将其转换为“StringCell”，并在Backgrid包命名空间中查找相应的类
}, {
姓名：“流行”，
标签：“人口”，
单元格：“整数”//整数单元格是显示人性化整数的数字单元格
}, {
名称：“百分比”，
标签：“%的世界人口”，
单元格：“数字”//浮点值的单元格类型，默认为精度为2个十进制数字
}, {
姓名：“日期”，
标签：“日期”，
单元格：“日期”，
}, {
名称：“url”，
标签：“URL”，
单元格：“uri”//呈现HTML锚元素中的值
}];
//初始化一个新的网格实例
var refreshgrid=函数（）{
var grid=新的Backgrid.grid({
列：列，
收藏：领土
});
//呈现网格并将根附加到HTML文档
$（“#示例-1-result”）.append（grid.render（）.$el）；
}
//从url获取一些国家/地区
//territions.fetch（{reset:true}）；
$（“.li”下拉菜单）。单击（函数（）{
$（this）.closest（'.btn group'）.children（'a'）.text（$（this）.text（））
});
$（“#提交”）。在（'click'，函数（事件）{
url='/ledger/data'
公司代码=$（“#公司代码”）.text（）；
//event.preventDefault（）；//防止跟踪链接（可选）
$.post（url，{name:“John”，time:“2pm”}，函数（数据）{
ledgerData=JSON.parse（数据）；
刷新网格（）；
});
//$.post（url、函数（响应）{
//警报（响应）；
//});
});

当我在Post请求中获得JSON数据时，我不知道如何在refreshgrid（）调用期间将其提供给网格

在大多数Backbonejs示例中，url位于模型本身中，但对我来说，url在每次提交后都会不断更改。那么，如何获取数据并将其提供给网格呢？

默认情况下，Backbone.js使用

Accept

头为

application/json

发出RESTful请求

如果在集合上设置了

url

属性，则获取数据的过程非常简单，如调用

fetch

请在此处阅读更多有关该酒店的信息

var CandiesCollection = Backbone.Collection.extend({url: "/candies"});

var c = new CandiesCollection;
c.fetch();

// GET /candies (Accept: application/json, text/javascript, */*; q=0.01)

更多的例子，为你做神奇的工作

当您保存新模型（或使用
```
collection.create（）
```
）时，Backbone.js将自动发出
```
POST
```
请求
同样，当您在现有模型上调用
```
model.save（）
```
时，它将自动发出
```
PUT
```
请求
```
model.destroy（）
```
将发出
```
DELETE
```
请求

除此之外，更新/刷新的方式完全相同。

如何发送post请求？@Hick，我已经更新了我的答案，以指出主干网何时发出其他请求。关键是，你不必担心。主干总是提出正确的要求。