奇怪的Ajax / Javascript问题

Question

So I have a weird issue happening with an ajax call and the data that gets returned. Basically I am making a call via ajax to my script which is then grabbing some data via the Amazon API. When the data is returned, it seems like the urls are breaking the actual return itself. Here's my code to pass to ajax,

        if(flag != false){  

        var myvars = {"keywords": keyword, "aff_code": aff_code, "roundup_title": roundup_title, "user_id": user_id, "newtab": newtab, "nofollow": nofollow};


            $.ajax({
            url: 'process.php',
            type: "POST",
            data: myvars,
            dataType: 'json',
                xhrFields: {
                    onprogress: function(e)
                    {
                var this_response, response = e.currentTarget.response;
                if(last_response_len === false)
                {
                this_response = response;
                last_response_len = response.length;
                }
                else
                {
                this_response = response.substring(last_response_len);
                last_response_len = response.length;
                }
                //console.log(this_response);
                $("#result").html(this_response).slideDown();
                    }
                }
            })





            .done(function(data)
            {
                //console.log('Complete response = ' + data);
                var doned = "That wasn't so hard!";
                $("#result").html(doned).slideDown();
            })
            .fail(function(data)
            {
                console.log('Error: ', data);
            });
            //$("#result").hide().html(output).slideDown();
            $("#result").html("Just a moment...").slideDown();

        }

In my php code, this is how I am returning it:

     if($title != ''){
      if($d < 2){

                $ret .= '<td width="50%" style="padding-left:20px;">';
                $ret .= '<input type="checkbox" name="selection[]" value="' . $i . '"> Select This Item';
                $ret .= "<h5 class=\"media-heading\"><a href=\"" . $text_link . "\" target=\"_blank\" class=\"title-color\">" . $result[$i]['title'] . "</a></h5>";

                $ret .= '<div class="avatar avatar-xl avatar-circle"><img src="' . $image . '"></div>';
                $ret .= "</td>";                                

                $d++;   
         }
         else{
          $ret .= "</tr>";
          $ret .= "<tr>";

          $d = 0;
        }


      }

The amazon link that I dig out of the API looks like this:

   [amazon_link] => Array
            (
                [0] => http://www.amazon.com/Anaheim-Ducks-Mens-Patriotic-Snapback/dp/B01EI53EA0%3Fpsc%3D1%26SubscriptionId%3DAKIAIA66NHFH2G5I4XIA%26tag%3Dtest-20%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3DB01EI53EA0
            )

But here's my issue. Sometimes, I get results that end up breaking the url all together and the rest of the code as the results look like this:

    %26camp%3D2025%26creative%3D165953%26creativeASIN%3DB01D8YMIJK" target="_blank" class="title-color">Just Play Kitty Surprise Plush, Cleo

It's baffling me as to why something in the middle of the url would break a return. Any suggestions are appreciated. Thanks!

Answer 1

There are characters that are not allowed in links when they are sent or receveid from a server. the main is &. What I advice you is to base64 encode you data in the php file (using php's base64_encode function) and decode it in the browser using window.atob function.

   //javascript
    $.ajax({
        url: 'process.php',
        type: "POST",
        data: myvars,
        dataType: 'json',
            xhrFields: {
                onprogress: function(e)
                {
            var this_response, response = e.currentTarget.response;
            if(last_response_len === false)
            {
            this_response = response;
            last_response_len = response.length;
            }
            else
            {
            this_response = response.substring(last_response_len);
            last_response_len = response.length;
            }
            //console.log(this_response);
            $("#result").html(this_response).slideDown();
                }
            }
        })





        .done(function(data)
        {
         data = window.atob(data); //decoding data
            //console.log('Complete response = ' + data);
            var doned = "That wasn't so hard!";
            $("#result").html(doned).slideDown();
        })
        .fail(function(data)
        {
          data = window.atob(data) //decoding result
            console.log('Error: ', data);
        });
        //$("#result").hide().html(output).slideDown();
        $("#result").html("Just a moment...").slideDown();

    }