ajax example

Простой запрос Ajax с помощью jQuery и PHP

Когда я начинал использовать JavaScript и JQuery, то был разочарован отсутствием простых примеров использования Ajax в jQuery.

Нужно понимать, что Ajax-запрос такой же, как и любой другой запрос. Единственным его отличием является то, что пользователю не нужно перезагружать страницу. Например, это позволит пользователю отправить данные формы без перехода на другую веб-страницу.

Пример запроса GET, отправленного с помощью jQuery и Ajax

В примере кода передаются три параметра:

• type : тип HTTP запроса. В этом примере я отправляю запрос GET. Если вы хотите отправить запрос POST, измените “GET” на “POST”.
• url : адрес,на который вы хотите отправить Ajax запрос. В нашем случае это страница “test.php”. Помните, что URL-адрес указывается относительно текущей страницы.
• success : функция, которая вызывается, если запрос был успешным. Она принимает параметр data, который будет содержать вывод страницы test.php. То есть, если test.php выводит строку “OK”, то параметр data будет содержать строку “OK”.

Поэкспериментируйте с приведённым выше кодом. Например, замените“GET” на “POST” и измените URL-адрес. Можно использовать инструменты разработчика, встроенные в Firefox / Chrome для отладки Ajax- запросов. Они доступны на вкладке «Сеть». Инструменты разработчика позволяют визуализировать запрос.

Что если мы захотим добавить параметры запроса GET к Ajax-запросу?

$.ajax(< type: "GET", url: 'test.php', data: , success: function(data) < alert(data); >>);

Я добавил новый параметр data. Это объект JavaScript, содержащий данные, которые передаем в запросе. Поскольку мы отправляем запрос GET, эти параметры будут автоматически добавлены к строке запроса: test.php?name=Wayne

Пример добавления нескольких параметров GET

$.ajax(< type: "GET", url: 'test.php', data: , success: function(data) < alert(data); >>);

Приведенный выше код отправит запрос GET к test.php?name=Wayne&age=27&country=Ireland

Поэкспериментируйте с кодом, чтобы разобраться в нём. Попробуйте добавлять и удалять параметры, чтобы понять, как отправлять данные с помощью jQuery и Ajax.

А если мы хотим отправить запрос POST к файлу submission.php ?

$.ajax(< type: "POST", url: 'submission.php', data: , success: function(data) < alert(data); >>);

Я изменил тип метода (с GET на POST) и URL-адрес (на submission.php). В этом примере параметры name и age будут отправлены как переменные POST. Это означает, что на странице submission.php их можно получить с помощью следующего кода:

$name = $_POST['name']; $age = $_POST['age'];

Если использовать запрос GET, то переменные будут отправлены через строку запроса. Обратиться к ним можно следующим образом:

$name = $_GET['name']; $age = $_GET['age'];

Последней частью паззла является функция success() . Она вызывается, если Ajax-запрос завершается успешно. В примере, приведенном выше, я вывожу результат в сообщении. Но в большинстве случаев вы будете использовать эту функцию для отображения уведомлений на странице. Например, если пользователь отправляет форму с помощью Ajax, тогда эта функция применяется для проверки ответа. А также для вывода сообщения о том, что данные формы успешно отправлены на сервер.

Надеюсь, эта статья помогла вам разобраться с основами Ajax-запросов!

Сергей Бензенко автор-переводчик статьи « Simple Ajax request example with JQuery and PHP »

Пожалуйста, оставьте ваши мнения по текущей теме статьи. За комментарии, подписки, отклики, дизлайки, лайки низкий вам поклон!

Источник

How to get value from ajax response in PHP

In this tutorial, we are going to learn how to get value from ajax response in PHP. Most of the ajax request is sent via get() method but here we will use the post() method because the post method is more secure than get method and does not allow data to be shown in the URL. As said earlier, we will send the ajax request first and take the response from the database in JSON format.

First, we must have the tables. Here I am using two tables, city and pin codes.

DDL information of the table ‘city’
—————————————-
CREATE TABLE `city` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`state_id` int(10) DEFAULT NULL,
`city_name` varchar(225) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=13 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci

DDL information of the table ‘pincodes’
————————————————–
CREATE TABLE `pincodes` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`city_id` int(10) DEFAULT NULL,
`pin_code` varchar(225) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=13 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci

As shown in the image above, we have to fetch the pin codes against the cities. As soon as we click on any city from the dropdown, it will fetch the Pincode related to that city.

How to get input data from the frontend using jquery

• We will get the input data using the id attribute of a field. In this example, we will get the city name using the id of the city field with the help of change function of jquery while changing city names in the dropdown lists and storing them in a variable inside the function.

