How to fetch data from MySQL server when using Jquery or Javascript



  • I have a website with MySQL server. I am building app using Onsen UI & Monaca. I want to fetch data from my MySQL server to show in app. How can I achieve this.

    Is it possible to make request to server from app as it is not hosted on same server.

    Please guide. Code example will really be great help.



  • Clearly you are lacking basic knowledge of coding…

    I’d suggest you to view some basic tutorials on how to use AJAX and jsonp with PHP.

    Or simply hire someone to do it for you.

    Here is a basic code:

        var poutput = $('.listHolder');
    
        $.ajax({
        url: 'https://domain.com/page.php',
            dataType: 'jsonp',
            jsonp: 'jsoncallback',
            timeout: 5000,
            success: function(data, status){    
                $.each(data, function(pi,item){ 
                str = item.name;    
                    var products = '<div id="'+item.id+'" class="items">'+
                                   '<p class="names">'+item.name+'</p>'+
                                   '</div>';
                    
                    poutput.append(products);
                      
    });
    
    
    },
    
            error: function(){
                //alert('There was an error loading the data.');
            }
            
    
    });
    

    You would also need to use the JSON encode and decode in your PHP file…

    Happy coding



  • Thank you for your help.
    You pointed out correctly, I am not a developer, many things I implement through community help and experimenting with code.

    I will go through tutorials suggested by you & then will try to implement with your code.

    Thanks again.



  • I wonder why someone downvoted a perfectly valid answer!?



  • Hello

    I am trying to use JSONP in my app using online Monaca ide, but I do not get success. Here is my code

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta http-equiv="Content-Security-Policy" content="default-src * data:; 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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
        <script>
            // PhoneGap event handler
            document.addEventListener("deviceready", onDeviceReady, false);
            function onDeviceReady() {
                console.log("PhoneGap is ready");
              }
            
            function test()
            {               
               alert("Test");
               $.ajax({
                    url: 'http://test.com/test/test.php',
                    data: {name: 'Chad'},
                    dataType: 'jsonp',
                    jsonp: 'callback',
                    jsonpCallback: 'jsonpCallback',
                    success: function(){
                        alert("success");
                    }
                });            
            }
            
            function jsonpCallback(data){
            alert("I am in callback");
        }
        </script>
    </head>
    <body>
    
        <h1>Welcome to Monaca!</h1>
         <a class="button--large" onclick="test()">Start Demo</a>
        <input type="button" onclick="test()" id="useJSONP" value="Use JSONP"></input><br /><br />
        <span id="jsonpResult"></span>
    
    </body>
    </html>
    

    When I use same code with local HTML file, it works, here is my code

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <title>JQuery JSONP</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
        <script>
        $(document).ready(function(){
     
            $("#useJSONP").click(function(){
                $.ajax({
                    url: 'http://test/test/test.php',
                    data: {name: 'Chad'},
                    dataType: 'jsonp',
                    jsonp: 'callback',
                    jsonpCallback: 'jsonpCallback',
                    success: function(){
                        alert("success");
                    }
                });
            });
     
        });
         
        function jsonpCallback(data){
            $('#jsonpResult').text(data.message);
        }
        </script>
      </head> 
      
      <body>
        <input type="button" id="useJSONP" value="Use JSONP"></input><br /><br />
        <span id="jsonpResult"></span>
      </body>
    </html>
    

    PHP code

    <?php
        header("content-type: text/javascript"); 
     
        if(isset($_GET['name']) && isset($_GET['callback']))
        {
            $obj->name = $_GET['name'];
            $obj->message = "Hello " . $obj->name;
             
            echo $_GET['callback']. '(' . json_encode($obj) . ');';
        }
    ?>
    

    You will find javascript & PHP code from below link
    http://www.giantflyingsaucer.com/blog/?p=2682

    Please help to solve the problem



  • Ok, It is working. The problem was. My site is http and Monaca platform is with https so there was mixed content error.

    When I run it on my device, it is working.


Log in to reply