AJAX return error when call PHP page from Javascript OnClick

Question

My solution is using onClick event to call a PHP page, post parameters and return result using AJAX. I insert parameter right at time calling PHP page using specified URL. Here is my Javascript:

function uploadContact() {
        var name, email, phone, badgeid;
        if(window.localStorage.length > 0)
        {
            name = window.localStorage.getItem('name');
            email = window.localStorage.getItem('email');
            phone = window.localStorage.getItem('phone');
        }
        else
        {
            name = $('input[name=fullname]').val();
            email = $('input[name=email]').val();
            phone = $('input[name=phone]').val();
        }
        $.ajax({
             url: 'UpdateContactList.php?name=' + name + '&email=' + email + '&phone=' + phone,
             type: $form.attr('method'),
             dataType: 'json',
             success: function(responseJson) {
             $form.before("<p>"+responseJson.message+"</p>");
        },
        error: function() {
            $form.before("<p>There was an error processing your request.</p>");
        }});
    }

My PHP code to get parameters:

<?php

$response = array();

if($_SERVER['REQUEST_METHOD'] == 'POST')
{
  // if form has been posted process data

  // you dont need the addContact function you jsut need to put it in a new array
  // and it doesnt make sense in this context so jsut do it here
  // then used json_decode and json_decode to read/save your json in
  // saveContact()
   $data = array( 'fullname' => $_POST['name'], 'email' => $_POST['email'], 'phone' => $_POST['phone']);
      //These line is for testing only, remove it when done testing
   $test = $_POST['name'] . ' ' . $_POST['email'];
   echo "<script>alert('$test');</script>";
  // always return true if you save the contact data ok or false if it fails
   $response['status'] = updateContact($data) ? 'success' : 'error';
   $response['message'] = $response['status']
          ? 'Your submission has been saved!'
          : 'There was a problem saving your submission.';

   header("Content-type: application/json");
   echo json_encode($response);
   exit;
}
...
 function updateCacheFile($filename)
{
    $filename = "contact";
    $filename =  $filename . ".appcache";
    $cachefile = fopen ($filename, "a+");
    ....
    file_put_contents($filename, $cache_content);
}

Please notice 2 problems:

1. I can call directly PHP page with parameters from browse address link, do this will return nothing. Is it normally?

2. Call from javascript. The testing line (call an alert message box) won't work, no message appeared. But the cache file still updated, which means PHP page is called and do things like writing files.

There is 2 files to be written in this PHP page. Both of them were written correctly but the parameters won't show up and no message box show.

Please instruct me what went wrong here.

P/S: small detail, Is parameter with space can be pass correctly? Because I expected users input their full name, such as 'Bill Jobs'.

Thanks to Stackoverflow community.

Answer 1

Try sending your info in the data param of the ajax and setting the type to post. Like this...

$.ajax({
         url: 'UpdateContactList.php',
         type: 'post',
         dataType: 'json',
         data: {'key1': value1, 'key2':value2},
         success: function(responseJson) {
         $form.before("<p>"+responseJson.message+"</p>");
    },

Answer 2

$.ajax({
         url: 'UpdateContactList.php',
         data:{'name':name,'email': email,'phone':phone,'badgeid ':badgeid },
         type: $form.attr('method'),
         dataType: 'json',
         success: function(responseJson) {
         $form.before("<p>"+responseJson.message+"</p>");
    },
    error: function() {
        $form.before("<p>There was an error processing your request.</p>");
    }});

Answer 3

   echo "<script>alert('$test');</script>";
  // always return true if you save the contact data ok or false if it fails
   $response['status'] = updateContact($data) ? 'success' : 'error';
   $response['message'] = $response['status']
          ? 'Your submission has been saved!'
          : 'There was a problem saving your submission.';

   header("Content-type: application/json");
   echo json_encode($response);

All headers must be executed before you begin echoing or otherwise flushing output.

   header("Content-type: application/json");
   echo "<script>alert('$test');</script>";
  // always return true if you save the contact data ok or false if it fails
   $response['status'] = updateContact($data) ? 'success' : 'error';
   $response['message'] = $response['status']
          ? 'Your submission has been saved!'
          : 'There was a problem saving your submission.';

   echo json_encode($response);