尝试在selectize中将ajax值从php传递给jquery_Php_Jquery_Ajax_Selectize.js

尝试在selectize中将ajax值从php传递给jquery

php jquery ajax

尝试在selectize中将ajax值从php传递给jquery,php,jquery,ajax,selectize.js,Php,Jquery,Ajax,Selectize.js,我对jquery和ajax非常陌生。正在尝试实现selectize插件，该插件将查询数据库并以下拉方式返回值。为了做到这一点，下面是我的php代码，它从表中返回数据。如果我键入这个php页面的url并传递参数，它将以json格式返回数据。{“电影”：“价值1”}{“电影”：“价值2”} 下面是selectize插件中的jQuery代码 <!DOCTYPE html> <!--[if lt IE 7]><html class="no-js lt-ie9 lt-

我对jquery和ajax非常陌生。正在尝试实现selectize插件，该插件将查询数据库并以下拉方式返回值。为了做到这一点，下面是我的php代码，它从表中返回数据。如果我键入这个php页面的url并传递参数，它将以json格式返回数据。{“电影”：“价值1”}{“电影”：“价值2”}

下面是selectize插件中的jQuery代码

    <!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Selectize.js Demo</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/stylesheet.css">
        <!--[if IE 8]><script src="js/es5.js"></script><![endif]-->
        <script src="js/jquery.min.js"></script>
        <script src="../dist/js/standalone/selectize.js"></script>
        <script src="js/index.js"></script>
        <style type="text/css">
        .selectize-control.movies .selectize-dropdown [data-selectable] {
            border-bottom: 1px solid rgba(0,0,0,0.05);
            height: 60px;
            position: relative;
            -webkit-box-sizing: content-box;
            box-sizing: content-box;
            padding: 10px 10px 10px 60px;
        }
        .selectize-control.movies .selectize-dropdown [data-selectable]:last-child {
            border-bottom: 0 none;
        }
        .selectize-control.movies .selectize-dropdown .by {
            font-size: 11px;
            opacity: 0.8;
        }
        .selectize-control.movies .selectize-dropdown .by::before {
            content: 'by ';
        }
        .selectize-control.movies .selectize-dropdown .name {
            font-weight: bold;
            margin-right: 5px;
        }
        .selectize-control.movies .selectize-dropdown .description {
            font-size: 12px;
            color: #a0a0a0;
        }
        .selectize-control.movies .selectize-dropdown .actors,
        .selectize-control.movies .selectize-dropdown .description,
        .selectize-control.movies .selectize-dropdown .movies {
            display: block;
            white-space: nowrap;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .selectize-control.movies .selectize-dropdown .actors {
            font-size: 10px;
            color: #a0a0a0;
        }
        .selectize-control.movies .selectize-dropdown .actors span {
            color: #606060;
        }
        .selectize-control.movies .selectize-dropdown img {
            height: 60px;
            left: 10px;
            position: absolute;
            border-radius: 3px;
            background: rgba(0,0,0,0.04);
        }
        .selectize-control.movies .selectize-dropdown .meta {
            list-style: none;
            margin: 0;
            padding: 0;
            font-size: 10px;
        }
        .selectize-control.movies .selectize-dropdown .meta li {
            margin: 0;
            padding: 0;
            display: inline;
            margin-right: 10px;
        }
        .selectize-control.movies .selectize-dropdown .meta li span {
            font-weight: bold;
        }
        .selectize-control.movies::before {
            -moz-transition: opacity 0.2s;
            -webkit-transition: opacity 0.2s;
            transition: opacity 0.2s;
            content: ' ';
            z-index: 2;
            position: absolute;
            display: block;
            top: 12px;
            right: 34px;
            width: 16px;
            height: 16px;
            background: url(images/spinner.gif);
            background-size: 16px 16px;
            opacity: 0;
        }
        .selectize-control.movies.loading::before {
            opacity: 0.4;
        }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <h1>Selectize.js</h1>
            <div class="demo">
                <h2>Loading from API</h2>
                <p>This demo shows how to integrate third-party data, loaded asynchronously.</p>
                <div class="control-group">
                    <label for="select-movie">Movie:</label>
                    <select id="select-movie" class="movies" placeholder="Find a movie..."></select>
                </div>
                <script>
                // <select id="select-movie"></select>
                $('#select-movie').selectize({
                    valueField: 'movies',
                    labelField: 'movies',
                    searchField: 'movies',
                    options: [],
                    create: false,
                    render: {
                        option: function(item, escape) {
                                return '<div>' +
                                '<span class="movies">' +
                                    '<span class="name">' + escape(item.movies) + '</span>' +
                                '</span>' +
                            '</div>';
                        }
                    },
                    load: function(query, callback) {
                        if (!query.length) return callback();
                        $.ajax({
                            //url: 'http://api.rottentomatoes.com/api/public/v1.0/movies.json',
                            url:'http://localhost/selectize/examples/myphp.php?query='+ encodeURIComponent(query),
                            type: 'GET',
                            dataType: 'jsonp',
                            data: {
                                q: query,
                                //page_limit: 10,
                                //apikey: '3qqmdwbuswut94jv4eua3j85'
                            },
                            error: function() {
                                callback();
                            },
                            success: function(res) {
                                console.log(res);
                                callback(res);
                                alert(res);
                            }
                        });
                    }
                });
                </script>
            </div>
        </div>
    </body>
</html>


Selectize.js演示
.选择ize-control.movies.选择ize下拉列表[数据可选]{
边框底部：1px实心rgba（0,0,0,0.05）；
高度：60px；
位置：相对位置；
-webkit框大小：内容框；
框大小：内容框；
填充：10px 10px 10px 60px；
}
.selectize-control.movies.selectize下拉列表[数据可选]：最后一个子项{
边框底部：0无；
}
.selectize-control.movies.selectize下拉列表.by{
字体大小：11px；
不透明度：0.8；
}
.selectize-control.movies.selectize下拉列表.by:：before{
内容:"由";；
}
.selectize-control.movies.selectize下拉列表.name{
字体大小：粗体；
右边距：5px；
}
.selectize-control.movies.selectize下拉列表。说明{
字体大小：12px；
颜色：#A0；
}
.selectize-control.movies.selectize下拉列表.actors，
。选择ize-control.movies。选择ize下拉列表。说明，
。选择ize-control.movies。选择ize下拉列表。movies{
显示：块；
空白：nowrap；
宽度：100%；
溢出：隐藏；
文本溢出：省略号；
}
.selectize-control.movies.selectize下拉列表.actors{
字体大小：10px；
颜色：#A0；
}
.selectize-control.movies.selectize下拉列表。演员跨度{
颜色：#606060；
}
.选择ize-control.movies.选择ize下拉菜单img{
高度：60px；
左：10px；
位置：绝对位置；
边界半径：3px；
背景：rgba（0,0,0,0.04）；
}
.selectize-control.movies.selectize dropdown.meta{
列表样式：无；
保证金：0；
填充：0；
字体大小：10px；
}
.selectize-control.movies.selectize下拉列表.meta li{
保证金：0；
填充：0；
显示：内联；
右边距：10px；
}
.selectize-control.movies.selectize下拉列表.meta li span{
字体大小：粗体；
}
。选择控件。电影：：之前{
-moz转变：不透明度0.2s；
-webkit转换：不透明度0.2s；
过渡：不透明度0.2s；
内容：''；
z指数：2；
位置：绝对位置；
显示：块；
顶部：12px；
右：34px；
宽度：16px；
高度：16px；
背景：url（images/spinner.gif）；
背景尺寸：16px 16px；
不透明度：0；
}
。选择控件。电影。加载：：之前{
不透明度：0.4；
}
Selectize.js
从API加载
此演示演示如何集成异步加载的第三方数据
电影：
// 
$（“#选择电影”）。选择({
valueField:“电影”，
拉伯菲尔德：《电影》，
searchField:“电影”，
选项：[]，
创建：false，
呈现：{
选项：功能（项目，转义）{
返回“”+
'' +
''+逃生（物品.电影）+''+
'' +
'';
}
},
加载：函数（查询、回调）{
如果（！query.length）返回callback（）；
$.ajax({
//网址：'http://api.rottentomatoes.com/api/public/v1.0/movies.json',
网址：'http://localhost/selectize/examples/myphp.php?query=“+encodeURIComponent（查询），
键入：“GET”，
数据类型：“jsonp”，
数据：{
问:质疑,，
//页数限制：10页，
//apikey:'3qqmdwbuswut94jv4eua3j85'
},
错误：函数（）{
回调（）；
},
成功：功能（res）{
控制台日志（res）；
回收（res）；
警报（res）；
}
});
}
});

