Question

在我的用户将照片拖放到放置区后，图像会出现缩略图，并且会出现一个输入字段，允许用户为图像添加逗号分隔的标记。

数据库中有三个表，表1.存储标记的id类型，对于图像总是11，表2.标记的名称和给予每个标记的id。表3.目标URL图像路径，标记ID，标记名称，文件名。

表3从不填充任何内容，但其他两个表填充正常。

我可以在控制台上记录这些值，直到我进入这个ajax调用，在控制台中我显示了一堆对我来说有点混乱的数据。我假设我从表单中抓取错误的数据并且我的值没有保持我认为他们持有的东西，这就是为什么表三不会填充。

这就是我创建隐藏表单字段以及输入文本字段的方式

 //Create an empty container
    var path = "users/" + $("#username").val() + "/";
    var $elems = $();
    //Cycle thru the files
    $.each(data.files, function(idx, file) {
        //Create an input with attrs
        var $inputType = $("<input/>", {
            'type': 'hidden',
            'value': '11',
            'id': 'tag_type_id', 
            'name': 'tag_type_id'
        });

        var $inputName = $("<input/>", {
            'type': 'hidden',
            'value': file["name"],
            'id': 'tag_target_name', 
            'name': 'tag_target_name'
        });

        var $inputURL = $("<input/>", {
            'type': 'hidden',
            'value': path + file["name"],         
            'id': 'tag_target_url', 
            'name': 'tag_target_url'
        });    

        var $inputTags = $("<input/>", {
            'type': 'text',
            'placeholder': 'Seperate tags with commas',
            'id': 'tags', 
            'name': 'tags' 
        });

这是我的ajax函数，在我将它发送到我的php脚本之前，我使用console.log来显示此时的数据，

function addTags(){
    $.ajax({
        type: 'POST',
        url: 'data/add_tags.php',
        data: "&tag_type_id=" + $('#tag_type_id').val() + "&tag_target_name=" + $('#tag_target_name').val() +
            "&tag_target_url=" + $('#tag_target_url').val() + "&tags=" + $('#tags').val(),    
                success: function(response){
            console.log(response);
            if(response === 'error'){
                        $('.messageText').empty()
                    $('.messageImage').empty()
                    $('.messageText').append('Please add tags seperated by commas');
                $(".messageImage").append('<img src="images/error.png" height="50" width="50">');
                $('.message').slideDown(400).delay(10000).fadeOut(400)   
            }
            else {
                    $('.messageText').empty()
                    $('.messageImage').empty()
                    $('.messageText').append('Your tags have been added.');
                    $(".messageImage").append('<img src="images/success.png" height="50" width="50">');
                    $('.message').slideDown(400).delay(10000).fadeOut(400)  
                    console.log(tag_type_id);
                    console.log(tag_target_name);
                    console.log(tag_target_url);
                    console.log(tags);

            }   
       }
    });
 };

add_tags.php

<?php
//Include files                 
require_once('../classes/class_login.php');

$tag_type_id = $_POST['tag_type_id'];
$tag_target_name = $_POST['tag_target_name'];
$tag_target_url = $_POST['tag_target_url'];
$tags = $_POST['tags'];

    /*** begin with some validation ***/
    if(!isset($_POST['tag_type_id'], $_POST['tag_target_name'], $_POST['tag_target_url'], $_POST['tags']))
    {
        /*** if no POST is submited ***/
        $msg = 'Please Submit a tag';
        print('error');
    }
    elseif(filter_var($_POST['tag_type_id'], FILTER_VALIDATE_INT, array("min_range"=>1, "max_range"=>100)) == false)
    {
        /*** if tag is too short ***/
        $msg = 'Invalid Tag Type';
                print('error');
    }
    elseif( strlen($_POST['tag_target_url']) == 0 )
    {
        /*** if tag is too long ***/
        $msg = 'Tag target is required';
                print('error');
    }
    elseif( strlen($_POST['tags']) == 0 )
    {
        $msg = 'Tag Required';
                print('error');
    }
    elseif(  strlen($_POST['tag_target_name']) == 0 )
    {
        $msg = 'Tag Name is too short';
                print('error');
    }
    elseif( strlen($_POST['tag_target_name']) > 30 )
    {
        $msg = 'Tag Name is too long!';
                print('error');
    }
    else
    {
        /*** if we are here, all is well ***/

        $tag_type_id = filter_var($_POST['tag_type_id'], FILTER_SANITIZE_NUMBER_INT);
        $tag_target_url = filter_var($_POST['tag_target_url'], FILTER_SANITIZE_STRING);
        $tag_target_name = filter_var($_POST['tag_target_name'], FILTER_SANITIZE_STRING);
        $tags = filter_var($_POST['tags'], FILTER_SANITIZE_STRING);

            addTags($tag_type_id, $tag_target_name, $tag_target_url, $tags);

            $msg = 'Tag Type Added!';
                    print('success');
        }

?>

我想也许我实际上持有某种类型的对象而不是默认值我认为我正在添加到隐藏的表单字段，这就导致了问题。

如果有更多ajax或JS经验的人会介意看这个并告诉我这看起来是典型的还是我可能会出错的地方我会很感激。

当我向图像提交新标签时，这是控制台中的一些数据，这些数据包含各种信息。但正如您所看到的那样，输入字段的ID都是正确的。当我在表单阶段控制台.log时，控制台中会显示正确的值...但是当我进入ajax调用时，它就像一堆更多数据显示...

  [input#tag_type_id, select#tag_type_id, tag_type_id: input#tag_type_id]
data_handling.js:353 [input#tag_target_name, input#tag_target_name, tag_target_name: input#tag_target_name]
data_handling.js:354 <input type="hidden" value="users/nichodiaz/o-red.png" id="tag_target_url" name="tag_target_url">
data_handling.js:355 [input#tags, input#tags, tags: input#tags]

使用AJAX将隐藏的表单值插入数据库

0 个答案: