CODEWITHSUNDEEP
phpajax
Deniz Zoeteman
Deniz Zoeteman

Reputation: 10111

Do php query with ajax

I'd like to do a sql query with ajax so I don't need to reload the page / load a new page.

So basicly I need to call a php page with ajax. And it would be great if there could be a way to reload a count of amount of rows in a table too.

Edit: to make it more clear, it should be able to do something along the lines of when you click the Like button on Facebook.

Thanks

Upvotes: 2

Views: 3785

Answers (10)

Roshan Wijesena
Roshan Wijesena

Reputation: 3136

function onClick(){
     $.post(
        "path/to/file", //Ajax file ajax_file.php        
        { value : value ,insiId : insiId  },  // parameters if you want send        
        //function that is called when server returns a value.
        function(data){
            if(data){
                $("#row_"+data.id).show();     //display div rows               
            }
        },"json"   
    );
}
<div id="myDiv">here are your contents</div>
<button type="button" onclick="onClick()">Change Content</button>

Here the ajax code that you can call to the server side php file and get the out put and do what you want

Upvotes: 2

Irfan
Irfan

Reputation: 7059

HTML:

//result div will display result
<div id="result"></div>
<input type="button" onclick="getcount();" value="Get Count"/>

JS:

//will make an ajax call to ustom_ajax.php
function getcount()
{

    $.ajax({
        type:"get",
        url : "custom_ajax.php",
        beforeSend: function() {        
                // add the spinner 

                $('<div></div>')
                  .attr('class', 'spinner')
                  .hide()
                  .appendTo("#result")
                  .fadeTo('slow', 0.6);
              },
        success : function (data) {             
        $("#result").html(data);
        },
        complete: function() {        
                // remove the spinner 
                $('.spinner').fadeOut('slow', function() {
                  $(this).remove();
                });
        }
    });
}

custom_ajax.php:

 //will perform server side function
//make a connection and then query 
$query_txt = "SELECT count(*) FROM table "; 
$result= mysql_query($query_txt) or die(mysql_error()); 
$total=mysql_num_rows($result) ;
$html= "Total result is $total";    
echo $html; exit();

Upvotes: 0

jbrond
jbrond

Reputation: 727

Possible solution: Ajax calls PHP scripts which make the query and return the new number

$.ajax({
    async:true,
    type:GET,
    url:'<PHP_FILE>',
    cache:false,
    data:'<GET_PARAMETERS_SENT_TO_PHP_FILE>',
    dataType:'json',
    success: function(data){
        $('<#HTML_TARGET>').html(data);
    },      
    error: function(jqXHR, textStatus, errorThrown){
        $('<#HTML_TARGET>').html('<div class="ajax_error">'+errorThrown+'</div>');
    }
});

Where

  • <PHP_FILE> is your php script which output must be encoded according to dataType. The available types (and the result passed as the first argument to your success callback) are: "xml", "html", "script", "json", "jsonp", "text".
  • <GET_PARAMETER_SENT_TO_PHP> is a comma separate list of value sent via GET (es. 'mode=ajax&mykey=myval')
  • <#HTML_TARGET> is the jquery selector

See jquery.ajax for more details.

For example:

<p>Votes:<span id="count_votes"></span></p> 
<script type="text/javascript">
    $.ajax({
        async:true,
        type:GET,
        url:'votes.php',
        cache:false,
        dataType:'text',
        data:'id=4'
        success: function(data){
            $('#count_votes').html(data);
        },      
        error: function(jqXHR, textStatus, errorThrown){
            $('#count_votes').html(errorThrown);
        }
    });
</script>

Upvotes: 1

romaninsh
romaninsh

Reputation: 10664

"Facebook Like" button in Agile Toolkit (PHP UI Library):

$likes = get_like_count();

$view = $this->add('View');
$button = $view->add('Button')->setLabel('Like');
$view->add('Text')->set($likes);

if($button->isClicked()){
    increate_like_count();
    $view->js()->reload()->execute();
}

p.s. no additional JS or HTML code needed.

Upvotes: 2

kf0l
kf0l

Reputation: 73

Here is an example which uses a favorite jQuery plugin of mine, jQuery.tmpl(), and also the jQuery .text() function.

HTML and Javascript Code:

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
</head>
<body>

<script id="UserTemplate" type="text/x-jquery-tmpl"> 
    <li><b>Username: ${name}</b> Group ID: (${group_id})</li>
</script>


<button id="facebookBtn">Facebook Button</button>
<div id="UserCount"></div>
<ul id="userList"></ul>

<script>
function getData(group_id) {
    $.ajax({
        dataType: "json",
        url: "test.php?group_id=" + group_id,
        success: function( data ) {

            var users = data.users;

            /* Remove current set of movie template items */
            $( "#userList" ).empty();

            /* Render the template with the movies data and insert
               the rendered HTML under the "movieList" element */
            $( "#UserTemplate" ).tmpl( users )
                .appendTo( "#userList" );

            $( "#UserCount" ).text('Number of users: '+ data.count);

        }
    });
}

$( "#facebookBtn" ).click( function() {
    getData("1");
});

</script>

</body>
</html>

PHP Code

<?php
//Perform a query using the data passed via ajax
$group_id = $_GET['group_id'];
$user_array = array(
  array('name'=>'John','group_id'=>'1',),
  array('name'=>'Bob','group_id'=>'1',),
  array('name'=>'Dan','group_id'=>'1',),
);
$user_count = count($user_array);
echo json_encode(array('count'=>$user_count,'users'=>$user_array));

Upvotes: 0

Shalom Sam
Shalom Sam

Reputation: 1559

If your looking for something like the facebook like btn. Then your PHP code should look something like this - 

<?php

$topic_no = $_POST['topic'];

$topic_likes = update_Like_count($topic_no);

echo $topic_likes;

function update_Like_count($topic)
{
    //update database by incrementing the likes by one and get new value

    return $count;
}
?>

and the javascript/jquery ajax should be something like so - 

<script>

      $('#like-btn').click( function () {

             $.post(

            "like.php",

            { topic : value },

            function(data)
            {
                if(data)
                {
                    $("#like-btn span").append(data);     //or append it to wherever you'd like to show it              
                }
                else
                {
                    echo "error";
                }
            },
            "json"
        );
        });


</script>

Upvotes: 0

Falk S.
Falk S.

Reputation: 142

You are wrong, who says that he is submitting the whole query who is telling that he is not filtering? U can do all this easy with the jquery load function, you load a php file like that $('#BOX').load('urfile.php?param=...');.

Have fun, i hope that was a little helpful for you, sry bcs of my bad english.

Upvotes: 1

genesis
genesis

Reputation: 50976

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
     xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("your_div").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","ajax_file.php",true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv">here are your contents</div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>
</html>

Upvotes: 6

CodeCaster
CodeCaster

Reputation: 151594

You don't want to query using ajax, you want to get new data using ajax, which is a fundamental difference.

You should just, using ajax, request a php page with perhaps some parameters, which in turn executes the query and returns the data in a format you can handle (most likely: json).

If you allow queries to be executed using ajax, how are you going to prevent a malicious user from sending drop table users, instead of select * from news where id = 123?

Upvotes: 3

Steve&#39;s a D
Steve&#39;s a D

Reputation: 3821

You won't do a sql query with ajax, what you need to do is call an external php page (one where your query is) in the background using ajax. Here is a link that explains how to do it with jquery: http://api.jquery.com/jQuery.ajax/

Upvotes: 2

Related Questions