2016-06-19 1 views
1

На моем сайте, через form Я отправляю/регистрирую ту же информацию в базе данных, делаю SELECT/запрос и возвращаю его! Верните последнюю таблицу, сохраненную в базе данных, только этот пользователь просто ввел в форму (вместе с дополнительной информацией, поступающей из базы данных).Wordpress: Ajax не работает для вставки, запроса и данных результата

Как я хочу отображать эти значения, исходящие из базы данных в modal bootstrap, необходимо, чтобы страница не давала обновления. Для этого я вставил AJAX следующим образом:

$(document).ready(function(){ 
    $('#enviar').click(function(){ 
     $.ajax({ 
      //CALL AJAX IN WORDPRESS 
      url: 'wp-admin/admin-ajax.php', 
      type: 'POST',    
      //INSERT, QUERY AND DISPLAYS TO USER  
      data: 'action=prancha',     
      error: function(){ 
       alert('ERRO!!!'); 
      }, 
      //IF OK, DISPLAYS TO USER IN DIV "RESULT" 
      success: function(data){ 
       $('#result').html(data); 
      }    
     }); 
    }); 
}); 

В моем файле functions.php:

function prancha(){ 
    header('Content-Type: text/html; charset=utf-8'); 

    include "../../../wp-config.php"; 


     /* DECLARING THE VARIABLES */ 
    $nome = ""; 
    $email = ""; 
    $estilo = ""; 
    $experiencia = ""; 
    $altura = ""; 
    $peso = ""; 

    // VALIDATION 
    if(!empty($_POST)){  
    $nome = $_POST['nome']; 
    $email = $_POST['email']; 
    $estilo = $_POST['estilo']; 
    $experiencia = $_POST['experiencia']; 
    $altura = $_POST['altura']; 
    $peso = $_POST['peso']; 

    cadastra_user($nome, $email, $estilo, $experiencia, $altura, $peso); 
} 


    //INSERT IN DATABASE NAME, EMAIL, ESTILE, EXPERIENCE, HEIGHT AND WEIGHT 
function cadastra_user($nome, $email, $estilo, $experiencia, $altura, $peso){   
    global $wpdb; 

    $table = 'user'; 

    $data = array(  
     'nome' => $nome, 
     'email' => $email, 
     'estilo' => $estilo, 
     'exp' => $experiencia, 
     'altura' => $altura, 
     'peso' => $peso, 
    ); 

    $updated = $wpdb->insert($table, $data); 

    if (! $updated) { 
     $wpdb->print_error(); 
    }  
} 

//CONECT WITH DATABASE TO DO THE SELECT 
include "db.php"; 

    function BuscaAlgo($conexao){ 

    // QUERY + INNER JOIN IN DATABASE 
$query = "SELECT USU.usuario, 
        USU.nome, 
        USU.exp, 
        USU.altura, 
        USU.peso, 
        PRAN.exp_ref, 
        PRAN.altura_ref, 
        PRAN.peso_ref, 
        PRAN.tipo_prancha, 
        PRAN.tamanho_prancha, 
        PRAN.meio_prancha, 
        PRAN.litragem_prancha  
        FROM DADOS_USUARIO AS USU 
         INNER JOIN PRANCHA AS PRAN 
          on USU.exp = PRAN.exp_ref 
           WHERE USU.altura = PRAN.altura_ref 
           AND USU.peso = PRAN.peso_ref 
            ORDER BY USU.usuario DESC LIMIT 1"; 



    $resultado = mysqli_query($conexao,$query); 

    $retorno = array(); 

    while($experiencia = mysqli_fetch_assoc($resultado)){ 
    $retorno[] = $experiencia; 
    } 

return $resultado; 
} 


//DISPLAYS THE QUERY TO USER  
$resultado = array(); 
$resultado = BuscaAlgo($conexao); 

foreach($resultado as $valor){ 
    echo $valor["usuario"]; print(". . . ."); 
    echo $valor["nome"]; print(". . . ."); 
    echo $valor["exp"]; print(". . . ."); 
    echo $valor["altura"]; print(". . . ."); 
    echo $valor["peso"]; print(". . . ."); 
    print("///////"); 
    echo $valor["tipo_prancha"]; print(". . . ."); 
    echo $valor["tamanho_prancha"]; print(". . . ."); 
    echo $valor["meio_prancha"]; print(". . . ."); 
    echo $valor["litragem_prancha"]; 
} 


    die(); //END THE EXECUTION 
} 
//ADD THE AJAX HOOKS IN WORDPRESS 
add_action('wp_ajax_prancha', 'prancha'); 
add_action('wp_ajax_nopriv_prancha', 'prancha'); 

