Отправка файла через Ajax. Javascript Ajax

Вначале нужно подключить сам scriptjava фреймворк
<script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>

Для отправки файлов серверу есть такая форма
<form id="test_form" method="post" enctype="multipart/form-data">
<input type="file" name="upload_file" />
</form><br /><br />
<div id="status">Тут будет статус загрузки</div><br /><br />
<div onclick="SendFile();">Отправить файл через Ajax</div><br />

Пишем для него функцию отправки
<script type="text/javascript">
	function SendFile() {
	    $$f({
	        formid:'test_form',//id формы
	        url:'ajax.php',//адрес на серверный скрипт который будет принимать файл
	        onstart:function () {//действие при начале отправки файла на сервер
	            $$('status','начинаю отправку файла');
	        },
	        onsend:function () {//действие по окончании отправки файла на сервер
	            $$('status',$$('status').innerHTML+'<br />файл успешно загружен');
	        }
	    });
	}
</script>

Чтобы получить ответ от сервера, содержимое файла ajax.php может быть таким:
<?php
	    if($_FILES['upload_file']['size']>0) {
	        echo '
	            <script type="text/javascript">
	            var elm=parent.window.document.getElementById("status");
	            elm.innerHTML=elm.innerHTML+"<br />Получен файл '.$_FILES['upload_file']['name'].' размером '.$_FILES['upload_file']['size'].' байт";
	            </script>
	        ';
	    }
?>

Отправка формы через Ajax.

Вначале нужно подключить сам scriptjava фреймворк
<script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>

Допустим на странице сайта у нас есть форма
<form id="test_form" action="comment.php" method="post">
	    Имя: <input type="text" name="name" /><br />
	    Комментарий: <textarea name="comment"></textarea>
	</form><br />
<div id="result">Тут будет статус загрузки</div><br /><br />
<div onclick="SendForm();">Отправить форму через Ajax</div><br />

Ее можно отправить на сервер через AJAX с помощью кода
<script type="text/javascript">
	function SendForm() {
	    //отправка файла на сервер
	    $$f({
	        formid:'test_form',//id формы
	        url:'comment.php',//адрес на серверный скрипт, такой же как и в форме
	        onstart:function () {//действие при начале отправки
	            $$('result','начинаю отправку');//в элемент с id="result" выводим результат
	        },
	        onsend:function () {//действие по окончании отправки
	            $$('result',$$('result').innerHTML+'<br />комментарий успешно отправлен');//в элемент с id="result" выводим результат
	        }
	    });
	}
</script>

Чтобы получить ответ от сервера, содержимое файла comment.php может быть таким:
<?php
	if(isset($_POST['name'])) {
	    echo'
	        <script type="text/javascript">
	        var elm=parent.window.document.getElementById("result");
	        elm.innerHTML=elm.innerHTML+"<br />Получено имя '.str_replace("\r","",str_replace("\n","<br />",htmlspecialchars(stripslashes($_POST['name'])))).' с текстом '.str_replace("\r","",str_replace("\n","<br />",htmlspecialchars(stripslashes($_POST['comment'])))).' ";
	        </script>
	    ';
	}
?>

Отправка GET, POST, HEAD запросов через AJAX

Вначале нужно подключить сам scriptjava фреймворк
<script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>

Поместим на сайт такой html код
<div id="result">Тут будет ответ от сервера</div><br /><br />
<div onclick="SendGet();">Отправить GET запрос через Ajax</div><br />
<div onclick="SendPost();">Отправить POST запрос через Ajax</div><br />
<div onclick="SendHead();">Отправить HEAD запрос через Ajax</div><br />

Пишем код
<script type="text/javascript">
	function SendGet() {
	    //отправляю GET запрос и получаю ответ
	    $$a({
	        type:'get',//тип запроса: get,post либо head
	        url:'ajax.php',//url адрес файла обработчика
	        data:{'q':'1'},//параметры запроса
	        response:'text',//тип возвращаемого ответа text либо xml
	        success:function (data) {//возвращаемый результат от сервера
	            $$('result',$$('result').innerHTML+'<br />'+data);
	        }
	    });
	}

	function SendPost() {
	    //отправляю POST запрос и получаю ответ
	    $$a({
	        type:'post',//тип запроса: get,post либо head
	        url:'ajax.php',//url адрес файла обработчика
	        data:{'z':'1'},//параметры запроса
	        response:'text',//тип возвращаемого ответа text либо xml
	        success:function (data) {//возвращаемый результат от сервера
	            $$('result',$$('result').innerHTML+'<br />'+data);
	        }
	    });
	}

	function SendHead() {
	    //отправляю HEAD запрос и получаю заголовок
	    $$a({
	        type:'head',//тип запроса: get,post либо head
	        url:'ajax.php',//url адрес файла обработчика
	        response:'text',//тип возвращаемого ответа text либо xml
	        success:function (data) {//возвращаемый результат от сервера
	            $$('result',$$('result').innerHTML+'<br />'+data);
	        }
	    });
	}
</script>

Содержимое файла ajax.php
<?php
	if(isset($_GET['q'])) {
	    header("Content-type: text/txt; charset=UTF-8");
	    if($_GET['q']=='1') {
	        echo 'запрос GET успешно обработан, q = 1';
	    }
	    else {
	        echo 'карявый GET запрос';
	    }
	}
	if(isset($_POST['z'])) {
	    header("Content-type: text/txt; charset=UTF-8");
	    if($_POST['z']=='1') {
	        echo 'запрос POST успешно обработан, z = 1';
	    }
	    else {
	        echo 'карявый POST запрос';
	    }
	}
?>

Подробный мануал на русском
http://scriptjava.net/

Теги:
Отправка файла, Ajax
Добавлено: 12 Июля 2018 07:45:02 Добавил: Андрей Ковальчук Нравится 0
Добавить
Комментарии:
Нету комментариев для вывода...