jQuery ajax to PHP, returning Error and empty object

Question

I am trying to use jQuery ajax to call PHP and return JSON.

My test is very simple, but all I seem to be getting is an empty object.

I am not getting any PHP errors in the LOG File.

jqXHR is shown as an object with the 'alert', but does not appear in the 'Chrome' console.

The 'Unpacked' alert does not show at all

I have obviously missed something or made some stupid error, but I can not see what I have done wrong.

HTML

<body>
<form id="frmSearch" onsubmit="matchQryString();">
    Search: <input type="text" name="qryWords" value="" />
   <input type="submit" name="submit" value="Search" />
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>
    function matchQryString() {
        alert("Running AJAX");
        $.ajax({
            type:'POST',
            url: 'rtnJSON.php',
            data:$('#frmSearch').serialize(),
            dataType: 'json',
            success: function(response) {
                alert("PHP Return SUCCESS");
                alert(response);
            },
            error: function (jqXHR, exception) {
                alert("PHP Return ERROR");
                alert(jqXHR);
                alert(exception);
                console.log(jqXHR);
                var op = "";
                for (property in jqXHR) {
                    op += property + ': ' + obj[property]+'; ';
                }
                alert ("Unpacked: " + op);
            }
        });
       return false ;
    }
</script>
</body>

PHP

<?php

  $arr = array ('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);

  header('Content-type:application/json;charset=utf-8');

  echo json_encode($arr); // {"a":1,"b":2,"c":3,"d":4,"e":5}

?>

obj[property] - where is obj defined?

Akshaya Shanbhogue
– Akshaya Shanbhogue

2015-08-23 15:20:19 +00:00
Commented Aug 23, 2015 at 15:20 — Akshaya Shanbhogue
– Akshaya Shanbhogue, Commented Aug 23, 2015 at 15:20

guest271314 · Accepted Answer · 2015-08-23 15:22:35Z

1

form being submitted before $.ajax() call ? Try removing onsubmit from html , type="submit" from input element , attaching click event to type="submit" element , calling .e.preventDefault() within click handler . Also note, obj does not appear defined within error handler of $.ajax()

html

<form id="frmSearch"">
    Search: <input type="text" name="qryWords" value="" />
   <input type="button" name="submit" value="Search" />
</form>

js

$(function() {
      function matchQryString(e) {
        e.preventDefault();
        alert("Running AJAX");
        $.ajax({
            type:'POST',
            url: 'rtnJSON.php',
            data:$('#frmSearch').serialize(),
            dataType: 'json',
            success: function(response) {
                alert("PHP Return SUCCESS");
                alert(response);
            },
            error: function (jqXHR, exception) {
                alert("PHP Return ERROR");
                alert(jqXHR);
                alert(exception);
                console.log(jqXHR);
                var op = "";
                for (property in jqXHR) {

                    op += property + ': ' + obj[property]+'; ';
                }
                alert ("Unpacked: " + op);
            }
        });
    };

    $("[name=submit]").on("click", matchQryString);
})

answered Aug 23, 2015 at 15:22

guest271314

1

Sign up to request clarification or add additional context in comments.

3 Comments

mcl Over a year ago

Many thanks. It did not work initially with e.preventDefault() at the start of the function matchQryString(). When I commented it out - it worked as I thought it would. Where should I position the e.preventDefault() call ?

guest271314 Over a year ago

@mcl "It did not work initially with e.preventDefault() at the start of the function matchQryString(). When I commented it out - it worked as I thought it would. Where should I position the e.preventDefault() call ? " If e.preventDefault() not needed to return expected result , leave omitted ?

mcl Over a year ago

Apologies : silly me missed the addition of e being passed to function

Collectives™ on Stack Overflow

jQuery ajax to PHP, returning Error and empty object

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related