Question

我是移动应用程序开发的新手。我正在尝试从phonegap到只有一个php文件的远程服务器发出简单的ajax请求。我在localhost上测试过它可以工作，但是当我点击按钮时，在应用程序中没有任何反应。

的index.html

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Ajax Example with JSON Response</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="cordova.js" type="text/javascript"></script>
    <script src="js/index.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(':submit').on('click', function () { // This event fires when a button is clicked
                var button = $(this).val();
                $.ajax({ // ajax call starts
                    url: 'http://bgg.comxa.com/test.php', // JQuery loads serverside.php
                    data: 'button=' + $(this).val(), // Send value of the clicked button

                    dataType: 'json', // Choosing a JSON datatype
                    success: function (data) // Variable data contains the data we get from serverside
                    {
                        $('#wines').html(''); // Clear #wines div

                        if (button == 'all') { // If clicked buttons value is all, we post every wine
                            for (var i in data.red) {
                                $('#wines').append('Red wine: ' + data.red[i] + '<br/>');
                            }
                            for (var i in data.white) {
                                $('#wines').append('White wine: ' + data.white[i] + '<br/>');
                            }
                        }
                        else if (button == 'red') { // If clicked buttons value is red, we post only red wines
                            for (var i in data) {
                                $('#wines').append('Red wine: ' + data[i] + '<br/>');
                            }
                        }
                        else if (button == 'white') { // If clicked buttons value is white, we post only white wines
                            for (var i in data) {
                                $('#wines').append('White wine: ' + data[i] + '<br/>');
                            }
                        }
                    }
                });
                return false; // keeps the page from not refreshing
            });
        });
    </script>
    <!-- Write Javascript code here -->

</head>

<body>
    <form method="post" action="">
        <button value="all" type="submit">Get All Wines!</button>
        <button value="red" type="submit">Get Red Wines!</button>
        <button value="white" type="submit">Get White Wines!</button>
    </form>

    <div id="wines">
        <!-- Javascript will print data in here when we have finished the page -->
    </div>

</body>
</html>

远程php文件： test.php的

<?php
//header('Access-Control-Allow-Origin: *');
//header('Content-Type: application/json');
//header('Access-Control-Allow-Methods: GET, POST');
// Get value of clicked button
$button = $_GET['button'];

// Red wine table
$red = array('Chianti', 'Barolo', 'Pinot Noir');
$white = array('Chardonnay', 'Cava', 'Chablis');

// Combine red and white tables into one multidimensional table
$winetable = array(
      "red" => $red,
      "white" => $white,
);

// Finally depending on the button value, JSON encode our winetable and print it
if ($button == "red") {
  print json_encode($red);
}
else if ($button == "white") {
  print json_encode($white);
}
else {
  print json_encode($winetable);
}

?>

Answer 1

json只允许相同的域名交互，如果您更改为以下JSONP，那么它可以解决安全问题。

dataType: 'jsonp'

你可以尝试一下，让我们知道它是否仍然不起作用？

来自phonegap应用程序的跨域ajax调用

1 个答案: