CODEWITHSUNDEEP
javascriptphpjqueryajax
mohammad eslahi sani
mohammad eslahi sani

Reputation: 674

Ajax not sending info to php

I'm trying to get some information from my php code when clicking on a button, but it doesn't connect to php.

front page is displayed in index.php
index.php:

    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="functions.js"></script>

    <title>Account Panel</title>
    </head>


    <div "getInfos">
    <h2>In this section you can get your inforrmation</h2>
    <button id="getNameBtn">Get Your Name!</button>
    <span id="getNameSpan"> something must come here</span>

    </div>
    </body>
    </html>

javascript codes and ajax are in functions.js:

    $(document).ready(function(){
    $("#getNameBtn").live('click', function() {
    $.ajax({ 
        type: 'POST',
        url: 'handler.php',
        data:JSON.stringify({taskid = 1}),
        headers: {
            'content-type': 'application/json'
        },

        success: function(response) {
            document.getElementById('getNameSpan').innerHTML = response;
        },
        error: function() {
            alert("Error Ajaxing");
        }

        });

   });

and php in serverside is some simple thing like this:

handler.php:

    <?php

    echo('Ajax successful!');

    ?>

Upvotes: 2

Views: 88

Answers (5)

Petter Pettersson
Petter Pettersson

Reputation: 377

In your PHP file that returns JSON you should also set the header to JSON.

header("Content-Type: application/json"); //Above all HTML and returns

And the true answer to your problem has already been answered.

Upvotes: 0

Rutwick Gangurde
Rutwick Gangurde

Reputation: 4922

First important change you need to do, use $.on instead of $.live, since the latter is deprecated. Another thing you should check, if the handler.php file is at the same level as your JS/HTML file. It could be that the file is not reachable from your code. Here is what you can try:

$(document).ready(function(){
    $("#getNameBtn").on('click', function() {
        $.ajax({ 
            type: 'POST',
            url: 'handler.php',
            data: { call: 'myAjax', taskid : 1 },
            headers: {
                'content-type': 'application/json'
            },
            success: function(response) {
                $('#getNameSpan').html(response);
            },
            error: function() {
                alert("Error Ajaxing");
            }
        });
    });
});

And in the PHP file, you can check for the call key:

<?php
    if(isset($_POST) && $_POST['call'] == 'myAjax') {
        echo $_POST['taskid'];
        exit;
    }
?>

That exit is really important.

Upvotes: 0

klawipo
klawipo

Reputation: 153

First of all, you should better use a newer jquery version.

There is at least one error in your Code:

data:JSON.stringify({taskid = 1})

The json should read

{taskid : 1}

Use a colon, not an equal sign. Not sure that it is true for your jQuery version, but usually data can be attached as json object already, so the whole line should work so:

data: {taskid : 1},

And the data is then visible as POST data in the PHP page. Note that the live() function is deprecated since 1.7. You can use 

$("#getNameBtn").click(function(){...});

instead. Moreover, I don't think you need the headers in your request.

Upvotes: 1

Tony Hsieh
Tony Hsieh

Reputation: 163

data:JSON.stringify({taskid = 1}),

shoulde be

data:JSON.stringify({taskid: 1}),

Upvotes: 2

Al Amin Chayan
Al Amin Chayan

Reputation: 2500

You have not close the document ready function:

    $(document).ready(function(){
        $("#getNameBtn").live('click', function() {
            $.ajax({ 
              type: 'POST',
              url: 'handler.php',
              data:JSON.stringify({taskid = 1}),
              headers: {
                'content-type': 'application/json'
              },

              success: function(response) {
                document.getElementById('getNameSpan').innerHTML = response;
              },
              error: function() {
                alert("Error Ajaxing");
              }
            });

       });
});

Upvotes: 3

Related Questions