Parse json data with JS being received from php

Question

My form:

          <form class="form-inline signup" action="php/signupForm.php" role="form" id="signupForm">
        <div class="form-group">
          <input type="email" name="email" class="form-control" placeholder="Email address">
        </div>
        <div class="form-group">
          <button type="submit" class="btn btn-theme ladda-button" data-style="expand-left">
<span class="ladda-label" id="notice">Get notified!</span>
</button>
        </div>
      </form>

the end of my php script

$response = array(
    "status" => $status,
    "message" => $message
);

echo json_encode($response);

My page is receiving data like:

{"status":0,"message":"This email is already on list!"}

using JS I need to parse that data and then update text within an element.

 <span id="notice">Get notified!</span>

here's my script which doesn't work, after senging form data to my php script I get a white screen that shows the json strong

    $(document).ready(function() {
      $.ajax({
      dataType: 'json',
        $('#notice').text(data.message);
      });
    });

If you are getting a screen of the response then you are doing a regular form submit instead of preventing the form from being submitted (ie using preventDefault in onsubmit event) and then doing the ajax call. With the code listed you are executing your ajax call as soon as your main page loads, not when you submit a form — Patrick Evans
– Patrick Evans, Commented Oct 13, 2015 at 20:10
I think your right and I think I've done this before. So to fix do I execute ajax onclick submit? — rhill45
– rhill45, Commented Oct 13, 2015 at 20:15

Pascal Boutin · Accepted Answer · 2015-10-13 20:41:16Z

1

You have to handle the response in a callback.

$(document).ready(function() {
    $('form').on('submit', function(e) {
        e.preventDefault();
        $.ajax({
          data: $(this).serialize(),
          url: $(this).attr('action'), // Or the path of the PHP file
          dataType: 'json',
        }).done(function(response) {
          $('#notice').text(response.message);
        });
    });
});

See the related docs here

edited Oct 13, 2015 at 20:41

answered Oct 13, 2015 at 20:07

Pascal Boutin

1,2742 gold badges9 silver badges22 bronze badges

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

9 Comments

rhill45 Over a year ago

What url would go there, it's coming back to the page from the server?

Pascal Boutin Over a year ago

The url of the PHP script you're calling

Pascal Boutin Over a year ago

In the network tab of your browser debugger, so you see your call being fired ? My guess is that you're not referring to the right php file in the url parameter

Pascal Boutin Over a year ago

see my updated anwser, that details how to handle the call itself.

Pascal Boutin Over a year ago

For the GET vs POST, that will affect how you will use the data in your php script, i suggest that you use a POST for this, and you will be able to manipulate the posted data in your PHP script in the $_POST array

|

taxicala · Accepted Answer · 2015-10-13 20:08:21Z

1

That ajax call is not well formed, missing success callback and url e.g:

$(document).ready(function () {
    $.ajax({
        url: '/the/url/where/your/data/comes/from/',
        dataType: 'json',
        success: function (data) {
            $('#notice').text(data.message);
        }
    });
});

answered Oct 13, 2015 at 20:08

taxicala

21.8k7 gold badges41 silver badges67 bronze badges

Comments

Patrick Evans · Accepted Answer · 2015-10-13 20:22:36Z

1

Your code as is, is just executing at page load and not on submission of a form. You need to attach an onsubmit event, prevent the default action of doing the form submit and do your ajax call in there. Also your ajax call itself was malformed

$("#yourFormID").submit(function(e){
    e.preventDefault();
    $.ajax({
       url:"/urlToServerScript",
       data:{} //any form data the script needs you should be put here,
       dataType:"json" //type of response the server will output
    }).then(function(data){
       $('#notice').text(data.message);
    });
});

answered Oct 13, 2015 at 20:22

Patrick Evans

42.8k6 gold badges81 silver badges94 bronze badges

7 Comments

rhill45 Over a year ago

but the data is already coming back to the page from the php script. I just need something to handle that returning data. I'm probably misunderstanding you here

Patrick Evans Over a year ago

@Rhillz, "after senging form data to my php script I get a white screen that shows the json strong", This indicates that the data isn't "coming back" through an AJAX request though, you are doing a regular html form submit that causes the browser to navigate away from the current page to the server response. If you are wanting to stay on the current page and still submit data to a server script this is how you would do it

rhill45 Over a year ago

but it is my sql is updating

rhill45 Over a year ago

i see what your saying

Pascal Boutin Over a year ago

you can do data:$(this).serialize() I think

|

Collectives™ on Stack Overflow

Parse json data with JS being received from php

3 Answers 3

9 Comments

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related