How to communicate ajax via jQuery in Cordova 5.0

I am creating an app with monaca.

In Cordova 4.2 environment, we used $.ajax of jQuery to communicate and retrieve json data placed in external domain, but after updating with monaca, we were unable to communicate and retrieve it.

Perhaps the whitelist plug-in added from Cordova 5.0 has blocked ajax communication to the external domain, but I can't consider how to deal with it.(Do I need to specify the appropriate value for Content-Security-Policy as a meta tag?)

Current statements are as follows:

varjsonObject;
var url = URL up to json data in external domain;
    $.ajax({
        type: "GET",
        url: url + "data.json",
        data: {"data":"data"},
        dataType: "json",
        async —false,
        success:function(data){
            jsonObject=data;
        }
    });

If anyone knows, please take care of me.

11/26 15:44 As I am a new user, I cannot add comments, so I will use the postscript in my reply.
Thank you very much for your kindness, but it still didn't work.
For your information, the following is the content of errorThrown:

NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'json data URL'.

monaca cordova

2022-09-30 10:29

1 Answers

Try the HTML META tag as shown below.

<meta http-equiv="Content-Security-Policy" content="default-src*;style-src*'unsafe-inline';script-src*'unsafe-inline' 'unsafe-eval'>

This is the relationship of WhitelistPlugin when it became Cordova 5.
See this blog.

add
In my environment, I have confirmed that Ajax communication is possible with the code below.

<!DOCTYPE HTML>
<html>
    <head>
        <metacharset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scale=no">
        <meta http-equiv="Content-Security-Policy" content="default-src*;style-src*'unsafe-inline';script-src*'unsafe-inline' 'unsafe-eval'>
        <script src="components/loader.js"></script>
        <link rel="stylesheet" href="components/loader.css">
        <link rel="stylesheet" href="css/style.css">
        <script>
            document.addEventListener('device ready', function(){
                // Ajax communication
                $.ajax({
                    type: 'post',
                    url: 'http://domain/ajax',
                    success:function(data,dataType){
                        $("body").html("success");
                        $("body").html(data);
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        $("body").html("error");
                        $("body").html(XMLHttpRequest);
                    }
                });
            }, false);
        </script>
    </head>
    <body>
    </body>
</html>

It's an updated project, so

Cordova Plug-in
　MonacaPlugin:v2.0.0
JS/CSS components
　Monaca Core Utility:Ver=2.0.4

Please check the above version.

2022-09-30 10:29

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656