• As we know ajax function has four parameters through which we can send ajax requests. Parameters are:- URL, type, data, datatype.

How to get value from ajax response inside the PHP script

• Now, we will check the city name inside the PHP scripts with the help of $_POST. If the city name exists, then we will execute the required query.

• If the result is found, then we will store the result in the pincode variable and if the result is not found or empty then we will store an alternative message in the pincode_error variable.

Complete Code:-

prepare("select * from pincodes where city_id='$city_name'"); $stmt->execute(); $pin_details = $stmt->fetch(PDO::FETCH_ASSOC); //fetch the value into an array if($pin_details=='')< $output['pincode_error'] = 'Data not available'; > else < $output['pincode'] = $pin_details['pin_code']; >echo json_encode($output); exit; > ?>      .container 
FETCH VALUE FROM DATABASE USING AJAX 

 
 
City*: prepare("select * from city order by id ASC"); $stmt1->execute(); $city_details = $stmt1->fetchAll(PDO::FETCH_ASSOC); ?> 
--Please Select-- '.$city['city_name'].''; > ?> 
 
 
Pincode*: 
 
  
    

NOTE*
——–
Download the bootstrap CSS and js files from google and include the path of the files in the href attribute of link tag and src attribute of the script tag respectively.

CONCLUSION:- I hope this article will help you to display data based on dropdown selection into a text field using ajax jquery in PHP. If you have any doubt then please leave your comment below.

Источник

How to send GET and POST AJAX request with JavaScript

AJAX is a web de­velopment technique­ that facilitates the exchange­ of data between the­ website visible on a use­r’s browser and its server-side­ database. This enables se­amless communication for optimal performance and use­r experience­.

JavaScript libraries or frame­works are commonly utilized by people­ to conveniently transmit AJAX reque­sts. Although it’s essential to recognize­ the significance of transmitting AJAX reque­sts with plain JavaScript as well.

To communicate with the server, use an object called XMLHttpRequest. It helps in sending and receiving data between the client-side and server-side.

In this tutorial, I show how you can send GET and POST AJAX requests with JavaScript and handle the request with PHP.

Contents

1. Create a Table

Create employee table and added some records.

