Создайте небольшое приложение для телефонной книги, которое позволит вам создавать и удалять людей.
Интерфейс должен представлять собой простую страницу с интерфейсом для создания нового человека. Интерфейс должен иметь три поля: имя, фамилию и номер телефона, а также кнопку отправки. Также должен быть список людей. Список должен быть упорядочен по фамилии в порядке возрастания, а также должен содержать кнопку удаления, удаляющую пользователя. Кнопка удаления должна находиться в правой части списка, а цвет фона в списке должен меняться в зависимости от нечетного/четного.
Javascript должен выполнять базовую проверку формы, и все сохранения/удаления должны быть делается через AJAX.
PHP должен обрабатывать получение всех людей, добавление и удаление людей из базы данных.
Это это то, что у меня есть на данный момент для HTML-части:

Может ли кто-нибудь показать мне, как вводимые данные будут обрабатываться с помощью PHP и AJAX/jQuery?
$(document).ready(function() {
//##### send add record Ajax request to response.php #########
$("#FormSubmit").click(function(e) {
e.preventDefault();
if ($("#firstnameText").val() === '') {
alert("Please enter some text!");
return false;
}
$("#FormSubmit").hide(); //hide submit button
$("#LoadingImage").show(); //show loading image
var myData = 'firstname_txt=' + $("#firstnameText").val(); //build a post data structure
jQuery.ajax({
type: "POST", // HTTP method POST or GET
url: "response.php", //Where to make Ajax calls
dataType: "text", // Data type, HTML, json etc.
data: myData, //Form variables
success: function(response) {
$("#responds").append(response);
$("#firstnameText").val(''); //empty text field on successful
$("#FormSubmit").show(); //show submit button
$("#LoadingImage").hide(); //hide loading image
},
error: function(xhr, ajaxOptions, thrownError) {
$("#FormSubmit").show(); //show submit button
$("#LoadingImage").hide(); //hide loading image
alert(thrownError);
}
});
});
//##### Send delete Ajax request to response.php #########
$("body").on("click", "#responds .del_button", function(e) {
e.preventDefault();
var clickedID = this.id.split('-'); //Split ID string (Split works as PHP explode)
var DbNumberID = clickedID[1]; //and get number from array
var myData = 'recordToDelete=' + DbNumberID; //build a post data structure
$('#firstname_' + DbNumberID).addClass("sel"); //change background of this element by adding class
$(this).hide(); //hide currently clicked delete button
jQuery.ajax({
type: "POST", // HTTP method POST or GET
url: "response.php", //Where to make Ajax calls
dataType: "text", // Data type, HTML, json etc.
data: myData, //Form variables
success: function(response) {
//on success, hide element user wants to delete.
$('#firstname_' + DbNumberID).fadeOut();
},
error: function(xhr, ajaxOptions, thrownError) {
//On error, we alert user
alert(thrownError);
}
});
});
});
Подробнее здесь: https://stackoverflow.com/questions/286 ... p-and-ajax
Мобильная версия