IE10 - JQuery ajax html not loading data

问题

I have done some research already by looking at the following post (Ajax not work on IE10) and few other websites, but unfortunately it did not fixed my problem and that's why I need your help ;)

Below you can see my JQuery ajax script, My problem is that I can get to ajax and return value to errorDivStyle, but I am not able to load $("#mainView").html(data); data is returned from PHP script and its HTML.

Please note it works perfectly fine in Chrome, FF and IE 9 but NOT IE10. Is there something I am doing wrong ??

<script type="text/javascript">
        $(document).ready(function () {
        var category = $("#category").val();
        $("#category").change(function(){
            $.ajax({
                type: "POST",
                url: "test.php",
                data: $(this).serialize(),
                cache: false,
                success: function(data) {
                    if(data)
                    {
                        $("#mainView").html(data);
                        $("#errorDivStyle").html("<font color='#000000'>" + category + " category have been loaded</font>").show();
                    }
                }
            });
            return false;
        });
    });
    </script>

回答1:

I see nothing blatantly wrong with your code.

If you are using a newer version of Jquery then I would suggest changing:

$("#category").change(function(){

into

$("#category").on('change', function(){

and certainly after

cache: false,

add

dataType: 'html',

Also I highly recommend using console.log()

if(data)
{
    //check if expected data is correct
    console.log(data);
    //make sure you can target #mainview properly
    //should output the amount of #mainviews on your screen
    console.log($("#mainView").length);

    $("#mainView").html(data);
    $("#errorDivStyle").html("<font color='#000000'>" + category + " category have been loaded</font>").show();
}

EDIT:

    $("#category").on('change', function(){
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "test.php",
            data: $(this).serialize(),
            cache: false,
            dataType: 'html',
            success: function(data) {
                if(data)
                {
                    $("#mainView").html(data);
                    $("#errorDivStyle").html("<font color='#000000'>" + category + " category have been loaded</font>").show();
                }
            }
        });
    });

Why were you returning FALSE anyways? I just realized that this is probably a text field change that you are listening for. So the e.preventDefault() isn't necessary either...

Also if you just want to pass a single value to your test.php then you can try this:

    $("#category").on('change', function(){
        $.ajax({
            url: "test.php?q="+$(this).val(),
            cache: false,
            dataType: 'html',
            success: function(data) {
                if(data)
                {
                    $("#mainView").html(data);
                    $("#errorDivStyle").html("<font color='#000000'>" + category + " category have been loaded</font>").show();
                }
            }
        });
    });

EDIT: recursively TRIM an array

/**
* Returns a recursively TRIMMED variable
*
* @access   public
* @param    mixed
* @return   mixed
*/
if ( ! function_exists('trim_r'))
{
    function trim_r($var)
    {
        //In here you can add more code to handle objects properly but I did not because I am not using them with this function
        //if (is_array($var) || is_object($var)){some code}
        if (is_array($var))
        {
            return array_map('trim_r', $var);
        }
        else
        {
            return trim($var);
        }
    }
}


// Usage examples
$_POST = trim_r($_POST);
$_GET = trim_r($_GET);
$_REQUEST = trim_r($_REQUEST);
$custom_array = trim_r($custom_array);

来源：https://stackoverflow.com/questions/17594510/ie10-jquery-ajax-html-not-loading-data