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>

learn.php

<?php 

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

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

Answer 1

您可以在$.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

问题在于选项标签内的空格。

你可以通过以下两种方法使用一种方法得到结果

方法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']))

teste fiddle是

jQuery ajax获取请求php不检索任何数据

3 个答案: