如何在Sencha Touch 2中使用JsonP提交表单?

时间:2012-05-14 04:41:01

标签: forms sencha-touch jsonp extjs sencha-touch-2

我正在使用Sencha Touch 2编写应用程序,从Web访问时它可以正常工作。当我为iPhone构建它并将URL从本地URL(../ services / myservice.php)更改为远程URL(http://remoteurl.com/services/myservice.php)时出现问题

我开始收到跨域错误:

**XMLHttpRequest cannot load http://example.com/services/userRegister.php?_dc=1336972603884. Origin http://localhost is not allowed by Access-Control-Allow-Origin.**

我想问你是否有办法使用jsonp提交表单,所以我不再有这个问题了。

以下是表单的代码:

Ext.define('RegistroMovil.view.Register',{
extend: 'Ext.form.Panel',
xtype: 'register',
requires:[
    'Ext.form.FieldSet',
    'Ext.form.Email'
],
config: {
    title: 'Register',
    iconCls: 'user',
    url: 'http://example.com/proys/congreso/services/userRegister.php',
    items: [
    ...

提交表单的按钮代码:

{
            xtype: 'button',
            text: 'Register',
            handler: function(){
                this.up('register').submit({
                    success: function(f, a){
                        alert('Your id: ' + a.id);
                        f.reset();
                    }
                });
            }
        },

非常感谢!

1 个答案:

答案 0 :(得分:1)

由于cross-origin resource sharing政策,您收到了上述错误。

tap按钮的submit事件处理程序中,您可以使用Ext.Ajax.request();,但我觉得您也会遇到同样的错误。

E.g

Ext.Ajax.request({
  values : paramValues // values from form fields..
  url: '.../test.php',

  success: function(response) {
    console.log(response.responseText);
  }

  failure: function(response) {
    console.log(response.responseText);
  }
});

因此,最好写一个Ext.util.JSONP.request()来处理表单submit

  

请注意,如果要从域中的页面检索数据   这与正在运行的页面的原始域不同,   你必须使用这个类,因为相同的原始政策。

E.g

Ext.util.JSONP.request({
      params: paramValues // values from form fields..
      url: '.../test.php',
      callbackKey: 'callback',
      scope: 'this',
      success: function(response) {
        console.log(response.responseText);
      }

      failure: function(response) {
        console.log(response.responseText);
      }
});