如何使用jQuery

时间:2016-05-20 23:02:14

标签: javascript jquery mysql wordpress dynamic-tables

这是我在这里的第一篇文章,我希望我会遵守所有规则。我没有找到任何完全适合我的问题的答案。我目前正在开发一个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);
        }
      });
    });`

警报(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>';

有什么想法吗?

提前致谢。

2 个答案:

答案 0 :(得分:0)

您将需要php与数据库通信。所以你的jQuery发送请求到一个插件或php页面,然后插入到数据库中。如果你不小心,可以小心引入新的安全漏洞。

答案 1 :(得分:0)

如果你想将它添加到数据库而不是必须使用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 

}

希望这会有所帮助,如果需要任何其他指导,您可以自由地询问。