JSON 获取表单数据请求

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

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

$.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/

Answer 2

如果我猜对了，你想传递值 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