Как вставить выпадающий список PHP на страницу HTML / Javascript - PullRequest
Новая
       3

Как вставить выпадающий список PHP на страницу HTML / Javascript

2 голосов
/ 17 марта 2011

Хорошо, это мой второй пост, и ПОЖАЛУЙСТА, примите, что я полный новичок, готов учиться, тратить много часов на поиски ответов на разных сайтах, и я почти достиг того, что мне нужно (по крайней мере, дляэтот бит).

У меня есть веб-страница с целым рядом функций javascript, которые работают вместе для создания карты Google с различными строками и т. д. с помощью API карт Google.

У меня также естьБаза данных MySQL с некоторой информацией. Я создал скрипт PHP для динамического создания выпадающего списка с информацией из базы данных.(и этот бит, кажется, работает нормально) - http://www.bournvilleconservatives.com/temp/select.php

Теперь мне нужно сделать так, чтобы это выпадающее окно отображалось на странице HTML / Javascript, которая у меня уже есть, чтобы при выборе пользователем чего-либоиз списка он вызывает функцию javascript с выбранным значением.

Мне сказали, что мне нужно использовать AJAX, чтобы вставить поле, и использовать innerhtml, чтобы отобразить его, но я действительно не знаю, как,и мог бы сделать с примером чего-то похожего, чтобы помочь мне в моем пути.

Я бы поместил PHP на html-страницу, но эта страница фактически завернута в Joomla!Обертка, так что все довольно сложно.

Заранее спасибо.

Ответы [ 3 ]

2 голосов
/ 18 марта 2011

Решение jQuery

Если вы хотите использовать jQuery , это очень поможет вам в доступе к DOM, совершении Ajax-вызовов и прочем.Позвольте мне дать вам решение в jQuery:

Сначала поместите div в HTML (это сохранит ваше поле выбора): 

<div id="i_want_my_select_here"></div>

Затем поместите этот код в конец вашего HTMLbefore </body>. 

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('#i_want_my_select_here').load('/temp/select.php');
  });
</script>

В первый тег script мы включили библиотеку jQuery из CDN Google.Во втором мы пишем наш код Javascript / jQuery.Функция .load() упрощает вызов Ajax и загрузку ответа в элемент HTML.

Вы можете увидеть, что это гораздо проще, чем весь этот код в моем другом ответе:).

2 голосов
/ 17 марта 2011

Если вы используете прототип , вы можете использовать Ajax.Request или Ajax.Updater , поэтому у вас должен быть родительский div с любым иззаменить / вставить в.

Пример с запросом: 

new Ajax.Request('select.php', {
  method: 'post',
  onSuccess: function(r) {
    var select = r.responseText;
    $('parent_div').update(select);
  }
});

Пример с обновлением: 

new Ajax.Request('parent_div', 'select.php', { method: 'post' });
1 голос
/ 18 марта 2011

Во-первых, пример Ajax (взятый из tizag.com и изменен), код Javascript: 

var ajaxRequest;  // The variable that we will put an XMLHTTPRequest object in

//We try to create an XMLHTTPRequest object, 
//it is the object that lets us use Ajax

try{
    // Opera 8.0+, Firefox, Safari
    ajaxRequest = new XMLHttpRequest();
} catch (e){
    // Internet Explorer Browsers
    try{
        ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try{
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e){
            // Something went wrong
            alert("Your browser broke!");
            return false;
        }
    }
}

// Create a function that will receive data sent from the server
// and do stuff with it (this function will only run, 
// when the data arrives back from the server!)
ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4){ //if request is successful
           //HERE COMES THE DOM INSERTION
    }
}

//We call the PHP file
ajaxRequest.open("GET", "/temp/select.php", true);
ajaxRequest.send(null);

В основном произошло то, что через XMLHTTPRequest мы назвали ваш PHP-файл.Когда приходит ответ (вывод PHP-файла), ajaxRequest.onreadystatechange запускается мгновенно.Поэтому, что бы мы ни хотели сделать с полученными данными, мы должны сделать это в месте, которое я написал //HERE COMES THE DOM INSERTION.

Мы хотим вставить вывод в HTML.Чтобы выбрать самый простой маршрут, сначала создайте div / span в своем HTML в том месте, где вы хотите, чтобы ваш выбор отображался (очень важно определить идентификатор). 

<div id="i_want_my_select_here"></div>

Затем снова здесьJavascript, который заменяет //HERE COMES THE DOM INSERTION. 

//use the id to get Javascript access to the DIV
var div=document.getElementById('i_want_my_select_here');
//put the output of PHP into the div
div.innerHTML=ajaxRequest.responseText;
...