Question

我对JQuery / JSON请求完全陌生。下面的代码是2天工作的结果，我完全难过！

基本上我有一张表格要求

人数
绘画大小
绘画颜色（B，C）IE黑/白或颜色

在选择下拉列表然后单击颜色单选按钮后，它会向getdata.php?getIDandPrice=C发送JSON请求

我想要实现的是它将根据之前的条目提出此请求：

getdata.php?getIDandPrice=1-2x2-C

（即人数 - 大小 - 颜色）

感谢您的帮助

<select id="howmanypeople" name="howmanypeople">
    <option value="" selected="selected">Select how many people</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

<select id="size" name="size">
    <option value="" selected="selected">Select size</option>
    <option value="1x1">1x1</option>
    <option value="2x2">2x2</option>
</select>


<label><input type="radio" name="getIDandPrice" value="B" id="method2"/>Black & White</label>
<label><input type="radio" name="getIDandPrice" value="C" id="method2"/>Color</label>  
<label><input type="radio" name="getIDandPrice" value="B" id="method2"/>Black & White</label>    

<div id="post_id"></div>
<div id="_regular_price"></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('input[name=getIDandPrice]').click(function() {
MethodTwo();
});
});

//Method 2

document.getElementById('getIDandPrice').value = product(2, 3);
function MethodTwo()
{
$.getJSON("getdata.php?getIDandPrice=C", function(response) {
        $('#post_id').html(response.post_id);
        $('#_regular_price').html(response._regular_price);
});
}
</script>

以下是I Can Has Cheezburger的最终工作代码

<!-- http://stackoverflow.com/questions/7191910/loading-json-data-with-jquery-php-and-mysql-for-radio-buttons -->
<select id="howmanypeople" name="howmanypeople"> 
    <option value="" selected="selected">Select how many people</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

<select id="size" name="size">
    <option value="" selected="selected">Select size</option>
    <option value="1x1">1x1</option>
    <option value="3x3">3x3</option>
</select>
        <label><input type="radio" name="color" value="B" id="color"/>Black & White</label>
        <label><input type="radio" name="color" value="C" id="color"/>Color</label>


<div id="post_id"></div>
<div id="_regular_price"></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('input[name=color]').click(function() {
    MethodTwo();
    });
    $('select[name=size]').click(function() {
    MethodTwo();
    });
    $('select[name=howmanypeople]').click(function() {
    MethodTwo();
    });
});


//Method 2
function MethodTwo()
{
//getting the selected value of select#howmanypeople
var people_no = $('#howmanypeople').val();
//getting the selected value of select#size
var size = $('#size').val();
//getting the selected value of select#size
var color = $('#color:checked').val();
//concatenating the values for the URL to look as 
//getdata.php?getIDandPrice=1-2x2-C
$.getJSON("getdata.php?getIDandPrice="+people_no+"-"+size+"-"+color, function(response) {
        $('#post_id').html(response.post_id);
        $('#_regular_price').html(response._regular_price);
    });
}</script>
</body>
</html>

Answer 1

如果我做对了，你想传递值C和两个选择选项，你可以这样做：

function MethodTwo()
{
//getting the selected value of select#howmanypeople
var people_no = $('#howmanypeople').val();
//getting the selected value of select#size
var size = $('#size').val();
//concatenating the values for the URL to look as 
//getdata.php?getIDandPrice=1-2x2-C
$.getJSON("getdata.php?getIDandPrice="+people_no+"-"+size+"-C", function(response) {
        $('#post_id').html(response.post_id);
        $('#_regular_price').html(response._regular_price);
    });
}

在PHP方面，您必须执行以下操作：

$var = $_GET['getIDandPrice'];
//explode() will break the text at the hyphen `-`
$var_arr = explode("-",$var);
//$var_arr[0] = 1, $var_arr[1] = 2x2, $var_arr[2] = C

Answer 2

传递您需要在后端处理的输入值：

$.getJSON("getdata.php?getIDandPrice=C", 
    {
        howMany : $('howmanypeople').val(),
        size : $('size').val(),
    },
    function(response) {
        $('#post_id').html(response.post_id);
        $('#_regular_price').html(response._regular_price);
});

文档有几个例子：

http://api.jquery.com/jquery.getjson/

JSON获取表单数据的请求

2 个答案: