Как отправить несколько строк в базу данных с помощью jquery в php-файл с помощью ajax-POST?

Question

Дано:

<input type='text' name='firstname' id='firstname'>
<input type='text' name='lastname' id='lastname'>
<input type='text' name='username' id='username'>
<input id='pw' name='pw' type='password'>

Я пытаюсь отправить данные с помощью ajax-post-запроса, например:

                var myData = "firstname="+ $('#firstname').val() + "&lastname="+ $('#lastname').val() + "&username="+ $('#username').val() + "&pw="+ $('#pw').val();
                $.ajax({
                type: "POST",
                url: "php/register.php",
                dataType:"text",
                data:myData, //Form variables
                success:function(response){
                    $("#responds").append(response);
                }

Как отправить эти данные в таком видеправильно ли php-файл, который соответствует базе данных?<form> необходимо для отправки с помощью кнопки?

Answer 1

Есть много решений этой проблемы, как многие упоминали. С моей точки зрения, проще всего обернуть поля в форму.

1. Привязать событие submit , которое вызывает обратный вызов при отправке вашей формы.
2. Сериализация формы с использованием .serialize() создание текстовой строки в стандартном кодированном URL-адресе для обозначения всех допустимых полей ввода и их значений (поэтому вам не нужно создавать эту строку запроса самостоятельно)
3. Отправка ваших данных с использованием $.post и обработка ответа с помощью обратного вызова успеха

Ниже приведен полностью функциональный фрагмент кода. Вы можете посмотреть данные, отправленные в PostBin здесь .

// PostBin CORS
$.ajaxSetup({crossDomain:true})

// Submit handler
$('form').on('submit', function(event) {
  event.preventDefault();
  var $form = $(this)
  $.post(
    'http://postb.in/ADC3a3Vm',// replace with php/register.php
    $(this).serialize(),
    function(response){
      $("#response").append(response);
      $form[0].reset()
    }
  );
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" name="firstname" placeholder="First Name">
  <input type="text" name="lastname" placeholder="Last Name">
  <input type="text" name="username" placeholder="Username">
  <input type="password" name="pw" placeholder="Password">
  <button type="submit">Submit</button>
 </form>
 
 <div id="response"></div>

Answer 2

вы можете использовать serialize() jQuery функцию

var myData = $("form").serialize();

в этом случае <form> требуется Читать здесь