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

Posted 2023-03-03

【中文标题】如何在 Sencha Touch 2 中使用 JsonP 提交表单？

【英文标题】：How to submit a form using JsonP in Sencha Touch 2?

【发布时间】：2012-05-21 14:20:56

【问题描述】：

我正在使用 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】：

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

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

例如

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 的表单。

请注意，如果您从域中的页面检索数据 这与运行页面的原始域不同， 你必须使用这个类，因为同源策略。

例如

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);
      
);