2010-03-01 6 views
3

jQuery AJAX에 대해 망설이고 이상한 점을 발견했습니다. 여기 내 주요 ASPX 페이지의 코드입니다jQuery AJAX - 반환 된 HTML이 사라짐

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="jQuery_Test.WebForm1" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#btnGo').click(function() { 
       $.ajax({ 
         type: "GET", 
         url: 'GetValues.aspx', 
         contentType: 'text/html', 
         success: function (html) { $("#Yo").append(html); } 
       }); 
      }) 
     }); 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <p id="Yo">Yo there!</p> 
     <br /> 
     <a href="#" class="yo">Yo there!</a> 
     <br /> 
     <a href="#">I'm in a DIV!</a> 
     <br /> 
     <button id="btnGo">Go</button> 
    </div> 
    <br /> 
    <br /> 
    <a href="#">I'm not in a DIV!</a> 
    </form> 
</body> 
</html> 

는 여기에 'GetValues.aspx'페이지의 코드 숨김입니다 :

시스템을 사용하여;

namespace jQuery_Test 
{ 
    public partial class GetValues : System.Web.UI.Page 
    { 
     protected void Page_Load(object sender, EventArgs e) 
     { 
      Response.ContentType = "text/html"; 
      Response.Write("<a href='#'>Hello World</a>"); 
      Response.End(); 
     } 
    } 
} 

내가하고있는 일은 메인 페이지에서 '이동'버튼을 클릭하면 단락 옆에 앵커 태그를 넣기를 원합니다.

코드가 실제로 작동하지만 앵커 'Hello World'가 약 1 초 동안 나타난 다음 사라집니다. 누군가 내가 잘못하고있는 것을 지적 할 수 있습니까? VS 2010 Ultimate과 함께 제공되는 jQuery-1.3.2.mins.js를 사용하고 있습니다.

건배. Jas. 핸들러 코드가 실행됩니다 일단

+1

Ajax 호출을 실행하는 것 외에도 단추가 포스트 백을 트리거 할 수 있습니까 (추가 된 텍스트가없는 페이지가 다시 그려지기 때문)? –

+0

@JacobM - 버튼을 사용하여 이러한 종류의 작업을 수행하는 것이 가장 좋습니다. 나는 jQuery에 익숙하지 않으므로 모든 팁을 높이 평가할 것이다. –

답변

3

이 함수를 return false;

$(document).ready(function() { 
     $('#btnGo').click(function() { 
      $.ajax({ 
        type: "GET", 
        url: 'GetValues.aspx', 
        contentType: 'text/html', 
        success: function (html) { $("#Yo").append(html); } 
      }); 

      return false; 
     }) 
    }); 
+0

탑 맨! 매력처럼 일했습니다. –

0

을, 버튼을 강행하고 정상 기능 (페이지에 게시)을 수행한다. 핸들러가 끝날 때 false를 반환하면 이벤트는 버블 링되지 않으며 버튼은 게시되지 않습니다.

관련 문제