Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery append some weird string into the data submitted

Tags:

jquery

Code to reproduce the bug (Put the following code in the html page and read the data submitted in Fiddler. jQuery 1.4.2 works fine, the problem happens in 1.5.1 and 1.5.2):

<html>
<head>
<script src="https://github.com/douglascrockford/JSON-js/raw/master/json2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
var data = { "Name": "test??", "testDesc": "testdesc??"};
  $.ajax({ 
    url: "submit.aspx/SubmitData", 
    data: JSON.stringify(data),
    type: "POST", 
    contentType: "application/json; charset=utf-8", 
    dataType: "json", 
    cache: false
  }).success(function (msg) {});
</script>
</head>
<body></body>
</html>

I am using jQuery 1.5.1 for data processing and submit data to the server

function test(name, testDesc){
  var data = { "Name": name, "testDesc": testDesc};
  $.ajax({ 
    url: "submit.aspx/SubmitData", 
    data: JSON.stringify(data),
    type: "POST", 
    contentType: "application/json; charset=utf-8", 
    dataType: "json", 
    cache: false
  }).success(function (msg) {//......});
}

Among one thousand records, there are a few records with string like 'jQuery151023383707909744822_1301931324827' and 'jQuery151033911434971578497_1301989384660' in the data.

Is that the bug of jQuery or any plugins that causes the problem?

More information: The weird string seems replace the original "?" in those records. For example, Do you like StackOverflowjQuery151023383707909744822_1301931324827 I love it very much. Is this goodjQuery151023383707909744822_1301931324827 It's great.

Update for the bug: I have reproduced a case for the bug. If I input "test??" for the name, the submitted data becomes "{"Name":"testjQuery15103933552800185728_1302170988810","Description":"fdsa"}"

like image 365
Billy Avatar asked Apr 07 '11 09:04

Billy


1 Answers

Update:

Looks like a bug in jQuery to me It is a bug in jQuery, specifically bug #8417, which was reported about five weeks ago, closed erroneously, then reopened and there's now a pull request with a fix pending; hopefully the fix will make a future version.

Workaround below, but first: This code replicates it in isolation:

jQuery(function($) {

  $('#theButton').click(function go() {
    var data = { "Name": "test??", "testDesc": "description"};
    $.ajax({ 
      url: "/icece5", 
      data: JSON.stringify(data),
      type: "POST", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      cache: false
    });
  });
});

Live copy

Although we can't see the result of the POST on jsbin.com, we don't care, because it's what we're sending to the server that we're worried about. If I send that and look at the request in Chrome's dev tools, I clearly see the data being corrupted with the JSON-P callback name described below.

Interestingly, it doesn't happen if we don't tell jQuery we're expecting JSON back from the server (note the commented out line):

jQuery(function($) {

  $('#theButton').click(function go() {
    var data = { "Name": "test??", "testDesc": "description"};
    $.ajax({ 
      url: "/icece5", 
      data: JSON.stringify(data),
      type: "POST", 
      contentType: "application/json; charset=utf-8", 
      //dataType: "json", 
      cache: false
    });
  });
});

Live copy

The type of the data being returned shouldn't affect what it does with the data we're sending, I wouldn't have thought. But it does invite a workaround:

Workaround

var data = { "Name": "test??", "testDesc": "testdesc??"};
$.ajax({ 
    url: "submit.aspx/SubmitData", 
    data: JSON.stringify(data),
    type: "POST", 
    contentType: "application/json; charset=utf-8", 
    dataType: "text",              // <== Tell jQuery you expect plain text
    cache: false
}).success(function (data) {
    data = jQuery.parseJSON(data); // <=== Then parse it yourself
});

Recommend putting together a test case on jsFiddle.net and reporting it to the jQuery team, since you're the person with the real-life problem with it. If it's really a bug, they'll fix it; if not, I'd be interested to know why not...


Original answer:

The code you've quoted is doing a POST of JSON-encoded data, but the strings you've mentioned (jQuery151023383707909744822_1301931324827, etc.) are the jQuery "expando" (which is determined at runtime by taking the jQuery version and adding a random value to it) plus _ plus an epoch value. jQuery creates strings in that form as the default names of JSON-P callback functions, as seen here:

Lines 1,326-1,329 of jQuery-1.5.1.js:

// Unique for each copy of jQuery on the page
// Non-digits removed to match rinlinejQuery
expando: "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, "" ),

and (lines 7,029-7,035):

// Default jsonp settings
jQuery.ajaxSetup({
    jsonp: "callback",
    jsonpCallback: function() {
        return jQuery.expando + "_" + ( jsc++ );
    }
});

So my guess is that the code you're quoting isn't the code generating these values, but that you have other code using them.

The name of the JSON-P callback will replace the ? in the URL of a request if you use JSON-P for the request. I wouldn't expect it to do that in your data.

I'd review your use of ajaxSettings and such. If you switch to the un-minified version for debugging, you can also set a breakpoint in whatever debugger you use (and you use one, right? there's no excuse not to) on line 7,033 (where those strings are being created) and then step out to find out what part of your code is triggering it.

like image 169
T.J. Crowder Avatar answered Nov 15 '22 03:11

T.J. Crowder