首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >将jQuery标签-it输入保存为php数组

将jQuery标签-it输入保存为php数组
EN

Stack Overflow用户
提问于 2013-01-23 06:50:24
回答 2查看 3.7K关注 0票数 1

我正在使用jQuery Tag-it!为我的用户创建一个“技能”输入表单。我可以使用tag-it的UI,但不能将用户输入放入PHP数组中。我试图序列化这个数组并将其保存到mysql数据库中,以便稍后显示,但我甚至无法将数据放入数组中。

这里是javascript初始化标签-it:

代码语言:javascript
复制
$('#skills').tagit({     
    allowSpaces: true,
    placeholderText: "Separate skills with a comma please",
    autocomplete: true
});

下面是HTML:

代码语言:javascript
复制
<div>
    <label class="add_label">Skills: </label>
    <ul id="skills" style="width: 275px; margin-bottom: 8px;"></ul>
</div>

这是创建输入字段的javascript,用户输入应该存储在该字段中:

代码语言:javascript
复制
if (!this.options.singleField) {
       var escapedValue = label.html();
       tag.append('<input type="hidden" style="display:none;" value="' + escapedValue + '" name="' + this.options.fieldName + '" />');
}

这是获取用户输入的PHP --这是不起作用的部分。我无法从表单中检索任何数据:

代码语言:javascript
复制
$skillsArr = $link->real_escape_string($_POST['skills']);

当我提交表单时,mysqli查询执行,在数据库中我看到序列化数组所在的位置是"N;“。

如何将PHP it值放入jQuery数组中,以便序列化并保存到MySQL数据库中?

EN

回答 2

Stack Overflow用户

发布于 2013-06-24 23:49:47

问题是标签-默认情况下会发送带有如下数据的post请求:

代码语言:javascript
复制
tags=foo&tags=bar&tags=blah

PHP将通过使$_POST‘’tag‘='blah’来解释它。为了让PHP像处理数组一样处理post数据,post数据需要如下所示:

代码语言:javascript
复制
tags[]=foo&tags[]=bar&tags[]=blah

解决此问题的最简单方法是在设置tag-it时更改fieldName参数,例如:

代码语言:javascript
复制
$('.taglist').tagit({
    allowSpaces: true,
    placeholderText: 'add new tag here...',
    fieldName: 'tags[]'
});

只需将名称更改为包含[],PHP就会按照您的需要将其解释为一个数组。

或者,如果您不能调整它,您可以始终处理原始PHP数据,以获得数组形式的标记,例如:

代码语言:javascript
复制
$query = array();
foreach (explode('&', file_get_contents('php://input')) as $kv) {
    list($k, $v) = explode('=', $kv);
    $k = urldecode($k);
    $v = urldecode($v);
    if (!isset($query[$k])) {
        $query[$k] = $v;
    } else {
        if (is_array($query[$k])) {
            $query[$k][] = $v;
        } else {
            $query[$k] = array($query[$k], $v);
        }
    }
}

现在$query‘’tags‘将会像预期的那样成为一个数组。

注意:如果只发送了一个标签,那么它最终将是一个带有上述代码的字符串,所以如果结果进入循环或其他什么地方,请确保将其转换为数组:

代码语言:javascript
复制
foreach((array)$query['tags'] as $tag) ...
票数 1
EN

Stack Overflow用户

发布于 2013-06-28 21:24:03

我发现只在后端(php/mysqli)执行所有查询会更容易。

这样,我在jQuery自动补全中唯一需要的就是:

代码语言:javascript
复制
<script>
$(document).ready(function(){
  $("#tagit").tagit({
    autocomplete: {
   source: "ajax-search.php",
}
  });
});
</script>

我刚刚定义了文件的来源。您可以根据需要添加分隔符等(我只是修改了源代码)。

但是主函数来自php文件,它返回一个JSON编码的结果。

代码语言:javascript
复制
<?php
include("dbconnect.php"); //Including our DB Connection file

    if ( !isset($_REQUEST['term'])) //if there's no search, exit
  exit;

    $keyword = trim($_REQUEST['term']);
    $keyword = mysqli_real_escape_string($db, $keyword);
    $query = "SELECT * FROM animals WHERE english LIKE '%$keyword%' LIMIT 10";
    $result = mysqli_query($db, $query); //Run the Query

    $data = array(); //initialize array

    if ($result && mysqli_num_rows($result)){
   while($row = mysqli_fetch_assoc($result)){
      $data[] = array(
        'id' => $row['row_id'],
    'label' => $row['english'], //This is the 'live return of the search
    'value' => $row['eng_dir'], //The value returned. Not needed if you're returning the label
    'latin' => $row['latin'] //Another result (you can add more)
       );
    }
     }
    echo json_encode($data);
    flush();
  ?>

然后,在tag-it.js文件中,您可以选择要作为标签推送的内容:

代码语言:javascript
复制
if (this.options.availableTags || this.options.tagSource || this.options.autocomplete.source) {
   var autocompleteOptions = {
   select: function(event, ui) {
     that.createTag(ui.item.id); //pushes the ID
 that.createTag(ui.item.value); //pushes the value
     that.createTag(ui.item.label); //pushes the label
     that.createTag(ui.item.latin); //pushes the extra variable
 // Preventing the tag input to be updated with the chosen value.
 return false;
    }
   };
  $.extend(autocompleteOptions, this.options.autocomplete);

上面的代码将根据您的结果返回相同标签的4个实例。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/14469526

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档