如何从文本框 jquery 和 ajax 中获取值？答案

【问题标题】：How to get the value from a textbox jquery and ajax?如何从文本框 jquery 和 ajax 中获取值？
【发布时间】：2014-12-22 09:45:48
【问题描述】：

我正在尝试从文本框中获取一个值并将其发布到表上，但是当我尝试 console.log 成功：函数（数据）中的“数据”时，它显示空数据。但是，如果我在 $.ajax 之外对其进行控制台，它会显示正确的值。

这是我的 jquery 函数

function SaveData() {

            var data = $("#inputToDo").val();
            $.ajax({
                type: "POST",
                dataType: "json",
                success: function (data) {
                    var row = "";
                    $.each(data, function (index, value) {
                        console.log(data);
                        row += "<tr><td>" + data + "</td></tr>";
                        $("#bod").html(row);  
                    });
                }
            });
            console.log(data);
            data = $("#inputToDo").val("");
            $("#inputToDo").focus();

    }

我的html：

<input id="inputToDo" name="inputToDo" />
<button id="buttonSave" name="buttonSave" onclick="SaveData()">
    Save
</button>

<table id="tableToDo" border="1">
    <tr>
        <td id ="ToDo"></td>
        <td id ="Execution"></td>
    </tr>
    <tbody id="bod"></tbody>
</table>

任何帮助将不胜感激。谢谢

【问题讨论】：

它们是两个不同的data变量
ajax函数中没有URL，对吗？

标签： javascript jquery ajax json

【解决方案1】：

我已经为你做了一个工作小提琴。

我基本上对 JavaScript 做了一些改动，我假设你已经包含了 jquery...

$('document').ready(function(){
    SaveData = function(){
        var data = $("#inputToDo").val();
        alert(data);
    }
}

这是Fiddle

【讨论】：

【解决方案2】：

您将数据用作变量 (var data = $ ( "#inputToDo" ). val ();) 和参数 (success : function ( data ) {)。

当你在success-mentod里面尝试时，data将引用ajax成功响应，在外面它将引用data变量，即你的“#inputToDo”值

您可以像下面的代码一样使用 inputToDoVal，而不是使用可变数据

var inputToDoVal = $ ( "#inputToDo" ). val ();

【讨论】：

【解决方案3】：

var data = $("#inputToDo").val();       // outer variable

success: function (data)                //inner variable
{            

            //please note here you are access data variable of success function.
            // which is passed as parameter so outer data variable will always 
            //get override by inner variable
}

解决方案：尝试更改外部变量的名称，然后尝试

【讨论】：

【解决方案4】：

*  <div class="row">
                <div class="form-group">
                    <div class="col-lg-4 col-md-4 col-sm-4">
                        <label>
                            To Account Number:
                           <input type="text" id="txtcaccno" runat="server" ClientIdMode="static" class="form-control" autocomplete="off" />
                        </label>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4">
                        <input type="button" class="btn btn-success" class="form-control" onclick="search();" value="View" />
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4">
                        <label>
                            Account Name: 
                            <input type="text" id="txtcaccname" runat="server" ClientIdMode="static" class="form-control" autocomplete="off" />
                        </label>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4">
                        <label>
                            Account Phone: 
                            <input type="text" id="txtcaccphone" runat="server" ClientIdMode="static" class="form-control" autocomplete="off" />
                        </label>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4">
                        <label>
                            Account Email: 
                            <input type="text" id="txtcaccemail" runat="server" ClientIdMode="static" class="form-control" autocomplete="off" />
                        </label>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4">
                        <label>
                            Account Type: 
                           <input type="text" id="txtcacctype" runat="server" ClientIdMode="static" class="form-control" autocomplete="off" />
                        </label>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4">
                        <label>
                            Balace Amount: 
                            <input type="text" id="txtcamou" runat="server" ClientIdMode="static" class="form-control" autocomplete="off" />
                        </label>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4">
                        <label>
                            Current Balace Amount: 
                            <input type="text" id="txtcurrcamou" runat="server" ClientIdMode="static" class="form-control" autocomplete="off" />
                        </label>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4">
                        <input type="button" class="btn btn-success" class="form-control" onclick="appro();" value="Approved" />
                    </div>
                </div>
            </div>*

【讨论】：

【解决方案5】：

替换下面的代码

$("#bod").html(row);

到

$("#bod").append(row);

它工作。 Append 用于将 jquery 中的数据添加到 html 中。如果您得到解决方案，请标记正确答案。

【讨论】：