2011-07-14 6 views
1

でjqueryのを使用している間、私はテキストボックスにいくつかの値を入力し、ボタンをクリックした後値はAJAX

<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> 

の下で、私はデータを取得することができていますように私は、フォームを持っているスパンで保持しているが、それはありませんスパンに留まらない。

問題は何ですか?これをどのように克服できますか?

おかげ

+0

は、あなたが本当にコントロールは、サーバ - を実行する必要がありますか側? –

+0

サーバーラベルコントロールをに変更しましたが、同じ結果を返しました – mcUser

+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 */ } 
      }); 
     }); 
    });