如何使用jQuery将动态表格行添加到Wordpress数据库

这是我在这里的第一篇文章，我希望我会遵循所有的规则。我还没有找到任何与我的问题完全吻合的答案。我目前正在开发一个WordPress插件，并用jQuery编写了一个动态表格，可以动态添加，排序和删除行。每一行都有输入字段。现在我想将每行输入字段数据保存为自定义数据库表中的新数据库条目。我已经设法有一个jQuery变量，每个行字段条目用逗号分隔。现在我基本上只需要将这个变量放入数据库查询中，并在那里卡住。也许jQuery变量也是错误的路要走。你们能帮我吗？如何使用jQuery将动态表格行添加到Wordpress数据库

我的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); 
     } 
     }); 
    });`

警报（Y）;返回输入字段的逗号分隔值。在这一点上，我想插入到数据库插入调用，但不知道如何。

我的PHP/HTML（简码WordPress的格式）

$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>';

任何想法？

在此先感谢。

来源

2016-05-20 Scrat

谷歌WP阿贾克斯负载的教程那里 – David

你将需要php来与数据库交谈。所以你的jQuery发送请求到一个插件或PHP页面，然后插入数据库。要小心，因为如果你不小心的话，你可以用这个来引入新的安全漏洞。

来源

2016-05-21 01:21:07 Kevin

感谢您的评论。我猜你正在谈论SQL注入攻击。我会确保删除任何敏感符号的输入。 – Scrat

如果你想比你要使用的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 

}

希望这将帮助，您可以自由地问，如果想要其他任何指导。

来源

2016-05-21 05:50:31

如何使用jQuery将动态表格行添加到Wordpress数据库

回答

相关问题