jQuery Ajax不返回來自外部的變量PHP

我有這樣的代碼，它從表單獲取信息並將其發送到form.php，並將其處理。 form.php迴應變量（Fullname：$ fullname E-mail：$ email Link：$ link Instructions：$ instr），它們應該被輸入到#success。我的代碼在firefox和chrome中表現了兩種不同的方式。jQuery Ajax不返回來自外部的變量PHP

在Firefox中，我發送到form.php，它顯示正確的輸出，但顯然我不應該發送到那裏，我應該留在我的主頁上，並在#success中看到輸出。基本上，阿賈克斯不起作用。

在Chrome瀏覽器中，ajax可以工作，但只能將Fullname：Email：Link：Instructions：轉換爲#success。實質上，jQuery不通過POST傳遞變量。

mainpage.php：

<script type="text/javascript"> 
$(document).ready(function() { 
    var data = $(form).serialize(); 
    $('#form').submit(function(event) { 
      $.ajax({ 
      url: '../wp-content/themes/MC/form.php', 
      type: 'POST', 
      data: data, 
      success: function(result) { 
       $('#success').html(result); 
      } 
      }); 
    event.preventDefault(); 
    }); 
}) 
</script> 

<div id="exchange_inside"> 
<div id="formdiv"> 
<br> 
<form method="post" id="form"> 
    Name/Nom:<input type="text" name="fullname" /><br /> 
    E-mail/Courriel:<input type="text" name="email" /><br />       Your Daily URL/Votre URL Quotidien:<input type="text" name="link" /><br /> 
    Voting Instructions/Instructions de Vote:<textarea name="instr" style="width: 450px; height: 100px;"/></textarea><br /> 
    <input type="submit" value="Submit" /> 
</form> 
</div> 
</div> 
<div id="success"> 
</div>

form.php的：

<?php 
if (isset($_POST['fullname'])){ 
    $fullname = $_POST['fullname']; 
}else{ 
    echo "No name"; 
} 

if (isset($_POST['email'])){ 
    $email = $_POST['email']; 
}else{ 
    echo "No email"; 
} 

if (isset($_POST['link'])){ 
    $link = $_POST['link']; 
}else{ 
    echo "No link"; 
} 

if (isset($_POST['instr'])){ 
    $instr = $_POST['instr']; 
}else{ 
    echo "No instructions"; 
} 

echo "Name: " .$fullname. " E-mail: " .$email. " Link: " .$link. " Instructions: " .$instr; 
?>

來源

2011-09-26 Sweepster

嘗試改變了jQuery的一點由ajax調用之前event.preventDefault();移動多達並修復var data = $("#form").serialize();：

$(document).ready(function() { 

    $('#form').submit(function(event) { 
     event.preventDefault(); 
     var data = $("#form").serialize(); 
     $.ajax({ 
     url: '../wp-content/themes/MC/form.php', 
     type: 'POST', 
     data: data, 
     success: function(result) { 
      $('#success').html(result); 
     } 
     }); 

}); 
}); //semicolon here

擺上$(document).ready良好的措施結束分號。

的ajax調用之前移動event.preventDefault()從停止提交表單如果ajax由於某種原因失敗或沒有在ajax調用錯誤。主要使用這種表單提交方法，您希望首先停止表單的默認行爲。

來源

2011-09-26 23:59:24

問題解決了！ – Sweepster

儘量擺脫$('#form').submit，這是提交表單沒有Ajax的，就像這樣：

$(document).ready(function() { 
    var data = $('#form').serialize(); //this selector also needed to be fixed 
    $.ajax({ 
      url: '../wp-content/themes/MC/form.php', 
      type: 'POST', 
      data: data, 
      success: function(result) { 
       $('#success').html(result); 
      } 
    }); 
});

編輯：
我誤解了。在按下提交按鈕後嘗試序列化數據，而不是在頁面加載時修復Chrome問題。

$('#form').submit(function(event) { 
     var data = $('#form').serialize(); //moved this line and fixed selector 
     $.ajax({ 
     url: '../wp-content/themes/MC/form.php', 
     type: 'POST', 
     data: data, 
     success: function(result) { 
      $('#success').html(result); 
     } 
     }); 
     event.preventDefault(); 
});

您可能還想嘗試將提交按鈕更改爲常規按鈕並將ajax綁定到其onclick事件。這將避免表單提交時沒有Ajax的問題，並修復Firefox問題。

來源

2011-09-26 23:54:53 someone

他希望做一個XHR基本形式提交，不發送和DOM準備空的形式。 – 3on

@ 3on：好點，謝謝（回答編輯）。 – someone

$(document).ready(function() { 

    $("#form").submit(function(event) { 

     var data = $("#form").serialize(); 
      $.ajax({ 
      url: '/echo/json/', 
      type: 'POST', 
      data: data, 
      success: function(data, status, xhr) { 

       console.log(data); 
       console.log(status); 
       console.log(xhr); 
       $('#success').html(result.responseText); 
      } 

      }); 

    event.preventDefault(); 
     return false; 
    }); 
})

你的數據的聲明並沒有在全球範圍內。（我裝在正確的地方範圍）
$（形式）.serialize（）不等於$（」 #form「）。serialize（）
編輯回你的url =）
使用Jsfiddle和Firebug/Chrome開發工具來測試你的代碼！

希望幫助

來源

2011-09-27 00:11:54 Mirko

jQuery Ajax不返回來自外部的變量PHP

回答

相關問題