Question

我是Phonegap和jQuery的新手，但研究过如何通过jQuery ajax提交表单。此代码在网页中工作，但在由Phonegap构建和安装时在android模拟器中失败。如您所见，我已设置$.mobile.allowCrossDomainPages = true;。当我在模拟器中对此进行测试时，屏幕会闪烁几次，表单会被清除，就像重新加载页面一样，并且没有任何内容写入服务器。

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>
    </title>
    <link rel="stylesheet" href="css/jquery.mobile-1.2.0.css" />
    <link rel="stylesheet" href="enter.css" />
    <style>
        /* App custom styles */
    </style>

    <script>
        $( document ).bind( "mobileinit", function() {
          // Make your jQuery Mobile framework configuration changes here!

          $.mobile.allowCrossDomainPages = true;
        });

        function doform()
        {

            var datas = $("#enteractivity").serialize();
            $.ajax({

              url: "http://www.scottallencarter.com/llp/record.logactivity",
              data: datas,
              async: false,
              cache: false,
              dataType: 'text',
              type: 'POST',
              jsonp: 'jsoncallback',
              timeout: 120000,
              crossDomain: true,
              error: function (xhr, ajaxOptions, thrownError) {
                    alert('error');

                },
              success: function(msg){ 
                    alert('done success');
                    return true;
                }
            });


        }
    </script>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/jquery.mobile-1.2.0.min.js"></script>
    <script src="enter.js"></script>
</head>
<body>
    <!-- Home -->
    <div data-role="page" data-theme="a" id="page1">
        <div data-theme="c" data-role="header">
            <h3>
                Activity
            </h3>
        </div>
        <div data-role="content">
            <form id="enteractivity" name="enteractivity" onsubmit="doform()">
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup">
                        <label for="activityspecifics">
                            Activity
                        </label>
                        <input name="activityspecifics" id="activityspecifics" placeholder="Enter Activity" value="" type="text" />
                    </fieldset>
                </div>
                <div data-role="fieldcontain">
                    <label for="category">
                        Category:
                    </label>
                    <select name="category" data-theme="c">
                        <option value="">(choose one)</option>
                        ...
                        <option value="Test">Test</option>
                    </select>
                </div>
                <div data-role="fieldcontain">
                    <label for="activityInCategory">
                        Specific Category:
                    </label>
                    <select name="activityInCategory" data-theme="c">
                        <option value="AddSubCategory">+ Add New Specific Category</option>
                        <option value="">------------</option>
                        ...
                    </select>

                </div>
                <input type="hidden" name="userid" value="1-1-1-1-1">
                <input type="hidden" name="mobile" value="true">
                <input type="submit" data-inline="true" data-theme="b" data-icon="arrow-r" data-iconpos="left" value="Submit" />
            </form>
        </div>
    </div>
</body>

当表单从网页提交时，它总是返回错误。不确定我需要从服务器端返回以获得成功。

Answer 1

好的，发现了这个问题。这实际上是对jquery mobile如何工作的误解。带有表单的页面是从另一个页面链接的，默认的jquery移动行为是通过ajax加载页面并忽略head部分。提交表单的脚本位于head标签中。将ajax表单提交的脚本移动到页面中body标签的底部修复了问题。感谢您的帮助，我希望这有助于其他人。

Answer 2

我不知道Phonegap是否只是从第一次运行中读取index.html文件..

所以，将ajax上的任何form.html表单提交移至正文标记底部的index.html。

它为我工作

Answer 3

您不能将 POST 与 JSONP 混合使用。 JSONP 正在使用 GET 但是，服务器必须支持 JSONP 。看看你的例子，情况已经是这样了。

试试这个：
这是一个工作示例，我正在使用：

$.ajax({
    url: 'http://www.yoursite.com',
    contentType: "application/json; charset=utf-8",
    data: datas,
    dataType: "jsonp",
    success: function (json) {
        // Do some stuff
    },
    error: function (data, textStatus) {
        // Error handling
    }
});

修改
仅供参考，如果您通过 POST 发送跨域数据，您将始终收到错误，因为浏览器会丢弃响应（尽管它存在）。
您可以创建一个本地html页面（使用您的示例代码）并使用您的浏览器打开它然后使用 fiddler 和 firebug 检查流量。
AFAIK，您只能通过 JSONP 从跨域请求接收数据。

致以诚挚的问候

Phonegap jquery ajax表单提交无效

3 个答案: