Вставка данных с помощью AJAX

Как правильно выполнить вставку данных с помощью AJAX. Я видел несколько учебников, но они очень разные и несколько запутанные.

Некоторые используют этот код

xmlhttp=new XMLHttpRequest();

и другого нет. Некоторые объявляют переменные для каждого input, который они хотят ввести, другие просто используют id формы.

и я не знаю, что является наиболее эффективным способом регистрации.

У меня есть следующая форма (что-то простое с тем,что я хочу начать):

Formulario.php

<form id="formulario" action=""  method="POST">
        <div class="form-group">
          <label for="idnombre">Nombre:</label>
          <input type="text" class="form-control" id="idnombre" name="namenombre" placeholder="Ingresar Nombre">
        </div>

        <div class="form-group">
          <label for="idapellido">Apellido:</label>
          <input type="text" class="form-control" id="idapellido" name="nameapellido" placeholder="Ingresar Apellido">
        </div>

        <div class="form-group">
          <label for="idedad">Edad:</label>
          <input type="text" class="form-control" id="idedad" name="nameedad" placeholder="Ingresar Edad">
        </div>

        <button type="submit" id="button" class="btn btn-default">Registrar</button>
</form>

Insertar.php

<?php 
$servername = "localhost";
$username = "username";
$password = "";
$dbname = "demo";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

        $nombre = $_POST['namenombre'];
        $apellido = $_POST['nameapellido'];
        $edad = $_POST['nameedad'];


$sql = "INSERT INTO persona (nombre, apellido, edad) VALUES ('$nombre', '$apellido', '$edad')";

if ($conn->query($sql) === TRUE) {
    echo "New record created successfully";
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}

$conn->close();

?>

в дополнение к отображению bootstrap alert: 

  <div class="alert alert-success">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    <strong>Success!</strong> This alert box could indicate a successful or positive action.
  </div>

Как я мог это сделать? Заранее спасибо.

Author: Raphael, 2016-07-14
Source

3 answers

То, что вы должны использовать, это jQuery для получения данных формы с помощью функции serialize.

Например: 

<form name="miformulario" id="myfor">
  <input type="text" name="elemento1">
  <input type="text" name="elemento2">
  <input type="text" name="elemento3">
  <select name="options">
    <option value="1">choise 1</option>
    <option value="2">choise 2</option>
    <option value="3">choise 3</option>
  </select>
</form>

<script type="text/javascript">
  $('#myform').on('submit', function(e)) {
  e.preventDefault(); // Evitas que haga el submit por default

  var datosFormulario = $(this).serialize();

  $.ajax({
    type: "POST",
    url: "insertar.php",
    data: datosFormulario,
    success: function(data) {
    }
  });
  });
</script>

Y desde el php utilizas la función parse_str para convertir los datos a un array que puedas manejar.

<?php
$params = array();
parse_str($_GET, $params);

echo $params['elemento1'];
echo $params['elemento2'];

?>
 2
Author: Angel Camacho, 2016-07-14 20:51:27

С этим скриптом это больше лица, попробуйте: 

function agregaRegistro(){
    var url = 'insertar.php';
    $.ajax({
        type:'POST',
        url:url,
        data:$('#formpost').serialize(),
        success: function(registro){
            $('#formulario')[0].reset();
            $("#cargando").html(data);
        }
    });
    return false;
}

Ваш form выглядит так: 

<form id="formulario" action="" onsubmit="return agregaRegistro();" method="POST">
    <div class="form-group">
        <label for="idnombre">Nombre:</label>
        <input
            type="text"
            class="form-control"
            id="idnombre"
            name="namenombre"
            placeholder="Ingresar Nombre"
        >
    </div>
    <div class="form-group">
        <label for="idapellido">Apellido:</label>
        <input
            type="text"
            class="form-control"
            id="idapellido"
            name="nameapellido"
            placeholder="Ingresar Apellido"
        >
    </div>
    <div class="form-group">
        <label for="idedad">Edad:</label>
        <input
            type="text"
            class="form-control"
            id="idedad"
            name="nameedad"
            placeholder="Ingresar Edad"
        >
    </div>
    <button type="submit" id="button" class="btn btn-default">Registrar</button>
</form>
 1
Author: ivanrangel, 2017-03-18 21:31:55

Ajax (); является функцией jquery, а jquery-это фреймворк, разработанный на javascript.

  • Для того, чтобы он мог работать, вам нужна библиотека, так сказать, jaquery.js и существуют разные версии.
  • , найденный на интерфейсе, помогает отправлять информацию из формы на внутренний язык программирования, такой как php и java.
  • в отличие от традиционного способа вы можете отправить или всю информацию в своей форме или разделы.

Пример: 

   $.ajax({  
                url:"/agregarUsuario.php", //direccion de tu php o java(Utiliza servlets)
                type:'POST', // metodo POST es equivalente a <form method="POST" >
                data:{ParametroIDombre:$("#namenombre").val()},//parametros que resiviras en el php en metodo post $_POST["ParametroIDombre"] <-- obtienes de acuerdo a como lo declaraste en el data no con el name del form
                success: function( resp ) {
                        alert(resp);
//por medios de el atributo id="" puedes pintar información en tu html
 //o puedes crear otras funciones o tomar decisiones  cuando la respuesta fue OK                    

                },
                error:function(error){
                    console.error(error);
                }
            });

        }

Я надеюсь служить вам информацию, которую я предоставляю вы можете увидеть более подробную информацию ajax по адресу: http://api.jquery.com/jquery.ajax/

 1
Author: DoradoJ, 2017-11-30 02:59:44