在BackboneJS中传递未转义的查询字符串

时间:2013-07-10 06:38:04

标签: javascript backbone.js query-string

我正在尝试根据4个下拉列表中的不同选择传递查询字符串。我通过变量传递查询字符串,但它正在被转义,因此结果是404错误。

这是我为编写查询字符串而编写的代码...

      function setQueryString(product,brand,demographic,region)
     {
      product =  dropdownlists.get('Product');
      brand = dropdownlists.get('Brand');
      demographic = dropdownlists.get('Demographic');
      region = dropdownlists.get('Region');
      if(product !=='' && brand !=='' && demographic !=='' && region !=='')
        {
           queryString = 'product='+product+'&'+'brand='+brand+'&'+'demographic='+demographic+'&'+'region='+region ;
           return queryString;
        }
      else{console.log('nevermind!!');}
     }

There is a view function updating the DataModel model with selected values every time user makes a selection.Based on these selections we get (colorscale) data from the server.

    var DataModel = Backbone.Model.extend({
              urlRoot : '/api/web/',
              idAttribute: 'value',
              defaults : {
                 Product : '',
                 Brand : '',
                 Demographic : '',
                 Region : ''
             }
      });
    var dropdownlists = new DataModel();



    var colorscalelist = new ColorScaleModel({value: setQueryString()});
         colorscalelist.fetch({success: function(){
         console.log(colorscalelist);
        }
      });

Colorcale模型是:

    var ColorScaleModel = Backbone.Model.extend({
    urlRoot : '/api/web/colorscale',
    idAttribute: 'value',
    defaults : {
            DPRBID: " ",
            F: "",
            BR1: " ",
            BR2: " ",
            BR3: " ",
            UN: " ",
            C: " ",
            T: " "
      }
        });

传递的URL将转换为ASCII字符。有没有办法直接传递,未转义。或者,有没有其他方法来解决发送数据的问题。它是我的第一个BackboneJS项目,任何帮助都会很棒。 谢谢。

2 个答案:

答案 0 :(得分:1)

Backbone中的Ajax操作最终委托给jQuery,因此接受将修改请求的选项。要添加请求参数,您可以传递将作为查询字符串传输的data参数。

例如,

var ColorScaleModel = Backbone.Model.extend({
    url : '/api/web/colorscale',

    defaults : {
    }
});

var dropdownlists = new DataModel({
    Product : 'P1',
    Brand : 'B1',
    Demographic : 'D1',
    Region : 'R1'
});

var colorscalelist = new ColorScaleModel();
colorscalelist.fetch({
   data: dropdownlists.toJSON() 
});

会向/api/web/colorscale?Brand=B1&Demographic=D1&Product=P1&Region=R1

发出请求

请参阅http://jsfiddle.net/nikoshr/wufbL/了解演示

您可以更进一步,通过覆盖model.fetch将过滤器合并到模型中。例如:

var ColorScaleModel = Backbone.Model.extend({
    url : '/api/web/colorscale',

    defaults : {
    },

    initialize: function(attrs, opts) {
        this.filters = opts.filters;
    },

    fetch: function(opts) {
        opts = opts || {};
        opts.data = this.filters.toJSON();

        return Backbone.Model.prototype.fetch.call(this, opts);
    }
});

var dropdownlists  = new DataModel();
var m = new ColorScaleModel({}, {filters: dropdownlists});
m.fetch();

f.set({Product: "P1", Brand: "B1"});
m.fetch();

http://jsfiddle.net/nikoshr/wufbL/1/

一起玩的小提琴

答案 1 :(得分:0)

您的函数setQueryString()应返回查询对象,而不是字符串。 而不是

queryString = 'product='+product+'&'+'brand='+brand+'&'+'demographic='+demographic+'&'+'region='+region 

你应该回来

{
    product: product,
    brand: brand,
    demographic: demographic,
    region: region
}

然后,在fetch调用中将此对象作为data参数传递。像

这样的东西
colorscalelist.fetch({ data: getQuery(), success: function() { ... } });

getQuery()返回上述对象,在我看来是比setQueryString()更好的名字......)

然后fetch函数会将查询对象序列化为查询字符串并执行所有必要的转义。