Getting data from jQuery ajax

Question

I am trying to make an AJAX filter for car list and I got stuck in the last stage. I have two files, index.php and filter.php.

In index.php I have form with drop-down lists and sliders. Code for sending the form is as follows:

$(document).ready(function(){
        $("#send").click(function(){

            var salon=$("#salon-list").val();
            var make=$("#make-list").val();
            var model=$("#model-list").val();
            var cenaLow=$("#cenaLow").val();
            var cenaHigh=$("#cenaHigh").val();
            var tachometrLow=$("#tachometrLow").val();
            var tachometrHigh=$("#tachometrHigh").val();
            var palivo=$("#palivo-list").val();
            var karoserie=$("#karoserie-list").val();
            var prevodovka=$("#prevodovka-list").val();
            var pohon=$("#pohon-list").val();
            var barva=$("#barva-list").val();
            var dvere=$("#dvere-list").val();
            var objem=$("#objem-list").val();
            var stav=$("#stav-list").val();


            $.ajax({
                type:"post",
                url:"filter.php",
                data:"salon="+salon+"&make="+make+"&model="+model+"&cenaLow="+cenaLow+"&cenaHigh="+cenaHigh
                +"&tachometrLow="+tachometrLow+"&tachometrHigh="+tachometrHigh+"&palivo="+palivo+"&karoserie" +
                "="+karoserie+"&prevodovka="+prevodovka+"&pohon="+pohon+"&barva="+barva+"&dveře="+dvere+"&objem" +
                "="+objem+"&stav="+stav,
                success:function(data){
                    $("#result").html(data);
                }

            });

        });
    });

In the filter.php file I get the data from $_POST and then I search through database. After that I want to echo results into #result div but it does not work. Any echo statement doesn't work, variables I want to list aren't empty, I checked.

echo 'iAmHere'; /*just checking*/

$post["salon"] = htmlspecialchars($_POST["salon"]);
$post["make"] = htmlspecialchars($_POST["make"]);
$post["model"] = htmlspecialchars($_POST["model"]);
$post["cenaLow"] = htmlspecialchars($_POST["cenaLow"]);
$post["cenaHigh"] = htmlspecialchars($_POST["cenaHigh"]);
$post["rokLow"] = htmlspecialchars($_POST["rokLow"]);
$post["rokHigh"] = htmlspecialchars($_POST["rokHigh"]);
$post["tachometrLow"] = htmlspecialchars($_POST["tachometrLow"]);
$post["tachometrHigh"] = htmlspecialchars($_POST["tachometrHigh"]);
$post["palivo"] = htmlspecialchars($_POST["palivo"]);
$post["karoserie"] = htmlspecialchars($_POST["karoserie"]);
$post["prevodovka"] = htmlspecialchars($_POST["prevodovka"]);
$post["pohon"] = htmlspecialchars($_POST["pohon"]);
$post["barva"] = htmlspecialchars($_POST["barva"]);
$post["dvere"] = htmlspecialchars($_POST["dvere"]);
$post["objem"] = htmlspecialchars($_POST["objem"]);
$post["stav"] = htmlspecialchars($_POST["stav"]);

echo '<p class="make">'.$post["make"].'</p>'; /*does not work*/


echo "<script>window.alert('".$_POST["make"]."');</script>";  /*another checking, this works*/

Thanks for any help.

Please include the code you're using to respond to the AJAX call server side. — Daniel Waghorn, Aug 18 '15 at 08:27
No error in console. Output of print_r($_POST) is: Array ( [salon] => 0 [make] => 149 [model] => [cenaLow] => 50000 [cenaHigh] => 300000 [rokLow] => 1998 [rokHigh] => 2009 [tachometrLow] => 40000 [tachometrHigh] => 210000 [palivo] => [karoserie] => [prevodovka] => [pohon] => [barva] => [dvere] => [objem] => [stav] => [send] => Odeslat ) (it doesn't list print_r neither, I had to use it as form action to get it) — sc4ttys, Aug 18 '15 at 08:36
Could you please add `error` callback to your `$.ajax` to check if there are any errors occuring during ajax request? `error : function() { console.log('ajax request failed!'); }` — mario.van.zadel, Aug 18 '15 at 09:02
1) use object as ajax data-property value instead raw text. Its more readable 2) add error callback as suggested above, also debug data with console.log(data) in success callback too 3) Look into browser network-debugging panel to see data was sent and received. So you can understand what you did wrong. 4) Use JSON-data instead raw html. — Panoptik, Aug 18 '15 at 09:06

