ajax post with PHP

Question

why isn't this working?

jQuery AJAX Code:

$("header input").bind("keyup", function()
{
    var searchString= $("header input").val();
    var dataString = 'search=' + searchString;
    alert(dataString);
    $.ajax({
        type: "POST",
        url: "index.php",
        data: dataString,
        cache: false
    });
});

PHP Code(Just a test Code):

if($_POST["search"]) {
    echo "TEST MESSAGE!";
}

It doesn't show The echo :/

thanks for ur help ;)

Is an `echo` statement shown before the if statement? Can you post the whole php method? — magic_al, Jun 20 '14 at 09:17
You don't have a callback? so it doesn't show. it only posts the message and thats it — EaterOfCode, Jun 20 '14 at 09:18
It doesn't echo anywhere. You will get only response from the server. — Ranjith, Jun 20 '14 at 09:20
[See This](http://stackoverflow.com/questions/23791638/passing-javascript-string-into-php-string/23791777#23791777) its a dulicate. — biswajitGhosh, Jun 20 '14 at 09:20
http://s14.directupload.net/images/140620/nkazv44j.png http://s7.directupload.net/images/140620/485fykpk.png Thats my problem... it shows me the page twice if i enter a word to search :O — user3759502, Jun 20 '14 at 09:30

score 1 · Answer 1 · answered Jun 20 '14 at 09:19

1

You need to display the data you receive from the ajax call. Example, to put the result into a <div> called YourresultDiv:

Try with this

$("header input").on("keyup", function () {
    var searchString = $("header input").val();
    var dataString = 'search=' + searchString;
    alert(dataString);
    $.ajax({
        type: "POST",
        url: "index.php",
        data: dataString,
        cache: false,
        success: function (data) {
            $('#YourresultDiv').html(data);
            alert("Successful");
        }
    });
});

answered Jun 20 '14 at 09:19

Sridhar R

20,190
6
38
35

Yes, thanks that worked... I just forgot the succes method and i appended a div
//and thats the succes method i forgot success: function (data) { $('#resultDiv').html(data); } but now if i write something in my input field, it shows me the whole page again?! ^^ if you want i can upload a screenshot? thx for the fast answers :) – user3759502 Jun 20 '14 at 09:28
Here are the screens: s14.directupload.net/images/140620/nkazv44j.png s7.directupload.net/images/140620/485fykpk.png – user3759502 Jun 20 '14 at 09:35

score 1 · Answer 2 · answered Jun 20 '14 at 09:22

Hopes this will help you....

$("header input").bind("keyup", function()
{
    var searchString= $("header input").val();
    var dataString = 'search=' + searchString;
    alert(dataString);
    $.ajax({
        type: "POST",
        url: "index.php",
        data: dataString,
        cache: false,
        async: false
    },success: function (data) {


     $('div#posteddata').append(data);

    }

);
});


<html>
<head>

</head>

<body>

<div id="posteddata"></div>

</body>

</html>

score 0 · Answer 3 · answered Jun 20 '14 at 09:21

You need to specify an element you want to update.. for example

<div id="result"> </div>

and then append a success event handler to your ajax call

        $("header input").bind("keyup", function () {
            var searchString = $("header input").val();
            var dataString = 'search=' + searchString;
            alert(dataString);
            $.ajax({
                type: "POST",
                url: "index.php",
                data: dataString,
                cache: false
            }).success(function (data) {
                $("#result").html(data);
            }).fail(function () {
                alert("Ajax failed!");
            });
        });

score 0 · Answer 4 · answered Jun 20 '14 at 09:21

0

Try with this

In js add

success: function (data) {
        // success handler
    }

as your response handler

if($_POST["data"]) {
  // search = search string available here  in $_POST['data']
  echo "TEST MESSAGE!";
}

answered Jun 20 '14 at 09:21

biswajitGhosh

147
1
2
17

score 0 · Answer 5 · answered Jun 20 '14 at 09:32

where is your call back function in $.ajax() function,with callback function only,you can display anything through an ajax request..

So try this.

$("header input").on("keyup", function () {
    var searchString = $("header input").val();
    var dataString = 'search=' + searchString;
    alert(dataString);
    $.ajax({
        type: "POST",
        url: "index.php",
        data: dataString,
        cache: false,
        success: function (data) {
            $('#Yourdiv').html(data);  // or $('#Yourdiv')text(data);
        }
    });
});

Without success function,you can see the echoed statement in your network segment in console.

for that, press F12,then you will get a link like XHR finished loading: POST "http://localhost/yourproject/func_name.Click on that link and you will goto network segment and from there,click on the function name and then in response or preview tab,you canb see the echoed statement.. try it.

ajax post with PHP

5 Answers5