3

我是 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>

此外，当表单确实从网页提交时，它总是返回错误。不确定我需要从服务器端返回什么才能成功。

4

3 回答 3

0

I do not know if Phonegap just read the index.html file from the first run..

so, move any ajax form submission on form.html to index.html at the bottom of the body tag.

its work for me

于 2013-03-09T23:57:28.023 回答
0

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

于 2012-11-27T04:44:53.827 回答
-1

您不能将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 从跨域请求中接收数据。


此致

于 2012-11-25T00:19:50.803 回答