Код комментирования, в основном я сделал:

AJAX:

  • В поле `URL` вызывается собственный Wordpress` admin-ajax.php`.
  • В поле `DATA` вызывается функция, которая выполняет регистрацию, запрос и отображение пользователю.
  • В поле `SUCCESS` печатается значение` data`.

ФУНКЦИИ: Я делаю регистрационный код в базе данных, делаю запрос и печатаю с помощью echo.

AJAX возвращает мне сообщение об ошибке.

Как я могу это решить?

Что я делаю неправильно?

Note1: Когда я вставляю код, который находится в моих 'функциях , the registration code, the query and the echo' для отображения в прямом направлении, в моем footer.php, он работает. Поэтому мы можем понять, что ошибка даже не в коде вставки, запроса или отображения.

ПРИМЕЧАНИЕ 2: Я хочу отобразить возврат базы данных в пределах modal boostrap. Сначала я просто показываю на экране, чтобы проверить, все ли в порядке. После этого я буду исследовать, как помещать эти данные в modal, хотя и не является основным предметом сообщения, также приветствуются предложения о том, как это сделать.

+2

Если вы используете вызовы jQuery WordPress, следует использовать «jQuery», а не «$», чтобы избежать конфликтов и придерживаться наилучшей практики ожидания. –

ответ

1

Прежде всего, вы должны использовать объект $ wpdb для доступа к базе данных в Wordpress, включая выбор. Проверьте документацию https://codex.wordpress.org/Class_Reference/wpdb

Вы не указали, какие ошибки вы получите, но я думаю, что ваше определение Ajax вызова неправильно, он должен быть:

data: { 
    action : 'prancha' 
} 
+0

Это ошибка 'AJAX'. Поле 'error: function() {alert ('ERRO !!!');},' – Zkk

+0

внесло изменения, которые вы предложили, но с той же ошибкой. – Zkk

+0

Проверьте вкладку «Сеть» в консоли разработчика Google Chrome, чтобы точно узнать, что происходит в запросе. – user1049961

1

Существует несколько ошибок в коде, но вы только что пропустили очень важную часть кода,
, чтобы заставить его работать, в wp_localize_script() функцию:

add_action('wp_enqueue_scripts', 'meu_ajax_scripts'); 
meu_ajax_scripts(){ 
    // Register your script (located in a subfolder `js` of your active theme, for example here) 
    wp_enqueue_script('meuscript', get_template_directory_uri().'/js/ajax_script.js', array('jquery'), '1.0', true); 
    // Making the bridge between php and javascript: 
    wp_localize_script('meuscript', 'meuajax', array('ajaxurl' => admin_url('admin-ajax.php'))); 
} 

Этот код идет в function.php файл вашей активной темы (или детской теме) папка ... Если это детская тема, вы должны заменить get_template_directory_uri() на get_stylesheet_directory_uri().

Как вы можете видеть 'meuscript' находится в обеих функциях wp_enqueue_script() и wp_localize_script().

Затем вы получите 'meuajax' и 'ajaxurl' в своем сценарии jQuery.

Они объединены таким образом:
url: meuajax.ajaxurl, вместо url: 'wp-admin/admin-ajax.php',.
wp_localize_script() функция сделает мост через admin_url('admin-ajax.php') функцию от вашего jQuery script к вашей php функции ...


(NEW UPDATE - NOVA ATUALIZAÇÃO)
относительно ваших комментариев, ваше обновление ответа/вопроса, и это thread тоже ...


