javascript - 在sencha extjs Rest Web服务中使用POST方法发送数据

Question

我想通过使用 post 方法将数据发送到我的网络服务器来保存模型，我编写了这些代码并注意到 sencha 正在使用 GET 方法发送数据。如何使用POST方法发送数据？我的模型代码:

Ext.define('MyApp.model.emp.Roles', {
    extend: 'MyApp.model.Base',

    fields: [
        {
            type: 'int',
            name: 'id'
        },
        
{
            type: 'string',
            name: 'title'
        },
    ],
    proxy: {
        type: 'ajax',
        url : 'http://myweb.test/json/fa/myweb/managerole.jsp',
        idParam: 'id',
        extraParams: {
            'action':'btnSave_Click'
        },

        method:'POST',
        actionMethods: {
            create : 'POST',
            read   : 'POST',
            update : 'POST',
            destroy: 'POST'
        },
    }
});

保存调用代码:

{
            xtype: 'button',
            text:  'ذخیره',
            handler:function()
            {
                var user = Ext.create('MyApp.model.emp.Roles', {title: 'A Role From Sencha'});
                user.set('title','hi');
                user.set('id',-1);
                user.save({
                    params: user.getData(),
                    callback: function (records, operation) {
                        Ext.Msg.alert('User Save', operation.getResponse().responseText);
                    },
                    methodName:'POST',
                    method:'POST',
                });

            }
        }

Answer 1

如果您使用model那么你只需要使用 actionMethods .

actionMethods 操作名称到 HTTP 请求方法的映射。在基本的 AjaxProxy 中，这些设置为“读取”操作的“GET”和“创建”、“更新”和“销毁”操作的“POST”。默认为:

{
    create: 'POST',
    read: 'GET',
    update: 'POST',
    destroy: 'POST'
} 

在此FIDDLE ，我使用模型和按钮创建了一个演示。我希望这将帮助/指导您实现您的要求。

*注意我只使用了本地网址。我没有任何实时网址。您可以在网络请求中看到数据正在 url 中发送。

代码片段

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.define('MyModel', {
            extend: 'Ext.data.Model',
            fields: ['version', 'code', 'framework', 'frameworkVersion', 'fiddleid', 'inspector', 'session'],
            proxy: {
                type: 'ajax',
                url: 'local', //I am providing local url in your case you can provide your rest webservice url
                useDefaultXhrHeader: false,
                actionMethods: {
                    create: 'POST', //When you want to save/create new record
                    read: 'GET', //When you want to get data from server side
                    update: 'PUT', //When you want to update the record
                    destroy: 'DELETE' //When you want to delete the record
                },
                paramAsJson: true // if You  want to encode the data from clint side then it should be true otherwise false
            }
        });

        Ext.create({
            fullscreen: true,
            renderTo: Ext.getBody(),
            xtype: 'panel',
            title: 'sending data using POST method in sencha extjs rest webservice',
            padding: 10,
            items: [{
                xtype: 'button',
                text: 'Send Data',
                margin: 15,
                style: {
                    background: '#ccc'
                },
                height: 50,
                width: '100%',
                handler: function () {
                    var MyModel = Ext.create('MyModel', {
                        version: "2",
                        code: '',
                        framework: "291",
                        frameworkVersion: "",
                        fiddleid: "",
                        inspector: "",
                        session: ''
                    });
                    MyModel.save({
                        success: function (records, operation) {
                            //When data will save on sever side then response will come in success
                            Ext.Msg.alert('User Save', 'Data saved');
                        },
                        failure: function (records, operation) {
                            //If some error occure on server side the reponse will come in failure function
                            Ext.Msg.alert(`Error ${operation.error.status}`, operation.error.statusText);
                        }
                    });
                }
            }]
        });
    }
});