Как добавить строки динамической таблицы в базу данных Wordpress с помощью jQuery

Question

Это мой первый пост здесь, надеюсь, я буду следовать всем правилам. Я не нашел ни одного ответа, который бы точно соответствовал моему вопросу. В настоящее время я разрабатываю плагин для Wordpress и кодирую динамическую таблицу с помощью jQuery, где строки можно добавлять, сортировать и удалять динамически. В каждой строке есть поля ввода. Теперь я хочу сохранить данные каждого поля ввода в виде новой записи базы данных в моей пользовательской таблице базы данных. Мне уже удалось иметь переменную jQuery, в которой каждая строка содержит поля с разделением запятыми. Теперь мне просто нужно вставить эту переменную в запрос к базе данных и вот где я застрял. Может быть, переменная jQuery - тоже неправильный путь. Ребята, вы можете мне помочь?

Мой JQuery:

    jQuery(".save-inv").click(function () {
      x = [];
      jQuery('table tr:gt(0)').each(function () {
        y = '';
        jQuery(this).find('td input').each(function () {
            y += jQuery(this).val() + ',';
        });
        if (y != '') {
            x.push(jQuery.trim(y))
            alert(y);
        }
      });
    });`

Предупреждение (у); возвращает разделенные запятыми значения полей ввода. На данный момент я хотел бы вставить вызов для вставки базы данных, но пока не знаю как.

Мой php/HTML (формат WordPress Shortcode)

    $showlist = '<a href="#" class="add-item-btn et-pb-icon" style="font-size: 30px; color: #0c71c3;"></a> Add row<br>';
$showlist .= '<a href="#" class="save-inv et-pb-icon et-waypoint et_pb_animation_top et-animated" style="font-size: 30px; color: #0c71c3;"></a> Save<br>';

//Form Definiton
$showlist .= '<form name="new-inv" method="POST" action="">';

// Header row
$showlist .= '<table id="inv-list" style="width:100%">';
$showlist .= '<thead><tr>';
$showlist .= '  <th></th>';
$showlist .= '  <th>Item name</th>';
$showlist .= '  <th>Description</th>';
$showlist .= '  <th>Category</th> ';
$showlist .= '  <th>Amount</th>';
$showlist .= '  <th>Exp. Date</th>';
$showlist .= '  <th>Alert Date</th>';
$showlist .= '  <th></th>';
$showlist .= '</tr></thead>';


// First item row
$showlist .= '<tbody id="fbody><tr class="item-row">';
$showlist .= '  <td style="padding: 6px 0px 0px 30px"><img  src="/wp-content/uploads/2016/05/draggable.png" style="height: 30px;"></td>';
$showlist .= '  <td><input type="text" name="itemname"></td>';
$showlist .= '  <td><input type="text" name="desc"></td>';
$showlist .= '  <td><input type="text" name="cat"></td>';
$showlist .= '  <td><input type="text" name="amount" size="5"></td>';
$showlist .= '  <td><input type="date" class="datepicker" name="expdate"></td>';
$showlist .= '  <td><input type="date" class="datepicker" name="alertdate"></td>';
$showlist .= '  <td><a href="#" style="font-size: 25px; color: #0c71c3;" class="del-item-btn et-pb-icon"></a></td>';
$showlist .= '</tr></tbody>';

$showlist .= '</table></form>';

Есть идеи?

Заранее спасибо.

Answer 1

Вам понадобится php, чтобы поговорить с базой данных. Поэтому пусть ваш jQuery отправит запрос на плагин или страницу php, которые затем будут вставлены в базу данных. Будьте осторожны, поскольку вы можете ввести новые дыры в безопасности, если не будете осторожны.

Answer 2

Если вы хотите добавить это в базу данных, чем вы должны использовать php,

но ваши входные данные взяты из jQuery, поэтому вы можете использовать ajax для отправки запроса в php-файл или функцию и написать там код для вставки в базу данных.

jQuery(".save-inv").click(function () {
  x = [];
  jQuery('table tr:gt(0)').each(function () {
    y = '';
    jQuery(this).find('td input').each(function () {
        y += jQuery(this).val() + ',';
    });
    if (y != '') {
        x.push(jQuery.trim(y))
        alert(y);

        jQuery.ajax({
              type: 'POST',
              url: '<?php echo admin_url('admin-ajax.php'); ?>',
              data: 'y='+ y + '&action=add_newraw',
              success: function(data) 
              {   

                // On sucess whatever you want to do 
                // I think nedd to just redirect to the listing page 

              }
          }); 
    }
  });
});

А для php-кода напишите следующую функцию в основной файл ваших плагинов,

add_action( 'wp_ajax_add_newraw', 'prefix_ajax_add_newraw' );
add_action( 'wp_ajax_nopriv_add_newraw', 'prefix_ajax_add_newraw' );

function prefix_ajax_add_newraw() {
$rowsId = trim($_POST['y']);

 // Write your insertion code here 

}

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