{"id":28796452,"url":"https://github.com/raicleycs/jquery_ajax","last_synced_at":"2025-07-12T01:33:32.880Z","repository":{"id":296860286,"uuid":"994743593","full_name":"raicleycs/jQuery_Ajax","owner":"raicleycs","description":"Simple CRUD app using jQuery and AJAX, with JSON Server as a fake API. Allows dynamic user creation, listing, editing, and deletion. ","archived":false,"fork":false,"pushed_at":"2025-06-02T13:53:21.000Z","size":20,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-18T04:01:48.726Z","etag":null,"topics":["ajax","css3","html5","javascript","jquery"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/raicleycs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-02T12:16:24.000Z","updated_at":"2025-06-02T13:55:34.000Z","dependencies_parsed_at":"2025-06-03T02:24:10.261Z","dependency_job_id":null,"html_url":"https://github.com/raicleycs/jQuery_Ajax","commit_stats":null,"previous_names":["raicleycs/jquery_ajax"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/raicleycs/jQuery_Ajax","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raicleycs%2FjQuery_Ajax","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raicleycs%2FjQuery_Ajax/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raicleycs%2FjQuery_Ajax/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raicleycs%2FjQuery_Ajax/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/raicleycs","download_url":"https://codeload.github.com/raicleycs/jQuery_Ajax/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raicleycs%2FjQuery_Ajax/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264923153,"owners_count":23683717,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ajax","css3","html5","javascript","jquery"],"created_at":"2025-06-18T04:00:47.393Z","updated_at":"2025-07-12T01:33:32.856Z","avatar_url":"https://github.com/raicleycs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003e [!WARNING]\n\u003e # English\n\n# CRUD with jQuery and AJAX\n\u003ctable\u003e\n\u003ctd\u003e\nThis project demonstrates how to build a simple web application that performs CRUD operations (Create, Read, Update, Delete) using jQuery for DOM manipulation and AJAX calls to interact with a RESTful API.   \n\u003c/td\u003e\n\u003c/table\u003e\n\n\u003e [!IMPORTANT]\n\u003e ## Features \n\u003e- List registered users\n\u003e- Create new user\n\u003e- Edit existing user\n\u003e- Delete user\n\u003e- Interface updates without page reload (AJAX\n\u003e- Visual feedback for operations (success/error messages)\n\u003e## Technologies Used\n\u003e - HTML5\n\u003e - CSS3 (for layout)\n\u003e - JavaScript (jQuery 3.6.0)\n\u003e - JSON Server (REST API for testing)\n\n## How to Run the Project\n\u003ctable\u003e\n  \u003ctd\u003e\n    \n### Prerequisites\n\n- Node.js installed (to run JSON Server)\n\n- Code editor (VSCode, Sublime, etc.)\n\n- Web browser (Chrome, Firefox, Edge)\n    \n\n\n### Steps\nClone this repository or copy the files to your machine:\n```\nhttps://github.com/raicleycs/jQuery_Ajax.git\n```\n\nInstall JSON Server globally:\n\n```\nnpm install -g json-server\n```\nCreate a file named db.json with the following content:\n```\n{\n  \"users\": [\n    { \"id\": 1, \"name\": \"João\", \"email\": \"joao@example.com\" },\n    { \"id\": 2, \"name\": \"Maria\", \"email\": \"maria@example.com\" }\n  ]\n}\n```\nNavigate to the folder containing db.json: ```db.json```\n```\ncd db\n```\nRun JSON Server on port 3000:\n\n```\njson-server --watch db.json --port 3000\n```\n\n- Open the index.html file in your browser.\n\n- Use the form to create or edit users.\n\n- Use the \"Edit\" and \"Delete\" buttons to modify the listed users.\n  \n  \u003c/td\u003e\n\u003c/table\u003e\n\n## File Structure\n\u003ctable\u003e\n  \u003ctd\u003e\n    \n- [x] index.html — Main page with form and table to list users\n\n- [x] app.js — JavaScript file containing all CRUD logic using jQuery and AJAX\n\n- [x]  db.json — JSON Server file with initial data (see example in db/db.json) ``` db/db.json ```).\n\n- [x]  style.css - Page styling\n\n  \u003c/td\u003e\n\u003c/table\u003e\n\n\u003e [!NOTE]\n\u003e ## Code Explanation\n\u003e - List: On page load, users are fetched using AJAX (GET /users) and displayed in the table\n\u003e - Create: Form data is sent via AJAX (POST /users)\n\u003e - Edit: User is fetched by ID (GET /users/:id) and form is pre-filled\n\u003e - Update: Updated data sent via AJAX (PUT /users/:id)\n\u003e - Delete: User deleted via AJAX (DELETE /users/:id)\n\u003e - Success/error messages are shown after each operation\n\n\n\u003e [!TIP] \n\u003e ## Suggested Improvements for Practice\n\u003e - Add pagination for large datasets\n\u003e - Enhance UI with CSS frameworks like Bootstrap\n\u003e - Integrate real public APIs for hands-on learning\n\u003e - Add authentication and route protection\n\n\n# References\n- [jQuery AJAX Documentation](https://api.jquery.com/jquery.ajax/)\n- [JSON Server GitHub](https://github.com/typicode/json-server)\n- [JSONPlaceholder API](https://jsonplaceholder.typicode.com/)\n\n\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n\u003e [!WARNING]\n\u003e # Português \n# CRUD com jQuery e AJAX\n\u003ctable\u003e\n\u003ctd\u003e\n\n  Este projeto demonstra como criar uma aplicação web simples que realiza operações CRUD (Criar, Ler, Atualizar, Excluir) utilizando jQuery para manipulação do DOM e chamadas AJAX para consumir uma API RESTful.    \n\n\u003c/td\u003e\n\u003c/table\u003e\n\n\u003e [!IMPORTANT]\n\u003e ## Funcionalidades \n\u003e- Listar usuários cadastrados\n\u003e- Criar novo usuário\n\u003e- Editar usuário existente\n\u003e- Excluir usuário\n\u003e- Atualização da interface sem recarregar a página (AJAX)\n\u003e- Feedback visual para operações (mensagens de sucesso/erro)\n\u003e## Tecnologias Utilizadas\n\u003e - HTML5\n\u003e - CSS3 (para layout)\n\u003e - JavaScript (jQuery 3.6.0)\n\u003e - JSON Server (API REST para testes)\n\n## Como executar o projeto\n\u003ctable\u003e\n  \u003ctd\u003e\n    \n\n### Pré-requisitos\n\n- Node.js instalado (para rodar o JSON Server)\n\n- Editor de código (VSCode, Sublime, etc.)\n\n- Navegador (Chrome, Firefox, Edge)\n    \n\n\n### Passos\nClone este repositório ou copie os arquivos para sua máquina.\n```\nhttps://github.com/raicleycs/jQuery_Ajax.git\n```\n\nInstale o JSON Server globalmente na sua máquina:\n\n```\nnpm install -g json-server\n```\nCrie um arquivo db.json com a seguinte estrutura:\n\n```\n{\n  \"users\": [\n    { \"id\": 1, \"name\": \"João\", \"email\": \"joao@example.com\" },\n    { \"id\": 2, \"name\": \"Maria\", \"email\": \"maria@example.com\" }\n  ]\n}\n```\nVá para a pasta que contem o arquivo ```db.json```\n```\ncd db\n```\nExecute o JSON Server na porta 3000:\n\n```\njson-server --watch db.json --port 3000\n```\n\n- Abra o arquivo index.html no navegador.\n\n- Use o formulário para criar ou editar usuários.\n\n- Use os botões \"Editar\" e \"Excluir\" para modificar os usuários listados.\n  \n  \u003c/td\u003e\n\u003c/table\u003e\n\n## Estrutura dos arquivos\n\u003ctable\u003e\n  \u003ctd\u003e\n    \n- [x] index.html — Página principal com formulário e tabela para listar usuários.\n\n- [x] app.js — Script JavaScript que contém toda a lógica do CRUD usando jQuery e AJAX.\n\n- [x]  db.json — Arquivo para o JSON Server com dados iniciais (tem um exemplo no repositório no repositório ``` db/db.json ```).\n\n- [x]  style.css - Estilização da página principal.\n\n  \u003c/td\u003e\n\u003c/table\u003e\n\n\u003e [!NOTE]\n\u003e ## Explicação do código\n\u003e - Listagem: Ao carregar a página, os usuários são carregados via AJAX (GET /users) e exibidos na tabela.\n\u003e - Criar: Envio de dados via AJAX (POST /users) a partir do formulário.\n\u003e - Editar: Buscar usuário pelo ID (GET /users/:id) e preencher o formulário para edição.\n\u003e - Atualizar: Envio dos dados atualizados via AJAX (PUT /users/:id).\n\u003e - Excluir: Exclusão do usuário via AJAX (DELETE /users/:id).\n\u003e - Mensagens aparecem após cada operação para informar sucesso ou erro.\n\n\n\u003e [!TIP] \n\u003e ## Proposta de melhorias para praticar \n\u003e - Adicionar paginação para grandes volumes de dados.\n\u003e - Melhorar interface com frameworks CSS como Bootstrap.\n\u003e - Consumir APIs reais públicas para aprendizado prático.\n\u003e - Incluir autenticação e proteção das rotas.\n\n\n# Referências\n- [jQuery AJAX Documentation](https://api.jquery.com/jquery.ajax/)\n- [JSON Server GitHub](https://github.com/typicode/json-server)\n- [JSONPlaceholder API](https://jsonplaceholder.typicode.com/)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraicleycs%2Fjquery_ajax","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fraicleycs%2Fjquery_ajax","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraicleycs%2Fjquery_ajax/lists"}