JSON 格式的 Ext.data.store POST 数据问题答案

【问题标题】：Ext.data.store POST data in JSON format issueJSON 格式的 Ext.data.store POST 数据问题
【发布时间】：2012-03-03 17:39:20
【问题描述】：

我正在尝试让 EXT JSON 存储使用 JSON 发送数据，但它似乎不起作用。这是简单的代码：

       var myStore = new Ext.data.Store({
    //model: 'User',
    proxy: {
        type: 'ajax',
        url: '/users.svc',
        reader: {
            type: 'json',
            root: 'users'
        },
        writer: {
            type: 'json',
            root: 'data'
        },
        actionMethods: {
            create: 'POST', read: 'POST', update: 'POST', destroy: 'POST'
        },
        extraParams: { test: 'test' }
    },
        listeners: {
            beforeload: function (store, operation, options) {
                //alert(operation.params);
            }
        },
    autoLoad: true
});

由于我定义了 JSON“编写器”，我期望参数将使用 JSON 发送到服务器。但是，它仍在使用以下正文进行常规 POST： test=test&page=1&start=0&limit=25

虽然我的期望是 POST 应该有以下正文：{test:'test',page:1,start:0}

如果有任何帮助，我将不胜感激

附：我正在使用 EXTJS 4.0.7

【问题讨论】：

标签： javascript json extjs extjs4 http-post

【解决方案1】：

proxy.read 总是使用 params，而不是 jsonData，所以 store.load 不能发布 json

http://ahlearns.wordpress.com/2012/08/16/ext-js-4-load-a-data-store-using-json-params/

Ext.define('Ext.ux.data.proxy.JsonAjaxProxy', {
extend:'Ext.data.proxy.Ajax',
alias:'proxy.jsonajax',

actionMethods : {
    create: "POST",
    read: "POST",
    update: "POST",
    destroy: "POST"
},

buildRequest:function (operation) {
    var request = this.callParent(arguments);

        // For documentation on jsonData see Ext.Ajax.request
        request.jsonData = request.params;
        request.params = {};

        return request;
},

/*
 * @override
 * Inherit docs. We don't apply any encoding here because
 * all of the direct requests go out as jsonData
 */
applyEncoding: function(value){
    return value;
}

});

希望这会有所帮助！

【讨论】：

如何发送请求正文？我看到了链接，但无法弄清楚？
这个问题是关于“Ext.data.store POST data in JSON format”，所以使用 store.load({params:{a:1,b:2}}) 将参数发布为 json
看起来这应该可行，不是吗？但是，如果不定义 apiconfig 之类的 api: { create: 'server/jsonProxy.php?action=create', read: undefined, update: 'server/jsonProxy.php?action=update', destroy: 'server/jsonProxy.php?action=destroy' },，您将如何区分这些操作？

【解决方案2】：

将proxy 定义转换为model。

例如

Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'email'],
proxy: {
    type: 'ajax',
    url: '/users.svc',
    reader: {
        type: 'json',
        root: 'users'
    },
    writer: {
        type: 'json',
        root: 'data'
    },
    actionMethods: {
        create: 'POST', read: 'POST', update: 'POST', destroy: 'POST'
    },
    extraParams: { test: 'test' }
}
});

然后像这样配置商店：

 var myStore = new Ext.data.Store({
   model: 'User'
   });

商店将使用模型中指定的代理。希望这会有所帮助！

【讨论】：