Подключение html-формы к php через jQuery

Привет, я новичок в программировании, и я изучал базы данных в основном с помощью java. Я привык использовать базу данных mysql для своих java-проектов, но теперь мне нужно использовать базу данных с использованием html / javascript. Кажется, я не могу заставить это работать. У меня есть некоторый опыт работы с html / css / javascript, но здесь немного больше основ. Я использую файл php, чтобы попытаться вставить данные в свою базу данных. В настоящее время этот файл выглядит так:

<?php
$con = mysqli_connect('test@localhsot', 'root', '');

if (!$con) {
echo 'not connected to server';
}

if (!mysqli_select_db($con, 'testdb')) {
echo 'database not selected';
}
$Name = $_POST['username'];
$Email = $_POST['email'];

$sql = "INSERT INTO test (Name,Email) VALUES('$Name', '$Email')";

if (!mysqli_query($con, $sql)) {
echo 'Not Inserted';
} else {
echo 'inserted';
}
header("refresh:2; url=index.html");
?>

на основе некоторых веб-сайтов и видео, которые я видел. Насколько я понимаю, мне нужно использовать ajax (через jquery?) Для отправки данных из моей формы html в файл php. Я возился с разными вещами, которые видел в Интернете, но не могу понять этого. Хотя у меня есть некоторый опыт работы с html и javascript, у меня его нет с ajax и php, так что это новая территория. Ниже приводится простая HTML-форма, которую я пытаюсь отправить прямо сейчас:

<body>

<form>
    <label>username<input type = "text" ></label>
    <label>email<input type = "text"></label>
    <input type = "submit" value = "Insert" id = "submit_btn">
</form>

<script src = "jquery-3.3.1.js"></script>
<script src = "main.js"></script>
</body>

может ли кто-нибудь показать мне или указать на объяснение того, как сделать мост между html и php с помощью ajax, который мог бы понять кто-то без опыта его использования? Спасибо.

Ознакомьтесь с этими ресурсами здесь: api.jquery.com/jquery.ajax, api.jquery.com/jquery.post, w3schools.com/jquery/jquery_ajax_get_post.asp

Dustin Hammack 26.10.2018 07:35
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
40
1

Ответы 1

Работать с ajax довольно просто. просто следуйте коду

var data  = {
"user":"somethingf"
}

login(data){

    return jQuery.ajax({
        type: 'post',
        url: "http://someurl or ip ",
        data: JSON.stringify(data),
        success: function (data) {

        },
        error: function (jqXhr, textStatus, errorThrown) {
        },
        contentType: 'application/json',
        async: false
    });
  }

Другие вопросы по теме