CREATE TABLE `employee` ( `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT, `emp_name` varchar(80) NOT NULL, `salary` varchar(20) NOT NULL, `email` varchar(80) NOT NULL );

2. Database Configuration

Create a config.php for the database connection.

3. Create HTML layout

Create 3 input text elements for entering the name, salary, and email. And a button element.

Added onclick event on the button which calls insertNewEmployee() function.

List records in the using JavaScript and AJAX.

 Name: Salary: Email:  
 
 
Name
 
Salary
 
Email
 
 
 

4. Create a PHP file to handle AJAX request

Create ‘ajaxfile.php’ file to handle AJAX request.

For example purpose, I am handling both GET and POST requests in a single file.

GET request (fetch records)

Check if $_GET[‘request’] is set or not if set then assign $_GET[‘request’] to $request .

If $request == 1 then fetch all records from employee table and assign to $employeeData . Loop on the fetched records.

Initialize $response with id, emp_name, salary, and email keys.

Return $response Array in JSON format.

POST request (insert record)

If $request == 2 then read POST values using json_decode(file_get_contents(«php://input»)) .

Assign values to variables and prepare INSERT query.

If the INSERT query is executed successfully then return 1 otherwise 0 .

 // Fetch records if($request == 1) < // Select record $sql = "SELECT * FROM employee"; $employeeData = mysqli_query($con,$sql); $response = array(); while($row = mysqli_fetch_assoc($employeeData))< $response[] = array( "id" =>$row['id'], "emp_name" => $row['emp_name'], "salary" => $row['salary'], "email" => $row['email'], ); > echo json_encode($response); exit; > // Insert record if($request == 2)< // Read POST data $data = json_decode(file_get_contents("php://input")); $name = $data->name; $salary = $data->salary; $email = $data->email; // Insert record $sql = "insert into employee(emp_name,salary,email) values('".$name."',".$salary.",'".$email."')"; if(mysqli_query($con,$sql))< echo 1; >else < echo 0; >exit; >

5. How to make an AJAX request with JavaScript

Use XMLHttpRequest object to send AJAX request.

.open() – Methods takes 3 parameters –

1. Request method – GET or POST.
2. AJAX file path. Pass parameter with URL on GET request – ajaxfile.php?name=yogesh&city=bhopal .
3. It is an optional parameter that takes Boolean value true or false . Default value is true . Pass true for asynchronous and false for synchronous request.

.setRequestHeader() – This method is used to set Content-Type . By default, ‘application/x-www-form-urlencoded’ content-type is set. You can change its value e.g. – application/json , multipart/form-data , etc.

.onreadystatechange – This property calls on request state change. Assign an anonymous function to process the response. If this.readyState == 4 && this.status == 200 means the server response is ready for processing.

.send() – This method send AJAX request. It is also used to send data.

AJAX GET request JavaScript

var xhttp = new XMLHttpRequest(); xhttp.open("GET", "ajaxfile.php?request=1", true); xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); xhttp.onreadystatechange = function() < if (this.readyState == 4 && this.status == 200) < // Response var response = this.responseText; >>; xhttp.send();

Above syntax with jQuery

AJAX POST request JavaScript

application/x-www-form-urlencoded; charset=UTF-8 is a default Content-Type but you can use any other type e.g. – application/json , multipart/form-data , etc.

var xhttp = new XMLHttpRequest(); xhttp.open("POST", "ajaxfile.php", true); xhttp.setRequestHeader("Content-Type", "application/json"); xhttp.onreadystatechange = function() < if (this.readyState == 4 && this.status == 200) < // Response var response = this.responseText; >>; var data = ; xhttp.send(JSON.stringify(data));

Above syntax with jQuery

$.ajax(< url: 'ajaxfile.php', type: 'post', data: , success: function(response) < >>);

Create object of XMLHttpRequest . Specify GET request and AJAX file path with parameter ( ‘ajaxfile.php?request=1’ ) in .open() method. Set Content-type and handle server response with onreadystatechange property.

Loop on the response to read values. Create a new table row element and assign a response value in cell.

Read values from the textboxes and assign them in variables. If variables are not empty then create a data JSON object. Initialize data object with the textbox values.

Create XMLHttpRequest object and specify POST request and AJAX file path ( ‘ajaxfile.php’ ) in .open() method. Set Content-type to ‘application/json’ and handle server response with onreadystatechange property.

Assign this.responseText in response . If response == 1 then alert a message and call loadEmployees() function to fetch records.

loadEmployees(); // Send AJAX GET request with JavaScript function loadEmployees() < var xhttp = new XMLHttpRequest(); // Set GET method and ajax file path with parameter xhttp.open("GET", "ajaxfile.php?request=1", true); // Content-type xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); // call on request changes state xhttp.onreadystatechange = function() < if (this.readyState == 4 && this.status == 200) < // Parse this.responseText to JSON object var response = JSON.parse(this.responseText); // Select var empTable = document.getElementById("empTable").getElementsByTagName("tbody")[0]; // Empty the table empTable.innerHTML = ""; // Loop on response object for (var key in response) < if (response.hasOwnProperty(key)) < var val = responsePhp get ajax request data; // insert new row var NewRow = empTable.insertRow(0); var name_cell = NewRow.insertCell(0); var username_cell = NewRow.insertCell(1); var email_cell = NewRow.insertCell(2); name_cell.innerHTML = val['emp_name']; username_cell.innerHTML = val['salary']; email_cell.innerHTML = val['email']; >> > >; // Send request xhttp.send(); > // Send AJAX POST request with JavaScript (Insert new record) function insertNewEmployee() < var name = document.getElementById('txt_name').value; var salary = document.getElementById('txt_salary').value; var email = document.getElementById('txt_email').value; if(name != '' && salary !='' && email != '')< var data = ; var xhttp = new XMLHttpRequest(); // Set POST method and ajax file path xhttp.open("POST", "ajaxfile.php", true); // call on request changes state xhttp.onreadystatechange = function() < if (this.readyState == 4 && this.status == 200) < var response = this.responseText; if(response == 1)< alert("Insert successfully."); loadEmployees(); >> >; // Content-type xhttp.setRequestHeader("Content-Type", "application/json"); // Send request with data xhttp.send(JSON.stringify(data)); > >

6. Output

7. Conclusion

To have gre­ater control and flexibility in the imple­mentation of AJAX requests, it is crucial to unde­rstand how to send them without relying on JavaScript librarie­s or frameworks. While using such libraries may simplify the­ process, having a solid foundation in plain JavaScript enables a de­eper comprehe­nsion of the underlying mechanisms and boosts the­ capability to develop customized solutions.

The XMLHttpRe­quest object allows sending GET and POST re­quests to the serve­r, handling responses effe­ctively. This feature cre­ates endless possibilitie­s for developing dynamic user inte­rfaces, real-time data update­s, and seamless expe­riences for the use­r.

The ability to se­nd both GET and POST AJAX requests with JavaScript constitutes a crucial skill for any we­b developer. It e­nables them to create­ dynamic, interactive applications that seamle­ssly communicate with servers, the­reby heightening the­ overall user expe­rience. There­fore, keep honing this valuable­ skill by practising and exploring different possibilitie­s in your web developme­nt ventures.

Источник