douyi1939
douyi1939
2017-03-09 23:31

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

已采纳

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.

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • douyicao2199 douyicao2199 4年前

    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>
    
    点赞 评论 复制链接分享
  • dp198879 dp198879 4年前

    use GET method instead POST :

    if(isset($_GET['option']))
    {
        $option = $_GET['option'];
        ...
    }
    
    点赞 评论 复制链接分享