CODEWITHSUNDEEP
javascriptphpjqueryajaxjson
art
art

Reputation: 313

show php json data into jquery ajax

I'm very new in this topic.I have a Json result something like this :

{
    "span": " 1",
    "numcard": "12",
    "chan": " Yes",        
    "idle": "Yes",
    "level": "idle ",
    "call": "No ",
    "name": ""
}

How can I show all the json data using a ajax .I currently have this code written up and although i am getting the data its not quite working the way i want it to be.

$("a[name=cardNo1]").click(function() {
    var cardNo1 = $(this).attr("id");
    $("a[name=cardNo1]").each(function() {
        cardNo1 += "";
    });

    var dataString = "action=spanchan" + "&cardNo=" + cardNo1;
    $.ajax({
        type: "POST",
        url: "dahdiprocess.php?",
        data: dataString,
        dataType: 'json',
        success: function(data, status) {
            if (data != "") {
                $.each(data, function(key, val) {
                    $("#span").val(val.span);
                    $("#numcard").val(val.numcard);
                    $("#chan").val(val.chan);
                    $("#idle").val(val.idle);
                    $("#level").val(val.level);
                    $("#call").val(val.call);
                    $("#name").val(val.name);
                });
            }
        }
    });
});

<input id="span" name="span" value="" />
<input id="numcard" name="numcard" value="" />
<input id="chan" name="chan" value="" />
<input id="idle" name="idle" value="" />
<input id="level" name="level" value="" />
<input id="call" name="call" value="" />
<input id="name" name="name" value="" />

when I try to alert ,example alert(val.span) it keep showing undifined .Does anyone with experience in this topic and see if any problem about my code? Any help would be greatly appreciated.Thank you .

Upvotes: 1

Views: 229

Answers (3)

Satish Sharma
Satish Sharma

Reputation: 9635

should be

            if (data != "") {

                    $("#span").val(data.span);
                    $("#numcard").val(data.numcard);
                    $("#chan").val(data.chan);
                    $("#idle").val(data.idle);
                    $("#level").val(data.level);
                    $("#call").val(data.call);
                    $("#name").val(data.name);

            }

Upvotes: 0

marrock
marrock

Reputation: 301

Try this:

$("a[name=cardNo1]").click(function() {
    var cardNo1 = $(this).attr("id");
    $("a[name=cardNo1]").each(function() {
        cardNo1 += "";
    });

    var dataString = "action=spanchan" + "&cardNo=" + cardNo1;
    $.ajax({
        type: "POST",
        url: "dahdiprocess.php?",
        data: dataString,
        dataType: 'json',
        success: function(data, status) {
            if (data != "") {
                    $("#span").val(data.span);
                    $("#numcard").val(data.numcard);
                    $("#chan").val(data.chan);
                    $("#idle").val(data.idle);
                    $("#level").val(data.level);
                    $("#call").val(data.call);
                    $("#name").val(data.name);
            }
        }
    });
});

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

You are returning a single set of values so you do not need the each within your success handler. Try this:

success: function(data, status) {
    if (data != "") {
        $("#span").val(data.span);
        $("#numcard").val(data.numcard);
        $("#chan").val(data.chan);
        $("#idle").val(data.idle);
        $("#level").val(data.level);
        $("#call").val(data.call);
        $("#name").val(data.name);
    }
}

In theory, you shouldn't need the data != "" check as your server side code should not be allowed to return an empty response for when the result of the request is 200 OK.

Upvotes: 3

Related Questions