使用ajax，php，mysql和javascript的棘手情况

时间：2015-02-09 02:09:31

标签： javascript ajax

第一次使用ajax。已经成功地通过了一些出牙问题，迄今为止取得了愉快的成果。但是现在对于嵌套在表中的一个特定输入字段来说，这是一个更令人困惑的问题 - 这是有充分理由的。

首先是html：

 <table id="speakersName" style="width: 100%; height: auto;">
  <tbody><tr class="activity_row">
   <td class="right" style="width: 190px;">Name of Speaker:</td>
   <td><input type="text" id="input_3_1" name="input_3_1" id="input_3_1" placeholder="Name of Speaker" value="<?=$input_3_1?>" required></td>
   <td><input type="button" name="button2" id="button2" value="&nbsp;+1&nbsp;" class="button" style="width: auto !important; margin: 5px;"></td>
  </tr>
  <tr>
   <td class="center" colspan="3"><input type="hidden" name="MAX_FILE_SIZE" value="5632000">
   <label for="file">Filename:</label> <input type="file" name="file" id="file">
   <input class="button" style="width: 70px; margin-top: 12px;" type="submit" name="submit" value="Upload"></td>
  </tr></tbody>
 </table>

我们可以相当多地忽略包含文件上传的部分。我只想清楚整个表结构。

头部中包含的.js文件包含以下相关代码：

function doSend_3_1() {
    $.post('./post.4.ConSupAp.php?appID=' + (appID) + '&ident=input_3_1', $('#input_3_1').serialize());
}

$("document").ready(function() {
    $("#input_3_1").blur(doSend_3_1);
})

哪个ajax的数据输入到文本输入字段到这个位的php：

// include the funcky stuff
include './conf/Funcs.php';
include './conf/DBconfig.php';

// GET the constants
$appID = $_GET['appID'];
$ident = $_GET['ident'];

if(($ident) == "input_3_1") {
    $userInput = $_POST['input_3_1'];
    if(($userInput == "") || ($userInput == " ") || ($userInput == NULL)) { $userInput = NULL; }
    try {
        $stmt = $conn->prepare("UPDATE $database.app_ConSupAp SET `nameOfSpeakers` = :userinput, `lastModified` = :time WHERE `appID` = :appid");
        $stmt->bindParam(':userinput', $userInput, PDO::PARAM_STR, 128);
        $stmt->bindParam(':time', time(), PDO::PARAM_INT, 11);
        $stmt->bindParam(':appid', $appID, PDO::PARAM_INT, 11);
        $stmt->execute();
    } catch(PDOException $e) { catchMySQLerror($e->getMessage()); }
}

当用户点击它时，用户输入初始文本输入字段的文本中会很快地删除它。该技术正在整个表单中成功使用。

是的，我还没有成功或错误消息回到面向用户的页面，但是在我对这个查询进行排序之后我会继续讨论。一次一件事，对吗？ ：）

好的，现在我将展示是什么让特定的表输入（文件上传之上的那个）稍微复杂一些。在面向html的页面的头部，我还在标签中获得了以下代码：

$(window).load(function() {
    // trigger event when button is clicked
    $("#button2").click(function() {
        // add new row to table using addTableRow function
        addTableRow($(this),$("#speakersName"));
        // prevent button redirecting to new page
        return false;
    });

    // function to add a new row to a table by cloning the last row and incrementing the name and id values by 1 to make them unique
    function addTableRow(btn,table) {
        // clone the last row in the table
        var $tr = btn.closest($("tr")).clone(true);
        var num;    // Current unique field number
        // Clear the input fields (that are not the button)
        $tr.find(":not(:button)").val("");
        // get the name attribute for the input field
        $tr.find("input").attr("name", function() {
            // break the field name and its number into two parts
            var parts = this.id.match(/(\D+)(\d+)$/);
            num = parts[2]; //Get the number for later
            // create a unique name for the new field by incrementing the number for the previous field by 1
            return parts[1] + ++parts[2];
            // repeat for id attributes
        }).attr("id", function() {
            var parts = this.id.match(/(\D+)(\d+)$/);
            return parts[1] + ++parts[2];
        });
        btn.remove();
        num++;
        // append the new row to the table
        $(table).find(".activity_row:last").after($tr);
    };
});

这个函数在它自己的作用非常好，它以一种无限的方式为其他输入弹出新的表行。我之前曾经使用过一次变体（原本是为它写的），但是没有使用ajax。这个版本按照预期的初始输入值工作，但我相信我需要某种JS foreach函数来将每个额外的新输入文本字段排列成一个值，用分隔符（例如^）分隔，以便我可以将它们分解在php中，用爆炸和foreach计算它们。

正在使用jQuery。

这是我失去的地方，因为我不知道如何实现这一目标。热烈欢迎。 ：）

2 个答案:

答案 0 :(得分：1)

我在http://jsfiddle.net/k3dj214k/2/仔细研究你的工作 现在，我将尝试解释修复错误的所有步骤：

表单页面html：

