複選框阿賈克斯返回帖子

我一直在努力與此一段時間。我知道有關於此的多篇文章，但由於我對這個主題很陌生，所以我很難理解。我想將我的複選框表單的值發佈到php腳本中，並將值的值返回到我的頁面上的div。下面是代碼：複選框阿賈克斯返回帖子

的onclick函數調用Ajax：

<script> 
    function submit_form(){ 
    var data = { 'saqalinproxy[]' : []}; 
    $("input:checked").each(function() { 
    var chck1 = $(this).val(); 
    alert(chck1); 
    data['saqalinproxy[]'].push($(this).val()); 
    }); 
    $.ajax({ 
    type : 'POST', 
    url : 'testdeploy.php', 
    data : data, 
    dataType: "html", 
    success : function(data){ 
      $('#progress_status').hide(); 
      $('.return').html(data); // replace the contents coming from php file 
      } 
     }); 
      $('#progress_status').show(); 
    } 
    </script>

HTML表單：

<div style="width: 700px; height: 150px; padding: 10px"> 
<form id="caForm" class="caForm" method="post" name="caForm"> 
<fieldset id="fs-0"> 
<legend>QA Proxy Servers</legend> 
<input type="checkbox" id="saqalin-proxy01" name="saqalinproxy[]" value="41.191.126.246">saqalin-proxy01<br> 
<input type="checkbox" id="saqalin-proxy02" name="saqalinproxy[]" value="41.191.126.247">saqalin-proxy02<br><br> 
<!--<input type="checkbox" id="ca-0"> Check/Uncheck All --> 
<br> 
<input type="submit" value="Deploy" onclick="submit_form();"/> 

</fieldset> 
</form> 

</div> 

<div id="status"> 
<p style="display:none;" id="progress_status"><img id="progress_image_status" style="padding-left:5px;padding-top:5px;" src="images/ajax-loader.gif" alt=""> Checking if this kak works!</p> 
</div> 

<div id="return"></div>

PHP帖子頁：

<? 

    if(isset($_POST['saqalinproxy[]'])){ 
     $invite = $_POST['saqalinproxy[]']; 
     print_r($invite); 
    } 

?>

我努力獲得的值在我的頁面上返回。任何幫助表示讚賞。

來源

2012-11-23 user1632953

'$（'。return'）'沒有類作爲'return'，pl把它改成'$（'＃return'）'。如果它不工作，意味着發佈你的php代碼 –

警告'數據'變量在成功函數後，並檢查你得到什麼？ –

在此行中你選擇一個類的return的元素，因爲.表示類名：

$('.return').html(data);

在你的HTML，你div有return不是一個id類（注意#）。因此，將其更改爲：

$('#return').html(data);

你的第二個問題是在PHP代碼，你努力的目標與$_POST['saqalinproxy[]']張貼的陣列。 PHP直接將它解析爲一個PHP數組，因此$_POST['saqalinproxy']實際上是數組。

if(isset($_POST['saqalinproxy'])){ 
    $invite = $_POST['saqalinproxy'];

例如，如果兩個項目被選中，那麼：

echo $_POST['saqalinproxy'][0]; // outputs 41.191.126.246 
echo $_POST['saqalinproxy'][1]; // outputs 41.191.126.247

此外，而不是試圖像你建後的數據，你可以簡單地序列化形式：

$.ajax({ 
    type : 'POST', 
    url : 'testdeploy.php', 
    data : $('#caForm').serialize(),

當你解決這些問題時，你會看到表單提交兩次。第一次作爲ajax，第二次作爲傳統的請求。要解決你需要在onclick中返回false或從函數返回false。

<input type="submit" value="Deploy" onclick="submit_form(); return false;"/>

來源

2012-11-23 11:59:59 MrCode

ok變成$（'＃return'）。html（data）;我原本實際上仍然沒有運氣。警報給了我正確的數據 - 林不知道我是否正確張貼到腳本或如果它正確接收數據...？ – user1632953

看到我的編輯，我發現了一些其他問題。 – MrCode

好極了。 Firebug顯示帖子工作正常並且正確的數據：html和響應正在發佈，但我正努力將數據返回到div ... – user1632953

在html js和php中幾乎沒有變化。在html中

<input type="submit" value="Deploy" onclick="return submit_form();"/>

在js中，在submit_form函數中返回false。自PHP

if(isset($_POST['saqalinproxy'])){ 
    $invite = $_POST['saqalinproxy']; 
    print_r($invite); 
}

也改變$('.return').html(data); to $('#return').html(data);

來源

2012-11-23 12:15:42

您無法看到回覆，因爲頁面在提交後刷新返回false將阻止頁面刷新。 –

你可以使用一個庫，使自動對你來說，這是phery http://phery-php-ajax.net，你的情況，這會是這樣（注意在該data-remote="deploy"形式）

<div style="width: 700px; height: 150px; padding: 10px"> 
    <form id="caForm" class="caForm" data-remote="deploy" action="testdeploy.php" name="caForm"> 
     <fieldset id="fs-0"> 
      <legend>QA Proxy Servers</legend> 
      <input type="checkbox" id="saqalin-proxy01" name="saqalinproxy[]" value="41.191.126.246">saqalin-proxy01<br> 
      <input type="checkbox" id="saqalin-proxy02" name="saqalinproxy[]" value="41.191.126.247">saqalin-proxy02<br><br> 
      <!--<input type="checkbox" id="ca-0"> Check/Uncheck All --> 
      <br> 
      <input type="submit" value="Deploy" /> 
     </fieldset> 
    </form> 
</div> 

<div id="status"> 
    <p style="display:none;" id="progress_status"><img id="progress_image_status" style="padding-left:5px;padding-top:5px;" src="images/ajax-loader.gif" alt=""> Checking if this kak works!</p> 
</div> 

<div id="return"></div>

然後在testdeploy.php你將其更改爲：

function deploy($data){ 
    $r = new PheryResponse; 
    foreach ($data['saqalinproxy'] as $proxy){ 
    // do whatever you need to do with $proxy here 
    } 
    $r->jquery('#return')->html('set the HTML of your return'); 
    $r->jquery('#progress_status')->hide(); 
    return $r; 
} 

Phery::instance()->set(array(
    'deploy' => 'deploy' 
))->process();

就是這樣，不需要額外的Javascript代碼，它都是自動的。但是爲了顯示進度，你應該這樣做：

$(function(){ 
    // phery:before fires before sending the AJAX 
    $('#caForm').bind('phery:before', function(){ 
    $('#progress_status').show(); 
    }); 
});

來源

2012-11-25 08:53:48 pocesar

複選框阿賈克斯返回帖子

回答

相關問題