Getting JSON Error while calling multiple function

Question

Error - Uncaught SyntaxError: Unexpected token ' in JSON at position 0

I am calling multiple function in jquery but it is giving error i have tried so much way but the error get changed but it not working what should i do.

HTML

<div id="div1">
    <input type="submit"onclick='Function1()'>
    <input type="text" value="Text1" id="input1">
    <input type="text" value="Text2" id="input2">
</div>

<div id='div2'></div>

jQuery

function Function1(){
    var input1 =  $("#input1").val();
    var input2 =  $("#input2").val();
    var datajson = { "input1" : input1, "input2" : input2 };
    var data = "'"+JSON.stringify(datajson)+"'";
    Post_Funtion('testpost.php',data,'$("#div2").html(html);')
}

function Post_Funtion(URl,DATA,FUNCTION){

    var url = encodeURIComponent(URl);
    var data = JSON.parse(DATA);

    $.ajax({
        type: "POST",
        url: url,
        data: data,
        cache: false,
        success: function(html) {
            eval(FUNCTION);
        }
    });
}

Remove the `"'"` around `JSON.stringify()`. The single quotes aren't valid in a string of JSON. – Though, it's unnecessary to `stringify()` only to `parse()` immediately after. You can just pass the `Object` itself as the argument. — Jonathan Lonowski, May 30 '16 at 22:15
You seem to think that only strings can be passed as arguments to functions. Pass `data` and your callback function as-is, no need to convert them to strings and parse in the callee. — Igor Raush, May 30 '16 at 22:17
Also, functions in JavaScript can be used and passed around like any other value. So, `FUNCTION` can be an [actual `function`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function) – `Post_Function(..., function (html) { $("#div2").html(html); })` – invoked later with `FUNCTION(html);` or even `success: FUNCTION` without needing `eval()`. — Jonathan Lonowski, May 30 '16 at 22:19

score 0 · Accepted Answer · answered May 30 '16 at 22:24

You are trying to JSON.stringify() the post data incorrectly, then turning around and parsing it back to pass to the ajax options.

This whole step is needless. Pass the object through as is and jQuery will take care of it from there

function Function1(){
    var input1 =  $("#input1").val();
    var input2 =  $("#input2").val();
    var data = { "input1" : input1, "input2" : input2 };   
    Post_Funtion('testpost.php',data,'$("#div2").html(html);')
}


function Post_Funtion(URl,DATA,FUNCTION){    
    var url = encodeURIComponent(URl);       

    $.ajax({
       data: DATA,
       /* other options the same */

    ....
}

score 0 · Answer 2 · answered May 30 '16 at 22:37

You are trying to call JSON.parse on a string that looks like this:

'{"input1": input1, "input2": input2}'

That is not well-formed JSON. The outer quotes should be dropped. Try this code:

function Function1(){
    var input1 =  $("#input1").val();
    var input2 =  $("#input2").val();
    var datajson = { "input1" : input1, "input2" : input2 };
    var data = JSON.stringify(datajson) // Removed quotes from JSON
    Post_Funtion('testpost.php',data,'$("#div2").html(html);')
}

function Post_Funtion(URl,DATA,FUNCTION){

    var url = encodeURIComponent(URl);
    var data = JSON.parse(DATA);

    $.ajax({
        type: "POST",
        url: url,
        data: data,
        cache: false,
        success: function(html) {
            eval(FUNCTION);
        }
    });
}

score 0 · Answer 3 · edited May 23 '17 at 10:28

0

"'"+JSON.stringify(datajson)+"'"; - remove quotes

var data = JSON.stringify(datajson);

Can't see the reason of stringifying and parsing the object back in this case. Try the following:

function Function1(){
var input1 =  $("#input1").val();
var input2 =  $("#input2").val();
var data = { "input1" : input1, "input2" : input2 };

function cb(response){
  $("#div2").html(response);
}

Post_Funtion('testpost.php',data, cb)
}

function Post_Funtion(URl,DATA,FUNCTION){

var url = encodeURIComponent(URl);

console.log(DATA);

$.ajax({
    type: "POST",
    url: url,
    data: DATA,
    cache: false,
    success: FUNCTION
});
}

PS don't use eval, Why is using the JavaScript eval function a bad idea?

edited May 23 '17 at 10:28

Community

1
1

answered May 30 '16 at 22:38

Denys Kashkovskyi

61
6

i was reading about eval() i got many points to not to use this function but i have one question that what function can use at eval() position? – User97798 May 30 '16 at 22:59
I've edited my answer, look at function cb(response){..} – Denys Kashkovskyi May 30 '16 at 23:26

Getting JSON Error while calling multiple function

3 Answers3