I have a JSON file in this form {"Name":"wefgew"; "Birthday": "21"; "City": "qefqwef"} {"Name":"wefgew"; "Birthday": "21"; "City": "qefqwef"} {"Name":"wefgew"; "Birthday": "21"; "City": "qefqwef"} . I need such ajax easily that I would write Names, Days, Cities into my span (approximately <span class="params on" id="Name">wefgew</span ). I would like a similar example, I would be grateful for any help, thanks in advance!

JS block with which I receive data from the input and transfer php to save

  <script> $('#btn_save').on('click',function(){ var textField = $('#textField').val(); var textBirthday = $('#textBirthday').val(); var textCity = $('#textCity').val(); var str = '{"Name":"' +textField +'"; "Birthday": "' + textBirthday + '"; "City": "' + textCity + '"}'; $.ajax({ type: "POST", url: 'test.php', data: {'str':str}, success: function(data){ alert('Successfully saved'); }, error: function(data) { alert('Error'); }, }); }); </script>

Php file <?php file_put_contents('some_file.json', $_POST['str']);

  • Isn't it easier to make the form and data from the form just in php via ajax send? - Dmitriy Kondratiuk
  • I haven’t seen php in my eyes before this point, and didn’t work with the rest. Because for me, everything is not very simple. - Ivan Zavalinich 2:55

1 answer 1

In this version, the test.php page will not be loaded as the AJAX request is used, the processed data will be added under the form

 $(function() { $('.Button').click(function(){ // нажатие на кнопку $('#formBlockSale').ajaxForm({ // отправляем данные с формы type: "POST", // тип передачи данных dataType: "html", // тип данных success: function(e){ // если запрос удачный alert(e); // виводим сообщение с результатом который вернул пхп скрипт alert('Successfully saved'); // виводим сообщение $('.info').html(e); // виводим данные которые вернул пхп скрипт в блок под формой }, error: function(data) { // если запрос не удачный alert('Error'); // виводим сообщение }, }); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="formBlockSale" action="ОБРАБОТЧИК ФОРМЫ (test.php)" method="post" accept-charset="UTF-8" > <input type="text" name="textField" autocomplete="on" placeholder="Текст 1" /><br/> <!-- поле ввода 1 с именем textField --> <input type="text" name="textBirthday" autocomplete="on" placeholder="Текст 2" /><br/> <!-- поле ввода 2 с именем textBirthday --> <input type="text" name="textCity" autocomplete="on" placeholder="Текст 3" /><br/> <!-- поле ввода 3 с именем textCity --> <button class="Button">Отправить</button> </form> <div class="info"></div> <!-- Файл test.php <?php $textBirthday = $_POST('textBirthday'); // получаем значение введеное в поле ввода 1 с именем textBirthday и заносим его в переменную $textBirthday $textCity = $_POST('textCity'); // получаем значение введеное в поле ввода 2 с именем textCity и заносим его в переменную $textCity $textField = $_POST('textField'); // получаем значение введеное в поле ввода 3 с именем textField и заносим его в переменную $textField echo " // виводим результат <span class="params on" id="Name">".$textField."</span> // вставляем значение переменной $textField в тег <span class="params on" id="Birthday">".$textBirthday."</span> // вставляем значение переменной $textBirthday в тег <span class="params on" id="City">".$textCity."</span> // вставляем значение переменной $textCity в тег "; ?> -->