$.ajax()function with json data from javascript array to a php processing file

Question

i trying to use json for the first time with $.ajax() i got the values of checkboxes and other needed data to a php file for processing and posting to mysqldb through an array for the data section of $.ajax() function but would get an empty array[] on my php file. When i try using javascript debugging tool from my browser i got the reprot

**Uncaught SyntaxError: Unexpected end of input jquery-1.9.0.min.js:1
st.extend.parseJSON jquery-1.9.0.min.js:1
(anonymous function) index.php?url=account/registration/:297
st.event.dispatch jquery-1.9.0.min.js:2
y.handle** 

the array i produced looks like this at the console log

 [checkbox1: "COM 101", semester: "1st Semester", mid: "7", checkbox2: "COM 112", checkbox3: "STA 111"…]

checkbox1: "COM 101"
checkbox2: "COM 112"
checkbox3: "STA 111"
checkbox4: "STA 112"
checkbox5: "MTH 111"
length: 0
mid: "7"
semester: "1st Semester"

on my php processing file i did print_r on the json data but got an Array[] as a result

this is my javascript code block "myDataArray is a global variable"

$('#mytable2').on('change',function(e){
            var rel = e.target.getAttribute('rel');
            console.log(e.target.value+ " "+ e.target.checked)
            if(rel === globals.payment_target && e.target.checked===true){
                myDataArray[e.target.getAttribute("name")]= e.target.value;
                myDataArray["semester"] = $("#semester").val()
                myDataArray["mid"] = $("#mid").val()

            }

            if(rel === globals.payment_target && e.target.checked ===false){
                delete myDataArray[e.target.getAttribute("name")]
                console.log(myDataArray)
            }

});
$('#mytable2').on('click',function(e){
            var rel = e.target.getAttribute('rel');
            console.log(e.target.value+ " "+ e.target.getAttribute('name'))
            if(rel === globals.payment_target && e.target.value =="Register"){
               console.log(myDataArray)
                var jsonstring = $.parseJSON(myDataArray);
                var myglob    =JSON.stringify(globals)
                console.log(myglob)
                $.ajax({url:'courseregistration.php',  type:'POST',data:{data:jsonstring},success: function(result){
                        $('#putmehere').html("<h4 style='text-align:center'>"+result+"</h4>")
                        alert(result)

                    }
                })

            }

        });

and this what the php file looks like

$data = json_decode($_POST['data']);
print_r($data);

i just can't figure out what the problem is. can someone please tell me what is wrong with the way i'm doing it or suggest a better way

Answer 1

Try to set data type property json

 $.ajax({
    url:'courseregistration.php',
    type:'POST',data:{data:jsonstring},
    datatype:"json",
    success: function(result){
    $('#putmehere').html("<h4 style='text-align:center'>"+result+"</h4>")
    alert(result)

    }
  });

Also set content type in php script.

header('Content-Type: application/json');

Answer 2

The reason that your page is not working is the critical error (your first listing). You need to clear up this error before you can do anything else because your form is not being submitted as you want it to.

The reason for the error: maybe a corrupt file - download another copy of jQuery and try again.

Answer 3

i removed this --- $.parseJSON(myDataArray) --- and the error did not come again i used JSON.stringify(myDataArray) instead. also i declared myDataArray as an object instead of as an array and things went fine, it solved the Uncaught SyntaxError: issue

Initially, i declared myDataArray as an array

 var myDataArray  = new array();

but when i changed myDataArray to Object

 var myDataArray  = new Object;

i effect it as below and things went fine

$('#mytable2').on('click',function(e){
            var rel = e.target.getAttribute('rel');
            console.log(e.target.value+ " "+ e.target.getAttribute('name'))
            if(rel === globals.payment_target && e.target.value =="Register"){
               console.log(myDataArray)
               console.log(globals)
                var jsonstring = JSON.stringify(myDataArray);
                console.log(myglob)
                $.ajax({url:'courseregistration.php',dataType:"json",  type:'POST',data:{data:jsonstring},success: function(result){
                        $('#putmehere').html("<h4 style='text-align:center'>"+result+"</h4>")
                        alert(result)

                    }
                })

            }

        });