Итак, вот ваш недавно обновленный код jQuery (с другим подходом, связанным с данными формы). Все данные формы сериализовать перед отправкой в ​​вашу функцию prancha() PHP через AJAX:

// We use jQuery instead of $. Thanks to Phill Healey (see comments). 
// Then we put back the $ shorthand in the function… 
jQuery(document).ready(function($){ 

    // Now we can use $ shorthand, avoiding javascript errors (with wordpress). 
    $('#enviar').submit(function(e){ // Updated    

     var minhaprancha = $(this).serialize(); // serializing the form data 

     e.preventDefault(); // preventing form submit normal behavior 

     //ajax call 
     $.ajax({ 
      type: 'POST', 
      action: 'prancha', 
      url: meuscript.ajaxurl, // the functional url  
      data: meuscript.minhaprancha, // all the data of the form (serialized) 

      // Displaying succes message 
      success: function(data){ 
       $('#result').html('Sucesso : '.data); 
       // for debugging purpose in browser js console 
       console.log(data); 
      }, 

      // Displaying error message  
      error: function(error){ 
       $('#result').html('Erro! : '. error); 
       // for debugging purpose in browser js console 
       console.log(error); 
      }    
     }); 
    }); 
}); 

Поместите этот код в JS файл ajax_script.js внутри JS вложенной вашей активной темы (или детской теме).


Ваш HTML форма (пример подобного), должен быть какой-то подобное как это:

<form method="post" id="minhaprancha"> // this id is important too (no "action" needed) 

    <label for="Seu nome">From *</label> 
    <input name="nome" id="nome" type="text" class="form-control" placeholder="Seu nome" required> 
    <br /> 

    <label for="Seu email">From *</label> 
    <input name="email" id="email" type="email" class="form-control" placeholder="Seu email" required> 
    <br /> 

    <label for="Seu estilo">From *</label> 
    <input name="estilo" id="estilo" type="text" class="form-control" placeholder="Seu estilo" required> 
    <br /> 

    <label for="Seu experiencia">From *</label> 
    <input name="experiencia" id="experiencia" type="text" class="form-control" placeholder="Seu experiencia" required> 
    <br /> 

    <label for="Seu altura">From *</label> 
    <input name="altura" id="altura" type="text" class="form-control" placeholder="Seu altura" required> 
    <br /> 

    <label for="Seu peso">From *</label> 
    <input name="peso" id="peso" type="text" class="form-control" placeholder="Seu peso" required> 
    <br /> 

    <?php 
    // This imput hidden element has the name value of the php function ?> 
    <input type="hidden" name="action" value="prancha"/> 
    <input type="submit" id="enviar" name="enviar" value="Enviar"> 
</form> 
<div id="result" class="result"></div> 

Тогда вы будете получать (как вы уже знаете) значения данных в вашем php:

$nome = $_POST['nome']; 
$email = $_POST['email']; 
$estilo = $_POST['estilo']; 
$experiencia = $_POST['experiencia']; 
$altura = $_POST['altura']; 
$peso = $_POST['peso']; 

На этот раз это «под ключ», и он будет работать, как только вы адаптируете свою форму к нему.

Список литературы:

0

Во-первых, я благодарен за их готовность помочь.
Во-вторых, я предпочитаю искать больше о том, как решить мою проблему, прежде чем приходить сюда с обратной связью.

Код, который вы мне прислали, все еще не работает. Я внес некоторые изменения, и он работал по частям.

  • Я заменил submit для click в моей JQuery, и я также заменил тип моей кнопки для text.
  • Я заменил thisserialize() для id моей формы.

    JQuery (документ) .ready (функция ($) { $ ('# Enviar'). Нажмите (функция (е) {// Я заменил SUBMIT для CLICK вар minhaprancha = $ ('# minhaprancha') .serialize(); // Я заменил THIS для ид моей формы

     e.preventDefault(); // preventing form submit normal behavior 
    
         $.ajax({ 
          type: 'POST',    
          url: meuajax.ajaxurl, 
          data: meuajax.minhaprancha, 
          success: function(data){ 
           $('#resultado').html('Sucesso : ' + data); 
           console.log(data); 
          }, 
          error: function(error){ 
           $('#resultado').html('Erro! : ' + error); 
           console.log(error); 
          }    
        }); 
    }); 
    

    });

