jQuery的表單提交不能在IE8上正常工作

Question

jQuery $.ajax()在IE8上似乎無法正常使用，但在Firefox，Chrome和Safari上可以使用。 我正在提交表單並以JSON格式回復。

這是我的代碼：

test.php：

<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jsFile.js"></script>

<form action='_test.php' method='post' class='ajaxform'>
 <input type='text' name='txt' value='Test Text'>
 <input type='submit' value='submit'>
</form>

<div id='testDiv'></div>

_test.php：

<?php
      $arr = array( 'testDiv' => $_POST['txt'] );
      echo json_encode( $arr );
?>

jsFile.js：

jQuery('.ajaxform').live('submit', function(event) {

 $.ajax({
        url  : $(this).attr('action'),
        type : $(this).attr('method'),
        dataType: 'json',
        data : $(this).serialize(),
        success : function( data ) {
     for(var id in data) {
      jQuery('#' + id).html( data[id] );
     }
            }
    });

 return false;
});

行為：

在Firefox，Chrome，Safari中：

當我提交表單時，將textfield（txt）的值成功填充到DIV（testDiv）中，而不會干擾整個頁面。

在IE中：

當我提交表單時，它只在屏幕上顯示json表單，如下所示： {"testDiv":"Test Text"}

如何在IE中解決此問題？

謝謝。

Answer 1

我用這個替換了我的jquery代碼，它在所有瀏覽器上都可以使用：

jQuery(document).ready(function(){

    jQuery('.ajaxform').submit( function() {

        $.ajax({
            url     : $(this).attr('action'),
            type    : $(this).attr('method'),
            dataType: 'json',
            data    : $(this).serialize(),
            success : function( data ) {
                        for(var id in data) {
                            jQuery('#' + id).html( data[id] );
                        }
                      }
        });

        return false;
    });

});

我不知道這是什么，但現在可以正常工作。 感謝大家的參與，並幫助我解決這個問題。

Answer 2

可能無濟於事，但是在您的代碼中查看有問題的部分對我而言，似乎比沒有ajax的多了serialize（）。 我發現此jQuery serialize（）無法在IE中的Ajax加載的對話中運行，並不能完全解決您的情況，但指出在ie中缺少括號可能會混淆序列化輸出。

只有我的兩分錢。

Answer 3

代替

for(var id in data) {
  jQuery('#' + id).html( data[id] );
}

您是否嘗試過使用$.each() ？

jQuery.each(data , function(id, val) {
  jQuery('#' + id).html( val );
});

而且，您誤解了$(this) ，（ 我猜是 ）

jQuery('.ajaxform').live('submit', function(event) {

  var $this = $(this); // add this line...

 $.ajax({
        url  : $this.attr('action'),
        type : $this.attr('method'),
        dataType: 'json',
        data : $this.serialize(),
        success : function( data ) {
     for(var id in data) {
      jQuery('#' + id).html( data[id] );
     }
            }
    });

 return false;
});

Answer 4

您的JSON響應（ _test.php輸出）應包含:而不是; ，如@ sje397所說。 好像其他瀏覽器都可以; ，而不是IE8，因此該值保留為字符串，而不是被解析為對象。

編輯：由於某種原因，您的數據未轉換為json，請嘗試將

if(typeof(data)=='string') {
  data=$.parseJSON(data);
}

在success處理程序的頂部，然后查看它是否有效。

Answer 5

僅供參考：

天真的，我嘗試了在Win 7上在IE8中發布的代碼（處於兼容模式和非兼容模式），它正確地將“測試文本”正確顯示為div中的純文本格式，而不是JSON格式。

Answer 6

1. 嘗試更改選擇器（ input:submit或:submit ）
2. 將錯誤處理程序添加到ajax調用中，並查看其內容