I want to display json data on monaca

As stated in the title, I would like to display the json data on monaca.

In MANP environment, I was able to successfully reflect MySQL data in html by json_encoding with php.
When I tried it exactly as it was with Monaca, I found that the json data was not being able to pull the json data.
(The php file to be json_encoded has already been uploaded to the server.)

▼ Source Code ▼

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$.ajax({
  type: 'GET',
  url: 'http://○○△△.jp/json.php',
  dataType: 'json',
  success:function(json){
    varlen=json.length;
    for(vari=0;i<len;i++){
      $("#a").append(json[i].id+'+json[i].○○+'+json[i].△△+'<br>');
    }
  }
});
</script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">

December 23, 2015 18:26
Rewriteed the code from your answer

<!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>
        <script src="components/monaca-jquery/jquery.js">/script>
        <link rel="stylesheet" href="components/loader.css">
        <link rel="stylesheet" href="css/style.css">
        <script>
        $.ready('device ready', function(){
            // Ajax communication
            $.ajax({
                type: 'GET',
                url: 'http://○○△△.jp/json.php',
                dataType: 'json',
                success:function(json){
                    varlen=json.length;
                    for(vari=0;i<len;i++){
                              $("#a").append(json[i].id+'+json[i].○○+'<br>');
                    }
                }
                // Add the following to see what kind of error is occurring
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    // Status Code: Most errors are not 200
                    // In this case, other than normal JSON will come here.
                    console.log("XMLHttpRequest:" + XMLHttpRequest.status);
                    // Actual Response
                    // See if the output string is in JSON format
                    console.log("textStatus:" + textStatus);
                    // Why did the error occur?
                    console.log("errorThrown:" + errorThrown.message);
                }
            });
        }, false);
    </script>
</head>
<body>
<divid="a"></div>
</body>

php monaca mysql json

2022-09-30 21:12

1 Answers

The first possible cause is
Please check if the following has been added to the meta in index.html as the connection may not be possible due to WhiteList.

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

Second, there is only success in the callback, so why don't you add error and sort out what's wrong?
The optional dataType specifies json, so an error occurs if PHP WARNING is printed and the json structure is not recognized.
In this case, the above method does not go into success, so I think there will be no response at all.
dataTypeWhy don't you remove it and try to enter success?
(*In that case, JSON.parse cannot encode either.)

additional: 15/12/24
The full text of index.html looks like the following, but
Before loader.js, it runs before loading the monaca function, so I wonder if it's crazy.
Also, you can import jquery from the monaca plug-in (it depends on your preference).…)
I set the event not to use jQuery.How about this one?
Maybe you set it before loading jQuery?

PHP side

<?php
    $outputs=array(
                    array("id"=>"dummy1", "optA"=>"test1-A", "optB"=>"test1-B"),
                    array("id"=>"dummy2", "optA"=>"test2-A", "optB"=>"test2-B"),
                    array("id"=>"dummy3", "optA"=>"test3-A", "optB"=>"test3-B"),
                    array("id"=>"dummy4", "optA"=>"test4-A", "optB"=>"test4-B"),
                    array("id"=>"dummy5", "optA"=>"test5-A", "optB"=>"test5-B"),
                    array("id"=>"dummy6", "optA"=>"test6-A", "optB"=>"test6-B"),
                    array("id"=>"dummy7", "optA"=>"test7-A", "optB"=>"test7-B"),
                    array("id"=>"dummy8", "optA"=>"test8-A", "optB"=>"test8-B"),
                    array("id"=>"dummy9", "optA"=>"test9-A", "optB"=>"test9-B"),
                    array("id"=>"dummy10", "optA"=>"test10-A", "optB"=>"test10-B")
                );
    echo json_encode($outputs);
?>

Monaca side

<!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(){
                $("#a").append('on device ready.<br>');
                // Ajax communication
                $.ajax({
                    type: 'GET',
                    url: 'http://host_name/json.php',
                    dataType: 'json',
                    success:function(json){
                        varlen=json.length;
                        for(vari=0;i<len;i++){
                            $("#a").append(JSON.stringify(json[i])+'<br>');
                        }
                    },
                    // Add the following to see what kind of error is occurring
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        // Status Code: Most errors are not 200
                        // In this case, other than normal JSON will come here.
                        $("#a").append("XMLHttpRequest:" + XMLHttpRequest.status);
                        // Actual Response
                        // See if the output string is in JSON format
                        $("#a").append("textStatus:"+textStatus);
                        // Why did the error occur?
                        $("#a").append("errorThrown:"+errorThrown.message);
                    }
                });
            }, false);
        </script>
    </head>
    <body>
    <divid="a"></div>
    </body>
</html>

Even if

2022-09-30 21:12

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