How to transfer json strings back and forth between HTML and PHP via jQuery Ajax?

Question

Hi I'm new to PHP and jQuery and I was doing some tests trying to figure out how things work. But I keep having trouble transferring data back and forth between my web page and the php file on the server. Here is the code:

<center>
  <form>
    <hr>
    <table style="width:80%;border:3px;">
      <tr>
        <td align="center"><input type="text" id="name" placeholder="First Last"></td>
        <td align="center"><input type="text" id="ssn" placeholder="First Last"></td>
        <td align="center"><input type="text" id="birth" placeholder="First Last"></td>
        <td align="center"><input type="text" id="xxxx" placeholder="First Last"></td>
        <td align="center"><button type="button" id="add">Add</button></td>
        <script>
          $("#add").click(function() {
            var nameIn = $('#name').val();
            var ssnIn = $('#ssn').val();
            var birthIn = $('#birth').val();
            var xxxxIn = $('#xxxx').val();
            
            xxxxIn = "\$" + xxxxIn;
            $.ajax({
              type:"POST",
              url:"database_update.php",
              dataType:"JSON",
              data: {
                name: nameIn,
                ssn: ssnIn,
                birth: birthIn,
                xxxx: xxxxIn
                },
              success: function(ret) {
                var out = JSON.stringify(ret);
                alert(out);
                }
            });
          });
        </script>
      </tr>
    </table>
  </form>
</center>

<?php
$name = $_POST['name'];
$ssn = $_POST['ssn'];
$birth = $_POST['birth'];
$xxxx = $_POST['xxxx'];

header('Content-type: application/json');
if (isset($name))
{
  $ret = array(
    "name" => $name,
    "ssn" => $ssn,
    "birth" => $birth,
    "xxxx" => $xxxx
    );
  echo json_encode($ret);
} ?>

The alert function was never triggered and the response from php was successful.

Do you really have a space between your tag an php? "<? php". If so, that may cause you some problems. — Jonathan
– Jonathan, Commented Mar 14, 2015 at 3:15
Did you include jQuery in your <head> tag? And is your database_update.php in the same directory as your HTML file? — Jonathan
– Jonathan, Commented Mar 14, 2015 at 3:22
Yes I did and there was data transferring back from the server but the if statement was gone...seeing from the network tab of Chrome. And yes all files are in the "public_html" directory — Warthog0007
– Warthog0007, Commented Mar 14, 2015 at 3:26
I copied your code and tried it on my server and it's working fine. If you click on the item in the Network tab, what does it give in the "Response" or "Preview" tab? Is there any other code in database_update.php ? — Jonathan
– Jonathan, Commented Mar 14, 2015 at 3:32

Jonathan · Accepted Answer · 2015-03-14 03:54:22Z

1

Although it seems a little unlikely that anyone will stumble across this post with the exact same issue, I'll post an answer with the essence of the comments.

1) Remove white space from PHP tags "<?php", not "<? php"

2) Include jQuery in your tag (you already had this done)

3) Make sure files are in the same directory, or include the directory path in your AJAX call (you were fine here, too)

4) Verify the Response in the Network tab of the Chrome Console or Firebug. No PHP should ever be visible here.

5) Reduce complexity as much as possible. Once it is working, gradually add code back in.

answered Mar 14, 2015 at 3:54

Jonathan

6,5375 gold badges40 silver badges49 bronze badges

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

Collectives™ on Stack Overflow

How to transfer json strings back and forth between HTML and PHP via jQuery Ajax?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related