с этими изменениями, код работает, но не идеально, я поставил alert. чтобы проверить, serialize() работал, и это !. Но в конце сценария консоль браузера возвращает мне статус успеха, значение 0 и не выполняет работу функции prancha(). Данные не зарегистрированы в базе данных.

SUCCESS

I looked for other ways to try to make the work code:

Получение значений полей, сохраняя переменную и назвав его в Ajax. Оба сохранения поля формы, как переменная, объявленная в прямом data поле и отображается Внутренняя ошибка 500

jQuery(document).ready(function($){ 
    $('#enviar').click(function(e){ 
     var minhaprancha = '$nome='+$("#nome").val()+ 
          '&email='+$("#email").val()+ 
          '&estilo='+$("#estilo").val()+ 
          '&experiencia='+$("#experiencia").val()+ 
          '&altura='+$("#altura").val()+ 
          '&peso='+$("#peso").val(); //GETTING THE VALUES OF FIELDS 

     e.preventDefault(); // preventing form submit normal behavior 

     $.ajax({ 
      type: 'POST',    
      url: meuajax.ajaxurl,    
      data: { action: 'prancha', minhaprancha }, 
      success: function(data){ 
       $('#resultado').html('Sucesso : ' + data); 
       console.log(data); 
      }, 

      error: function(error){ 
       $('#resultado').html('Erro! : ' + error); 
       console.log(error); 
      }    
     }); 
    }); 
    }); 

INTERNAL ERROR 500

I also tried to call the values of the form fields in data : {} matrix and is displayed the error Maximum call stack size exceeded .

jQuery(document).ready(function($){ 
     $('#enviar').click(function(e){   
     e.preventDefault(); // preventing form submit normal behavior 

      $.ajax({ 
       type: 'POST',    
       url: meuajax.ajaxurl, 
       action: 'prancha', 
       data: { 'nome':nome, 'email':email, 'estilo':estilo, 'experiencia':experiencia, 'altura':altura, 'peso':peso }, 
       success: function(data){ 
        $('#resultado').html('Sucesso : ' + data); 
        console.log(data); 
       }, 
       error: function(error){ 
        $('#resultado').html('Erro! : ' + error); 
        console.log(error); 
       }    
     }); 
    }); 
}); 

Maximum call stack size exceeded

In my functions.php , I left only the part that insert the data in the database. To see the operation in parts. And remember that, when I put this code directly into my footer.php it works perfectly:

function meu_ajax_scripts(){  
    wp_enqueue_script('meuajax', get_template_directory_uri().'/consulta.js', array('jquery'), '1.0', true); 
    wp_localize_script('meuajax', 'meuajax', array('ajaxurl' => admin_url('admin-ajax.php'))); 
} 
add_action('wp_enqueue_scripts', 'meu_ajax_scripts'); 

function prancha(){ 

    if(!empty($_POST)){ 
    $nome = $_POST['nome']; 
    $email = $_POST['email']; 
    $estilo = $_POST['estilo']; 
    $experiencia = $_POST['experiencia']; 
    $altura = $_POST['altura']; 
    $peso = $_POST['peso']; 

    cadastra_usuario($nome, $email, $estilo, $experiencia, $altura, $peso); 
    } 

    function cadastra_usuario($nome, $email, $estilo, $experiencia, $altura, $peso){   

     global $wpdb; 

     $table = 'dados_usuario'; 

     $data = array(  
      'nome' => $nome, 
      'email' => $email, 
      'estilo' => $estilo, 
      'experiencia' => $experiencia, 
      'altura' => $altura, 
      'peso' => $peso, 
     ); 

     $updated = $wpdb->insert($table, $data); 

     if (! $updated) { 
      $wpdb->print_error(); 
     } 

    } 
    die(); 
    } 

    add_action('wp_ajax_prancha', 'prancha'); 
    add_action('wp_ajax_nopriv_prancha', 'prancha'); 

Я по-прежнему изучаю различные блоги, сайты и форумы, которые пытаются его обработать.

Смежные вопросы