如何将参数从下拉列表成功传输到php文件？

Question

I have a Bootstrap dropdown list and when the end user select one of the items I want to pass the parameter option indicated on the href attribute to my php file rssnews.inc.php, my dropdown list look like:

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Select<span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" id="rubChoice">
        <li><a href="/rss/core/inc/rssnews.inc.php?option=sport" id="act1" data-item="Sport">Sport</a></li>
        <li><a href="/rss/core/inc/rssnews.inc.php?option=politique" id="act2"  data-item="Politique">Politique</a></li>
        <li><a href="/rss/core/inc/rssnews.inc.php?option=international" id="act3"  data-item="International">International</a></li>
        <li><a href="/rss/core/inc/rssnews.inc.php?option=divers" id="act4"  data-item="Divers">Divers</a></li>
    </ul>
</div>

my rssnews.inc.php file look like:

    function getFeed() 
    {
        if (isset($_POST['option'])) {
            $option = $_POST['option'];

            switch ($option) {
                case "sport":
                    $url = 'http://feeds.feedburner.com/GalerieArtciles';
                    echo 'Du sport'.$url;
                    break;
                case "international":
                    $url = 'http://feeds.bbci.co.uk/news/rss.xml?edition=int#';
                    echo 'Du international'.$url;
                    break;
                case "politique":
                    $url = 'http://www.elkhabar.com/feeds/';
                    echo 'du politique'.$url;
                    break;
                default: $url = 'http://feeds.bbci.co.uk/news/rss.xml?edition=int#';
                    break;
            }
        } else {
            echo "there is error"; 
        }

       $content = file_get_contents($url);
    $data = simplexml_load_string($content);
    $articles= array();

    foreach( $data->channel->item as $item){

        $articles[]=array(
            'title'         =>  (string)$item->title,
            'description'   =>  (string)$item->description,
            'link'          =>  (string)$item->link,
            'Date'          =>  (string)$item->pubDate,
        );
    }

     $articalesArr = array();
    foreach($articles as $article){
        array_push($articalesArr, $article['title']);    
    }

    return json_encode($articles);
}
if(isset($_GET['function']) && $_GET['function'] !=''){

    $result = $_GET['function']();
    echo json_encode($result);
    header("Content-type:application/json");
} 
    }

To execute this function I have a button with id="start" and when end user click on it make an AJAX call:

<button type="submit" class="btn btn-default btn-success col-xs-3" id="start"> <i class="fa fa-play"></i>Start</button>

the AJAX call:

$('#start').click(function(){
            var $item = $('#test');
                $.ajax({
                    type:'GET',
                    url: '/rss/core/inc/rssnews.inc.php?function=getFeed',
                    //dataType: 'json',
                    success: function (data){
                    var articles = $.parseJSON(data);
                    $.each (articles, function (key, value) { 
                        $item.append('<div id="item" style="border-bottom:1px dashed #ccc; padding-top:10px; padding-right: 10px;"><ul><li><h4>'+ value.title +'</h4></li> <li>'+ value.description+'</li><li><a href="'+value.link+'">Lire+</a></li></ul>');
                        console.log('success',data);

                    });

                    }
                });
            });

Once I execute the code, I get this message "there is error". So, How can I transfer successfully a parameter from dropdown list to a php file ? Knowing that the scenario I follow is: 1. End user select a topic with dropdown list 2. the topic choosen correspond to a URL 3. function getFeed() fetch the rss feed 4. when end user click on start button rss is fetched and data displayed on a div element Any Help I appreciate it.

Answer 1

Updated my answer since you edited your question...

This is working now:

rssnews.inc.php

function getFeed()
{

    if (isset($_POST['option'])) {
        $option = $_POST['option'];

        // dont echo strings here since you want to output json at the end
        switch ($option) {
            case "sport": // this is case sensitive. Your dta-item attributes had capital letter
                $url = 'http://feeds.feedburner.com/GalerieArtciles';
                //echo 'Du sport'.$url; 
                break;
            case "international":
                $url = 'http://feeds.bbci.co.uk/news/rss.xml?edition=int#';
                //echo 'Du international'.$url;
                break;
            case "politique":
                $url = 'http://www.elkhabar.com/feeds/';
                //echo 'du politique'.$url;
                break;
            default: $url = 'http://feeds.bbci.co.uk/news/rss.xml?edition=int#';
                break;
        }
    } else {
        echo "there is error";
    }

    $content = file_get_contents($url);
    $data = simplexml_load_string($content);
    $articles= array();

    foreach( $data->channel->item as $item){

        $articles[]=array(
            'title'         =>  (string)$item->title,
            'description'   =>  (string)$item->description,
            'link'          =>  (string)$item->link,
            'Date'          =>  (string)$item->pubDate,
        );
    }

    $articalesArr = array();
    foreach($articles as $article){
        array_push($articalesArr, $article['title']);
    }

    return json_encode($articles);
}
if(isset($_GET['function']) && $_GET['function'] !=''){

    $result = $_GET['function']();
    header("Content-type:application/json"); // this one must be called before echoing
    echo json_encode($result);
}

HTML + Javascript code

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Select<span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" id="rubChoice">
        <li><a role="button" id="act1" data-item="sport">Sport</a></li> 
        <!-- a link is a link, if you click it, it will open url. So remove href and add role="button" to keep it valid html -->
        <li><a role="button" id="act2"  data-item="politique">Politique</a></li>
        <li><a role="button" id="act3"  data-item="international">International</a></li>
        <li><a role="button" id="act4"  data-item="divers">Divers</a></li>
    </ul>
</div>

<div id="test">

</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script type="text/javascript">
    $(document).ready(function(){

        $('#rubChoice li').click(function(event){ // more convenient to take the list item as selector

            event.preventDefault(); // prevent link opening

            var $item = $('#test');
            $.ajax({
                type:'POST', // change to post
                url: './rssnews.inc.php?function=getFeed',
                dataType: 'json', // you're expecting json...
                data: {"option":$(this).find('a').attr('data-item')},
                success: function (data){
                    var articles = $.parseJSON(data);
                    $.each (articles, function (key, value) {
                        $item.append('<div id="item" style="border-bottom:1px dashed #ccc; padding-top:10px; padding-right: 10px;"><ul><li><h4>'+ value.title +'</h4></li> <li>'+ value.description+'</li><li><a href="'+value.link+'">Lire+</a></li></ul>');
                        console.log('success',data);

                    });

                }
            });
        });

    });
</script>