Question

我尝试从选项选择器

发送数据

<select id="city">
    <option value="{'city':'melbourne','lat':'-37.8602828','long':'144.9631'}">Melbourne</option>

通过AJAX POST

$.ajax({
    method: "POST",
    url: "action.php",
    dataType: "json",
    data: {
        city: $('#city option:selected').val()
    },
})

但是我在$_POST中有一个空的action.php。通过AJAX请求发送所选选项的值的正确方法是什么？

Answer 1

您在选项值属性

中缺少="

<select id="city">
    <option value="{'city':'melbourne','lat':'-37.8602828','long':'144.9631'}">Melbourne</option>

另外，您可以直接访问选择值：

$.ajax({
    method: "POST",
    url: "action.php",
    dataType: "json",
    data: {
        city: $('#city').val()
    },
})

在PHP级别，您必须解码$_POST['city']的值以获取映射的PHP数组：

$city = json_decode($_POST['city']);

Answer 2

请你尝试修改你的HTML：

<option value='{"city":"melbourne","lat":"-37.8602828","long":"144.9631"}'>Melbourne</option>

value属性值在单引号内，JSON数据的键值对用双引号。

同样，一旦您按.val()抓取所选值，我们实际上会在发送之前获取string类型的数据;你需要通过$.parseJSON(str_value)

解析它

$(document).ready(function() {
  var str_value = $('#city option:selected').val();
  alert(str_value);
  alert("typeof str_value: " + typeof str_value);
  var jsonData = $.parseJSON(str_value);
  console.log(jsonData);
  alert("city " + jsonData["city"]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select id="city">
  <option value='{"city":"melbourne","lat":"-37.8602828","long":"144.9631"}'>Melbourne</option>
  <option value='{"city":"melbourne1","lat":"-37.8602828","long":"144.9631"}'>Melbourne1</option>
</select>

通过AJAX发送JSON数据

2 个答案: