如何将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，而无需页面加载

回答

相关问题