У нас есть большая система PHP, которую я меняю на ООП и хочу использовать AJAX для обновления веб-страниц для зарегистрированных пользователей. Я полностью самоучкой и хорошо разбираюсь в HTML, CSS и PHP с базовым пониманием Javascript.
Попытка изучить AJAX с PHP поражает меня. Попробовав самодельный набор скриптов для тестирования AJAX, который не сработает, я тогда приведу в Интернет примеры и не могу заставить их работать. Это на моем развитии Mac работает с MAMP и использует мой хост, где мы храним текущую систему.
Мой вопрос заключается в том, что у кого-то есть простой набор скриптов HTML и PHP «hello world», которые они знают, что я могу попытаться подтвердить, что я могу запустить что-то известное.
Большое спасибо Colin
Если вы собираетесь использовать AJAX, я бы рекомендовал использовать jQuery. Это значительно упрощает процесс, проверяется кросс-браузер и имеет множество простых в использовании функций-оболочек.
Это действительно так же просто, как создание PHP-страницы с именем hello.php
<?php echo "Hello World"; ?> Затем на главной странице вам нужно будет захватить библиотеку jQuery и подключить ее к событию готовности документа.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $.get("hello.php", function(data){ alert(data); }); }); </script>
Это, по сути, самый простой учебник AJAX hello world, который я знаю 🙂
Нет, не очень, но я бы рекомендовал вам использовать jQuery, если вы собираетесь делать какой-либо аякс вообще. Это сделает вашу жизнь намного проще.
Тем более, что все браузеры не реализуют вещи ajax одинаково.
Я предполагаю, что у вас уже есть базовый html-документ, я просто собираюсь включить важные биты.
receiver.php:
<?php echo 'you just received me, I\'m some PHP code and ajax is definitely working...'; ?>
sender.html:
<p>Hello, click this button: <a id="button" href="receiver.php">Click me</a></p> <p id="container"><!-- currently it's empty --></p> <!-- including jQuery from the google cdn --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type="text/javascript"> // This is our actual script $(document).ready(function(){ $('a#button').click(function(){ $.ajax({ url: this.href, type: 'GET', dataType: 'html', success: function (data) { $('#container').html(data); } }); }); }); </script>
Это должно быть все, что вам нужно для базового приложения ajax …
Я бы предложил использовать методы jQuery AJAX , которые являются кросс-браузерными и простыми в использовании.
Вот базовый пример, который использует jQuery, размещение значений из формы в отдельный файл PHP проверяет и возвращает результаты.
form.php
<html> <head> <title>Simple JQuery Post Form to PHP Example</title> </head> <body> <!-- including jQuery from the google cdn --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"> </script> <!-- This div will be populated with error messages --> <div id="example_form_error"></div> <!-- This div will be populated with success messages --> <div id="example_form_success"></div> <!-- Here is your form --> <div id="example_form_enter"> <form id="contact_modal_form" method='post' action='form_post.php'> <label for="Name">Enter Your Name (Not "Adam"):</label> <input class='textbox' name='Name' type='text' size='25' required /> <button class='contact_modal_button' type='submit'>Send</button> </form> </div> <!-- This div contains a section that is hidden initially, but displayed when the form is submitted successfully --> <div id="example_form_confirmation" style="display: none"> <p> Additional static div displayed on success. <br> <br> <a href="form.php">Try Again</a> </p> </div> <!-- Below is the jQuery function that process form submission and receives back results --> <script> $(function() { $("#contact_modal_form").submit(function(event) { var form = $(this); $.ajax({ type: form.attr('method'), url: form.attr('action'), data: form.serialize(), dataType: 'json', success: function(data) { if(data.error == true) { var error = $("#example_form_error"); error.css("color", "red"); error.html("Not " + data.msg + ". Please enter a different name."); } else { $("#example_form_enter").hide(); $("#example_form_error").hide(); $("#example_form_confirmation").show(); var success = $("#example_form_success"); success.css("color", "green"); success.html("Success! You submitted the name " + data.msg + "."); } } }); event.preventDefault(); }); }); </script> </body> </html>
form_post.php
<?php // Request Post Variable $name = $_REQUEST['Name']; // Validation if($name == 'Adam') { echo json_error($_REQUEST['Name']); } else { echo json_success($_REQUEST['Name']); }; // Return Success Function function json_success($msg) { $return = array(); $return['error'] = FALSE; $return['msg'] = $msg; return json_encode($return); } // Return Error Function function json_error($msg) { $return = array(); $return['error'] = TRUE; $return['msg'] = $msg; return json_encode($return); } ?>