jQuery ajax获取对php的请求，未检索任何数据

Question

我正在尝试从段落的下拉列表中显示所选城市的全名。 但是jQuery ajax调用没有给出任何输出。

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Learn Javascript</title>
<script src="jquery-1.10.2.min.js"></script>
</head>
<body>
<select id="states">
<option> LDH </option>
<option> JLD </option>
<option> CHD </option>
</select>
<br/>
<p>The Full name is: <span id="fullname"></span></p>
<script>
$(document).ready(function() {
    $('#states').change(function() { 
    selectedState = $('#states option:selected').text();
    $.get('learn.php?state='+selectedState, function(data) {
        $('#fullname').html(data);      
    });
        });
});
</script>
</body>
</html>

学习.php

<?php 

 switch ($_GET['state']) {
     case 'LDH' : 
     echo 'Ludhiana';
     break;
     case 'JLD' :
     echo 'Jalandhar';
     break;
     case 'CHD' :
     echo 'Chandigarh';
     break;  
 }
?>

当下拉状态更改时，应该通过从php文件中检索数据来打印所选城市的全名。

Answer 1

您能提醒格式化的URL还是登录$.get() .fail()控制台

$('#states').change(function() { 
    selectedState = $(this).val();
    url = 'learn.php?state=' + selectedState;
    alert(url);
    $.get(url, function(data) {

        $('#fullname').text(data);      
    })
    .fail(function(xhr, status, error) {
        console.log(xhr.status);
        console.log(error);
    });
});

Answer 2

您的文本（即选项文本）中有空格。

因此，始终使用值属性。

将您的代码更改为

    <select id="states">
        <option>LDH</option>
        <option>JLD</option>
        <option>CHD</option>
    </select>

Answer 3

问题出在option标签内您的空格。

您可以使用以下两种方法中的一种来获得结果

方法1：

<select id="states">
<option value="LDH"> LDH </option>
<option value="JLD"> JLD </option>
<option value="CHD"> CHD </option>
</select>

并在jQuery中更改从

selectedState = $('#states option:selected').text();

至

selectedState = $('#states option:selected').val();

方法2

在PHP文件中使用trim（）方法

switch (trim($_GET['state']))

睾丸小提琴是

jQuery ajax获取对php的请求，未检索任何数据

问题描述

3 个解决方案

解决方案1
1 2013-10-30 07:20:19

解决方案2
1 2013-10-30 07:41:35

解决方案3
1 已采纳 2013-10-30 08:00:35

jQuery ajax获取对php的请求，未检索任何数据

问题描述

3 个解决方案

解决方案1 1 2013-10-30 07:20:19

解决方案2 1 2013-10-30 07:41:35

解决方案3 1 已采纳 2013-10-30 08:00:35

解决方案1
1 2013-10-30 07:20:19

解决方案2
1 2013-10-30 07:41:35

解决方案3
1 已采纳 2013-10-30 08:00:35