但是，现在我不知道如何使这项工作。我知道我是个新手，所以，请求帮助

只是澄清一下，我在html页面中没有看到任何错误。然而，参考资料页面显示了myphp.php和数据。请更清楚地了解您的预期结果。可能包括你的页面截图和一些关于错误的评论。我的代码不做任何事情，例如，它不会打开下拉列表或在控制台中显示任何错误。但是，会打开原始的selectize代码

    <!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Selectize.js Demo</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/stylesheet.css">
        <!--[if IE 8]><script src="js/es5.js"></script><![endif]-->
        <script src="js/jquery.min.js"></script>
        <script src="../dist/js/standalone/selectize.js"></script>
        <script src="js/index.js"></script>
        <style type="text/css">
        .selectize-control.movies .selectize-dropdown [data-selectable] {
            border-bottom: 1px solid rgba(0,0,0,0.05);
            height: 60px;
            position: relative;
            -webkit-box-sizing: content-box;
            box-sizing: content-box;
            padding: 10px 10px 10px 60px;
        }
        .selectize-control.movies .selectize-dropdown [data-selectable]:last-child {
            border-bottom: 0 none;
        }
        .selectize-control.movies .selectize-dropdown .by {
            font-size: 11px;
            opacity: 0.8;
        }
        .selectize-control.movies .selectize-dropdown .by::before {
            content: 'by ';
        }
        .selectize-control.movies .selectize-dropdown .name {
            font-weight: bold;
            margin-right: 5px;
        }
        .selectize-control.movies .selectize-dropdown .description {
            font-size: 12px;
            color: #a0a0a0;
        }
        .selectize-control.movies .selectize-dropdown .actors,
        .selectize-control.movies .selectize-dropdown .description,
        .selectize-control.movies .selectize-dropdown .movies {
            display: block;
            white-space: nowrap;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .selectize-control.movies .selectize-dropdown .actors {
            font-size: 10px;
            color: #a0a0a0;
        }
        .selectize-control.movies .selectize-dropdown .actors span {
            color: #606060;
        }
        .selectize-control.movies .selectize-dropdown img {
            height: 60px;
            left: 10px;
            position: absolute;
            border-radius: 3px;
            background: rgba(0,0,0,0.04);
        }
        .selectize-control.movies .selectize-dropdown .meta {
            list-style: none;
            margin: 0;
            padding: 0;
            font-size: 10px;
        }
        .selectize-control.movies .selectize-dropdown .meta li {
            margin: 0;
            padding: 0;
            display: inline;
            margin-right: 10px;
        }
        .selectize-control.movies .selectize-dropdown .meta li span {
            font-weight: bold;
        }
        .selectize-control.movies::before {
            -moz-transition: opacity 0.2s;
            -webkit-transition: opacity 0.2s;
            transition: opacity 0.2s;
            content: ' ';
            z-index: 2;
            position: absolute;
            display: block;
            top: 12px;
            right: 34px;
            width: 16px;
            height: 16px;
            background: url(images/spinner.gif);
            background-size: 16px 16px;
            opacity: 0;
        }
        .selectize-control.movies.loading::before {
            opacity: 0.4;
        }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <h1>Selectize.js</h1>
            <div class="demo">
                <h2>Loading from API</h2>
                <p>This demo shows how to integrate third-party data, loaded asynchronously.</p>
                <div class="control-group">
                    <label for="select-movie">Movie:</label>
                    <select id="select-movie" class="movies" placeholder="Find a movie..."></select>
                </div>
                <script>
                // <select id="select-movie"></select>
                $('#select-movie').selectize({
                    valueField: 'movies',
                    labelField: 'movies',
                    searchField: 'movies',
                    options: [],
                    create: false,
                    render: {
                        option: function(item, escape) {
                                return '<div>' +
                                '<span class="movies">' +
                                    '<span class="name">' + escape(item.movies) + '</span>' +
                                '</span>' +
                            '</div>';
                        }
                    },
                    load: function(query, callback) {
                        if (!query.length) return callback();
                        $.ajax({
                            //url: 'http://api.rottentomatoes.com/api/public/v1.0/movies.json',
                            url:'http://localhost/selectize/examples/myphp.php?query='+ encodeURIComponent(query),
                            type: 'GET',
                            dataType: 'jsonp',
                            data: {
                                q: query,
                                //page_limit: 10,
                                //apikey: '3qqmdwbuswut94jv4eua3j85'
                            },
                            error: function() {
                                callback();
                            },
                            success: function(res) {
                                console.log(res);
                                callback(res);
                                alert(res);
                            }
                        });
                    }
                });
                </script>
            </div>
        </div>
    </body>
</html>