使用带有ajax的jquery时,值不会保留在span中

时间:2011-07-14 10:18:38

标签: jquery asp.net

我有

下的表格
    <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>

    <script type="text/javascript" src="JQuery/jquery-1.6.1.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
        $("#btnSubmit").click(function() {
                $.ajax(
            {
                url: "Default2.aspx",
                data: "get=" + document.getElementById("TextBox1").value,
                success: function(data) {
                $('#lblServerResponse').html(data);
                },
                error: function() { alert(arguments[2]); }
            });

            });
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>
                    Enter your name:
                </td>
                <td>
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                </td>
                <td>
                    <asp:Button ID="btnSubmit" runat="server" Text="Click Me" />
                </td>
            </tr>
            <tr>
                <td>
                Server Response:
            </td>
            <td>           
                <span id="lblServerResponse"/>
            </td>
            </tr>

        </table>
    </div>
    </form>
</body>
</html>

在文本框中输入一些值并单击按钮后,我可以获取数据,但不会保留在范围内。

问题是什么?如何克服这个问题?

由于

1 个答案:

答案 0 :(得分:0)

如果可以,请改用客户端元素:

<form id="form1">
<div>
    <input type="button" id="Button1" value="Button" />
    <input type="text" id="TextBox1" />
    <span id="Blah"></span>
    <!-- the hidden input may no longer be required -->
    <input type="hidden" id="Label1" />
</div>
</form>

然后你的javascript就像:

    $(document).ready(function() {
        $("#Button1").click(function() {
          $.ajax(
          {
            url: "Default2.aspx",
            data: "get=" + $("#TextBox1").val(),
            success: function(data) {
                $('#Blah').html(data);
                $('#Label1').html(data); //the hidden input may no longer be required
            },
            error: function() { /* handle here */ }
          });
        });
    });