score 0 · Answer 1 · edited May 23 '17 at 12:29

From here:

JavaScript inserted as DOM text will not execute.

And this says:

You have to use eval() to execute any script code that you've inserted as DOM text.

So you can try an alternate approach to test your code (though I've not tested).

In filter.php:

<?php
$post["salon"] = htmlspecialchars($_POST["salon"]);
$post["make"] = htmlspecialchars($_POST["make"]);
$post["model"] = htmlspecialchars($_POST["model"]);
$post["cenaLow"] = htmlspecialchars($_POST["cenaLow"]);
$post["cenaHigh"] = htmlspecialchars($_POST["cenaHigh"]);
$post["rokLow"] = htmlspecialchars($_POST["rokLow"]);
$post["rokHigh"] = htmlspecialchars($_POST["rokHigh"]);
$post["tachometrLow"] = htmlspecialchars($_POST["tachometrLow"]);
$post["tachometrHigh"] = htmlspecialchars($_POST["tachometrHigh"]);
$post["palivo"] = htmlspecialchars($_POST["palivo"]);
$post["karoserie"] = htmlspecialchars($_POST["karoserie"]);
$post["prevodovka"] = htmlspecialchars($_POST["prevodovka"]);
$post["pohon"] = htmlspecialchars($_POST["pohon"]);
$post["barva"] = htmlspecialchars($_POST["barva"]);
$post["dvere"] = htmlspecialchars($_POST["dvere"]);
$post["objem"] = htmlspecialchars($_POST["objem"]);
$post["stav"] = htmlspecialchars($_POST["stav"]);

echo $post["make"];

In index.php:

$.ajax({
    ...
    success:function(res){
       $("#result").html(res);
       alert(res);
    }
});

score 0 · Accepted Answer · answered Aug 18 '15 at 12:14

Try this :

$(document).ready(function(){
        $("#send").click(function(){
 var salon=$("#salon-list").val();
            var make=$("#make-list").val();
            var model=$("#model-list").val();
            var cenaLow=$("#cenaLow").val();
            var cenaHigh=$("#cenaHigh").val();
            var tachometrLow=$("#tachometrLow").val();
            var tachometrHigh=$("#tachometrHigh").val();
            var palivo=$("#palivo-list").val();
            var karoserie=$("#karoserie-list").val();
            var prevodovka=$("#prevodovka-list").val();
            var pohon=$("#pohon-list").val();
            var barva=$("#barva-list").val();
            var dvere=$("#dvere-list").val();
            var objem=$("#objem-list").val();
            var stav=$("#stav-list").val();

 var data= {
            make: make,
            model: model,
            cenaLow: cenaLow,
            cenaHigh: cenaHigh,
            tachometrLow: tachometrLow,
            tachometrHigh: tachometrHigh,
            palivo: palivo,
            karoserie: karoserie,
            prevodovka: prevodovka,
            pohon: pohon,
            barva: barva,
            objem: objem,
            stav : stav
        };


            $.ajax({
                type:"post",
                url:"filter.php",
                data:data,
                success:function(data){
                    $("#result").html(data);
                }

            });

        });
    });

score 0 · Answer 3 · answered Aug 18 '15 at 12:22

Try this:

die('<p class="make">'.$post["make"].'</p>');

or

echo '<p class="make">'.$post["make"].'</p>';exit;

instead of

echo '<p class="make">'.$post["make"].'</p>'; /*does not work*/


echo "<script>window.alert('".$_POST["make"]."');</script>";  /*another checking, this works*/

It does not work without an exit. I do not know why but it should do the trick. Also, your code has a lot of room for improvement. Do keep looking for better ways to enhance your skills!! Enjoy!!

Getting data from jQuery ajax

3 Answers3