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

Shivraj Sawant

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.

Roozbeh Farhadi

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

Shivraj Sawant

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.

Roozbeh Farhadi

I wonder why someone downvoted a perfectly valid answer!?

Shivraj Sawant

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

Shivraj Sawant

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.

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

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