<form id="ConSupAp_section_3" name="ConSupAp" action="./post.4.ConSupAp.php" method="post" enctype="multipart/form-data"><!-- edited by kazumov@gmail.com -->
    <input type="hidden" name="token" value="3e57334833283e22579f77e3a1ade083edf637bd3f4ab8009bbf1f4d7f517fde">
    <input type="hidden" name="uID" value="1">
    <input type="hidden" name="uaID" value="1">
    <input type="hidden" name="appID" value="1">
    <input type="hidden" name="ident" value="input_3_1"><!-- edited by kazumov@gmail.com --> 

    <h2 style="margin: 0 auto 20px;">Conference Support Application - Section 3</h2>

    <table id="speakersName" style="width: 100%; height: auto;">
        <tbody>
            <tr>
                <td colspan="3" style="padding: 30px;"><span class="h3">3.1</span>Please list names of guest speaker(s). Use the <strong>+1</strong> button to add addtional speakers.</td>
            </tr>
            <tr class="activity_row">
                <td class="right" style="width: 190px;vertical-align:top">Name of Speaker:</td>
                <td id="speakers_list"><!-- edited by kazumov@gmail.com -->
                        <!--<input type="text" name="s" placeholder="Name of Speaker" value="" required>--><!-- edited by kazumov@gmail.com -->
                </td>
                <td>
                    <input type="button" id="btnAddSpeaker" value="&nbsp;+1&nbsp;" class="button" style="width: auto !important; margin: 5px; vertical-align:bottom"><!-- edited by kazumov@gmail.com -->
                </td>
            </tr>
        </tbody>
    </table>
</form>

我添加了一个隐藏的输入并删除了文本输入。 form代码ID应重命名为ConSupAp_section_3。

app_ConSupAp.js版本：

杀死doSend_3_1()功能

// edited by kazumov@gmail.com
//function doSend_3_1() {
//    $.post('./post.4.ConSupAp.php?appID=' + (appID) + '&ident=input_3_1', $('#input_3_1').serialize(), function(data) {
//        $("#errorText_3_1").html(data.errorText_3_1);
//        $("#resultImg_3_1").html(data.resultImg_3_1);
//    }, 'json');
//}

杀死整个模块以进行名称操作：

// edited by kazumov@gmail.com    
//    // trigger event when button is clicked
//    $("#button2").click(function() {
//        // add new row to table using addTableRow function
//        addTableRow($(this), $("#speakersName"));
//        // prevent button redirecting to new page
//        return false;
//    });
//
//    // function to add a new row to a table by cloning the last row and incrementing the name and id values by 1 to make them unique
//    function addTableRow(btn, table) {
//        // clone the last row in the table
//        var $tr = btn.closest($("tr")).clone(true);
//        var num;  // Current unique field number
//        // Clear the input fields (that are not the button)
//        $tr.find(":not(:button)").val("");
//        // get the name attribute for the input field
//        $tr.find("input").attr("name", function() {
//            // break the field name and its number into two parts
//            var parts = this.id.match(/(\D+)(\d+)$/);
//            num = parts[2]; //Get the number for later
//            // create a unique name for the new field by incrementing the number for the previous field by 1
//            return parts[1] + ++parts[2];
//            // repeat for id attributes
//        }).attr("id", function() {
//            var parts = this.id.match(/(\D+)(\d+)$/);
//            return parts[1] + ++parts[2];
//        });
//        btn.remove();
//        num++;
//        // append the new row to the table
//        $(table).find(".activity_row:last").after($tr);
//    };

在脚本页面附加：

// ---------------------------------------------------
// code addition for phase (3) "Speakers" of "Guests"
// edited by kazumov@gmail.com
// ---------------------------------------------------
$(document).ready(function() {

    function addSpeakerNameField() {
        var $txtInput = $("<input type=\"text\" name=\"speakers[]\" placeholder=\"Name of Speaker\" value=\"\" required />");// extended notation to create input element, 'id' is not nesessary
        $("#speakers_list").append($txtInput);
        $txtInput.blur(function(){// change value event    
            $.post(
                    "post.4.ConSupAp.php", // your address of page is different, i made temporary php page to debug
                    $("#ConSupAp_section_3").serialize(),// get all form values
                    function(data) {
                        // actually, your html have no tags with id "errorText_3_1" and "resultImg_3_1"
                        $("#errorText_3_1").html(data.errorText_3_1);// not working
                        $("#resultImg_3_1").html(data.resultImg_3_1);// not working
                    }, 
                    'json');
        });// end of blur() 
    }

    addSpeakerNameField();// the first field

    $("#btnAddSpeaker").click(function() { // add one more field
        addSpeakerNameField();
    });


});
// end of edition by kazumov@gmail.com

如您所见，重要版本是：

a）你应该从代码生成所有输入文本字段，因为它将在一个地方为所有字段创建整个发送例程;

b）你应该命名html中的文本字段，如name="speaker[]"，因为它会在序列化后创建数组;

c）如果要发送静态值，则应在表单中添加隐藏的输入;

d）我建议您删除所有过度导航：

enter image description here

enter image description here

并重命名标签：

enter image description here

最后，在post.4.ConSupAp.php，您将看到名称：

$speakers = $_POST["speakers"];// returns array

您应该将标题添加到post.4.ConSupAp.php 

header("Content-type: application/json");

如果您希望data.errorText_3_1和data.resultImg_3_1输出到表单。

答案 1 :(得分：0)

这看起来像你想要绑定到许多元素的jquery事件，但是当事件 - blur（） - 被绑定时，并没有创建所有这些元素。

您可以将事件绑定到更高的DOM元素，并使用以下语法将事件绑定到新元素：

$("body").on("blur", "input.some_class_name", do_send);

当调用do_send（）时，＆＃34;这个＆＃34;将被定义为生成事件的元素，因此您可以识别需要发布的元素：

function do_send(e) {
    // "this" is the dom element
    var the_id = $(this).attr('id');
    var value = $(this).val();
    // post away!
}
相关问题
最新问题