javascript - ajax、php、mysql 和 javascript 的棘手情况

标签 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。

这就是我迷失的地方，因为我不知道如何实现这一目标。受到热烈的帮助。 :)

最佳答案

我仔细研究了你的工作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

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

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

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

关于javascript - ajax、php、mysql 和 javascript 的棘手情况，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28401813/

上一篇：javascript - JavaScript 中的正则表达式

下一篇：javascript - 如果 div 为空，则在显示按钮之前延迟...不起作用

相关文章：

javascript - 单击产品时动态生成页面内容

javascript - 打开键盘android，隐藏内容phonegap

javascript - 将带有平均数据的新对象添加到 JavaScript 数组中

javascript - JQVMap - Ajax 悬停调用，标签问题

javascript - 如何更改点击时的href值

jquery - 有什么方法可以确定 HTML 选择当前是否打开？

javascript - 使用新数据重新填充选项卡

javascript - 如何使用传单/javascript 检查点是否在半径内？

jquery - 使用 AJAX 和 Fancybox 1.3 加载内容

javascript - 如果远程加载，带有AudioJS的HTML5音频不稳定

©2024 IT工具网  联系我们