0

ページをリロードせずに「選択された」jquery値をfetchdata.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 ファイルで値を取得していません。

4

3 に答える 3

0

コードの fetchdata.php で次のように変更します。

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

htmlファイルで、

$(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");   
}
}

のようなボタンの後にdivを含めます

<div id="resultDiv"></div>
于 2013-08-20T05:35:18.457 に答える