如何將jquery值傳遞給php，而無需頁面加載

我想將jquery值「selected」傳遞給fetchdata.php，而無需重新加載頁面。我該怎麼做？如何將jquery值傳遞給php，而無需頁面加載

這裏是我的代碼：

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" 
     type="text/javascript"></script> 

     <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.min.js" type="text/javascript"> 
     </script> 
     <script> 
      $(document).ready(function() { 
       $("#buttonClass").click(function() { 
        getValueUsingClass(); 
       }); 
      }); 
      function getValueUsingClass() { 

       var chkArray = []; 

       $(".chk:checked").each(function() { 
        chkArray.push($(this).val()); 
       }); 

       /* we join the array separated by the comma */ 
       var selected; 
       selected = chkArray.join('#') + "#"; 

       if (selected.length > 1) 
       { 
        $.ajax({ 
         url: "fetchdata.php", //This is the page where you will handle your SQL insert 
         type: "GET", 
         data: "val=" + selected, //The data your sending to some-page.php 
         success: function() 
         { 
          console.log("AJAX request was successfull"); 
         }, 
         error: function() 
         { 
          console.log("AJAX request was a failure"); 
         } 
        }); 

        //alert("You have selected " + selected); 
       } else 
       { 
        alert("Please at least one of the checkbox"); 
       } 
      } 
     </script> 
    </head> 
    <body> 
     <div id="checkboxlist"> 
      <div><input type="checkbox" value="1" class="chk"> Value 1</div> 
      <div><input type="checkbox" value="2" class="chk"> Value 2</div> 
      <div><input type="checkbox" value="3" class="chk"> Value 3</div> 
      <div><input type="checkbox" value="4" class="chk"> Value 4</div> 
      <div><input type="checkbox" value="5" class="chk"> Value 5</div> 
      <div> 
       <input type="button" value="Get Value Using Class" id="buttonClass"> 
      </div> 
</html>

fetchdata.php

<?php 
    foreach($_GET['val'] as $r) 
    { 
     print_r($r); 
    } 
?>

我使用GET方法來接收數據和for-each循環打印陣列，但我沒有在PHP文件中獲取任何值。

來源

2013-08-20 Sriram TP

使用'print_r的一個按鈕後，DIV （$ _GET）'看看$ _GET請求中的內容 –

沒有打印。 –

@ user2376463，就像一個人站起來一樣，確保代碼格式正確是個不錯的主意。它可以更容易地發現錯誤和小問題！它可能有點誇大其詞，但我建議您在NetBeans等開發工作中使用它的代碼格式化工具。 –

更改下面的ajax函數，並確保在同一個文件夾中的fectdata.php或給出正確的路徑。

$.ajax({ 
    url: 'fetchdata.php', 
    type:'GET', 
    data: {val:selected}, 
    success: function(data) { 
     console.log("AJAX request was successfull"); 
    } 
});

來源

2013-08-20 04:57:49

+1，但也許他應該直接使用chkArray而不是選定的，不是嗎？ – steven

stil有沒有改善.. :( –

通過以下方式總是如此：'（selected.length> 1）' – steven

檢查路徑到您的腳本是正確的：

url: 'fetchdata.php',

是這個腳本在你的文檔根？

$(document).ready(function() { 

$("#buttonClass").click(function() { 
getValueUsingClass(); 
}); 

}); 

function getValueUsingClass(){ 
var chkArray = []; 

$(".chk:checked").each(function() { 
chkArray.push($(this).val()); 
}); 
/* we join the array separated by the comma */ 
var selected; 
selected = chkArray.join('@') + "@"; 
if(selected.length > 1) 
{ 
$.ajax({ 
url: "fetchdata.php", //This is the page where you will handle your SQL insert 
type: "GET", 
data: "val=" +selected.toString(), //The data your sending to some-page.php 
success: function(data1) { 
$("#resultDiv").html(data1); 
console.log("AJAX request was successfull"); 
}, 
error:function() 
{ 
console.log("AJAX request was a failure"); 
} 
}); 

//alert("You have selected " + selected); 
}else 
{ 
alert("Please at least one of the checkbox"); 
} 
}

來源

2013-08-20 05:02:28 Linkmichiel

是的，在螢火蟲控制檯中檢查它是否正確調用該文件 – steven

你的代碼似乎沒有任何問題，我在這裏得到ajax響應。 – Linkmichiel

+1爲您的努力 – steven

變化在你的代碼下面，在fetchdata.php

<?php 
$valArray = explode('@',$_GET['val']); 
foreach($valArray as $val){ 
echo $val."<br/>"; 
} 
?>

在HTML文件中，包括像

<div id="resultDiv"></div>

來源

2013-08-20 05:35:18 user2063756

嗨@srividhya沒有變化.. :(但螢火蟲控制檯說「Ajax請求成功」 –

在按鈕後添加一個div標籤，數據將被打印在div – user2063756

嗨@Srividya非常感謝你......最後工作謝謝...... :) –

如何將jquery值傳遞給php，而無需頁面加載

回答

相關問題