Отправка данных в БД через ajax

@Kot_Enot · Регистрация: 03.12.2011

Author24 — интернет-сервис помощи студентам

Добрый день! Подскажи пожалуйста как сделать оправку данных из формы через ajax, чтоб не перезагружалась страница. Есть форма и одно поле для ввода текста и одна кнопка submit. По её нажатию идет запись текста в БД.

HTML5

<form method="post">
Имя:<br />
<input type="text" name="name">
<input type="submit" name="save" value="Сохранить">
</form>

PHP

if(isset($_POST['save']))
{$name = $_POST['name'];
mysql_query("INSERT INTO `users`(`Name`) VALUES ('$name')");
}

Обработка формы выполняется в томже файле, где находится форма (index.php)

crautcher · 24.07.2012, 16:43

1. подключаешь jquery

HTML5

1
2
3

<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

п.с. лучше скачать себе на сервер

2. нафиг форму , мы и так можем достать данные из любого инпута , 2 нужно дать айдишники

HTML5

1
2
3

Имя:<br />
<input type="text" id="name">
<input type="button" id="send" value="Сохранить">

3. нужен див куда выведем ответ

HTML5

1	<div id="result"></div>

4. под этим пишем скрипт

Javascript

<script>
//при клике на кнопку
$("#send").click(
function() {
 
//отправляем ( куда , что (имя / значение) , получаем ответ)
 $.post('somefile.php', { name: $("#name").val() } , function(data) {
 //ответ заносим в див
    $('#result').html(data);
  }  );
} 
 
);
</script>

можно протестить добавив пхп перед выводом

PHP

1	<? if (isset($_POST['name'])) die($_POST['name']); ?>

@vitnet · 15.01.2013, 00:01

А как отправить что то из:

HTML5

1
2
3

<a href="http://site1.ru" id="1" onclik="test()">test1</a>
<a href="http://site2.ru" id="2" onclik="test()">test2</a>
И.Т.Д

Javascript

function test() {
$.ajax({   
    type: "POST",
    url: "/ajax.php",
    data: '????' //вот как получить и вставить сюда ссылку из id="1" или 2 и.т.д
       success: function(html){
       alert(html); // просто вывод ответа
     }  
});
};

crautcher · 15.01.2013, 11:18

Сообщение от vitnet

//вот как получить и вставить сюда ссылку из id="1" или 2 и.т.д

самое просттое сразу епредать в функцию

HTML5

<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  function test( link ) {
    alert(link);
   /*    $.ajax({   
    type: "POST",
    url: "/ajax.php",
    data: '????' //вот как получить и вставить сюда ссылку из id="1" или 2 и.т.д
       success: function(html){
       alert(html); // просто вывод ответа
     }  
});*/
}
</script>
</head>
<body>
<a href="http://google.com" id="1" onclick="test( this.href )">test1</a>
</body>

а через jquery , любой атрибут получает или задает .attr() http://api.jquery.com/attr/

@rick_77 · 27.11.2019, 17:53

Прошло много времени, но вопрос возник СЕЙЧАС. И так.
Какой должна быть моя переменная nazva_TC если:
файл index_avto.php

HTML5

<form id="InputForm" name="form1" method="post">
        <div class="form-group">
            <label>Дата выезда:</label>
            <input type="datetime-local" class="form-control" id="data_doc" placeholder="Дата/выезд ТС" name="data_doc" required>
            <label><b>Номер документа:</b></label>
            <output id="counter" name="counter"> 000001 </output>
        </div>

PHP

1
2
3

<?php
    require_once ('List_Nazva_TC.php');
?>

...

HTML5

1	<input type="button" name="insert" class="btn btn-primary" value="ЗАПИСАТЬ" id="butsave">

Javascript

<script>
$(document).ready(function() {
    $('#butsave').on('click', function() {
        if(proverka()){
            alert('Пробег НЕ может быть отрицательным !!!');
            return;
        }
        // $("#butsave").attr("disabled", "disabled");
//var s = $('form').serialize();        
        var data_doc = $('#data_doc').val();
        var nazva_TC = $('#nazva_TC').val();
        var marka_TC = $('#marka_TC').val();
        var liters = $('#liters').val();
        var speedometr_vyezd = $('#speedometr_vyezd').val();
        var speedometr_vozvrat = $('#speedometr_vozvrat').val();
        var probeg = $('#probeg').val();
 
        var zadanie = $('#zadanie').val();
        var vid_rabot = $('#vid_rabot').val();
        var check = $('#check').val();
 
 
        if(data_doc!="" && nazva_TC!="" && marka_TC!="" && speedometr_vyezd!="" && speedometr_vozvrat!="" && probeg!=""&& liters!=""){
            $.ajax({
                url: "insert.php",
                type: "POST",
                data: {
                    data_doc: data_doc,
                    nazva_TC: nazva_TC,
                    marka_TC: marka_TC,
                    speedometr_vyezd: speedometr_vyezd,
                    speedometr_vozvrat: speedometr_vozvrat,
                    probeg: probeg,
                    liters: liters,
 
                    zadanie: zadanie,
                    vid_rabot: vid_rabot,
                    check: check
                },
                cache: false,
                success: function(dataResult){
                    var dataResult = JSON.parse(dataResult);
                    if(dataResult.statusCode==200){
                        //$("#butsave").removeAttr("disabled");
                        alert("Данные по номеру " + nazva_TC + " добавлены в базу !");
                        alert("Введите новое авто !");
 
                        $('#InputForm').find('input:text').val('');
                        $("#success").show();
                        // $('#success').html('Данные добавлены в базу !');
                    }
                    else if(dataResult.statusCode==201){
                       alert("Чёт не то в запросе, проверь !");
                    }
                }
            });
        }
        else{
            alert('НЕ заполнены все поля !');
        }
    });
});
</script>

Файл List_Nazva_TC.php

PHP

<select id="idNazva_TC" title="Номер ТС">
<?php
        include 'database.php';
        //отображаем nazva_TC
        while ($row = mysql_fetch_array($result))
        {
        print '<option value="'.$row['nazva_TC'].'">';
        print $row['nazva_TC'];
        echo('</option>');
        }
?>
</select>

Javascript

<script>
    $(document).ready(function(){
    $('#idNazva_TC').change(function(){
        $.ajax({
        type: "POST",
        url: "show_Nazva_TC.php",
        data: "idNazva_TC="+$("#idNazva_TC").val(),
        success: function(html){
        $("#content_Nazva_TC").html(html);
        }
        });
    return false;
    });
    });
</script>

Файл show_Nazva_TC.php

PHP

<?php
session_start();
?>
<?php
include 'database.php';
//запрос на содержимое поля
    $query = "SELECT * from `tc_basa` where `nazva_TC` = '".$_REQUEST['idNazva_TC']."' ";
    $result = mysql_query($query) or die(mysql_error());
// выводим поле по запросу
    while ($row = mysql_fetch_array($result))
 {
print "Марка авто : "; print $row['marka_TC']."<br>";
print "Тип двигателя : "; print $row['tip_dvig']."<br>";
//print "Остаток топлива : "; print $row['speedometr_vozvrat']."<br>";
 }
?>

То что я получаю постом записывается без проблем, а вот КАКОЙ нужно сделать переменную nazva_TC что бы данные записать в базу.
Всё что нужно лежит здесь:
https://gist.github.com/rick-7... 08f3e7733e