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

Хорошо, это мой второй пост, и, пожалуйста, примите, что я полный новичок, готовый учиться, тратя много часов на различные сайты для ответов, и я почти добрался туда, где мне нужно быть (по крайней мере, для этого бита).

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

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

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

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

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

Заранее благодарю.

3 2
javascript mysql php ajax innerhtml

3 ответа:

Решение JQuery

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

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

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

Затем поместите этот код в конец вашего HTML перед </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>

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

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

2

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

Пример w / Request: 

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

Пример w / Updater: 

new Ajax.Request('parent_div', 'select.php', { method: 'post' });
2

Во-первых, пример 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;
1