javascript - Ajax 새로고침 문제-PHP 튜토리얼-php.cn

javascript - Ajax 새로고침 문제

WBOY

풀어 주다： 2016-10-10 11:56:09

원래의

1078명이 탐색했습니다.

단지 해당 콘텐츠를 표시할 파티션을 클릭하면 됩니다. 하지만 현재 문제는 href 링크를 어떻게 작성해야 할지 모른다는 것입니다. 페이지에 쓸 수 없습니다. #. href="1.html"라고 적으면 데이터가 먼저 표시되었다가 페이지가 비어서 표시할 수 없으면 어떻게 해야 하나요? 점프를 방지하고 싶지는 않습니다. ajax를 사용하면 페이지를 새로 고치기 위해 점프할 필요가 없습니다. 이게 달성됐어?

<code>代码只是大概描述一下
1.html
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
       document.getElementById('java').onclick=function(){
          div.innerHTML=str;
       }
    </script>
</head>
<body>
<a href="#" id="java">java</a>
<a href="#" id="php">php</a>
<div></div>
</body>
</html></code>

로그인 후 복사

답글 내용:

<code>代码只是大概描述一下
1.html
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
       document.getElementById('java').onclick=function(){
          div.innerHTML=str;
       }
    </script>
</head>
<body>
<a href="#" id="java">java</a>
<a href="#" id="php">php</a>
<div></div>
</body>
</html></code>

로그인 후 복사

별도의 URL을 작성하세요. ajax 새로 고침 또는 가져오기 중 하나입니다. 실제로는 큰 문제가 되지 않는 작은 섹션이 많고, 백엔드 역시 매우 쉽습니다. 데이터 형식은 기본적으로 동일하므로 경로 일치 시 요청한 URL과 일치하도록 정규식을 작성한 다음 컨트롤러에서 데이터를 처리하고 URL에 따라 다른 데이터를 반환하면 됩니다. 또한 프런트 엔드 템플릿은 크게 변경할 필요가 없으며 재사용 가능성이 높습니다.

이벤트 핸들러에서 preventDefault 또는 return false을 호출하여 브라우저의 기본 동작(여기서 기본 동작은 점프)을 방지할 수 있습니다. 또한 Ajax가 아닌 서버 렌더링입니다.

마지막으로 이 책을 사서 체계적으로 공부하는 것을 추천합니다. 이런 질문은 정말 너무 기본적이어서 체계적으로 공부하지 않았더라도 질문하는 것보다 API를 검색하거나 확인하는 것이 훨씬 효율적입니다

<a>의 href이 무엇이든 관계없이 이벤트

의 기본 동작을 방지할 수 있습니다.

다음은 jQuery 코드인데, 네이티브 코드도 유사하며, 이벤트의 PreventDefault()를 호출하거나 false을 반환합니다.

<code class="javascript">$("#java").on("click", e => {
    e.preventDefault();
});</code>

로그인 후 복사

하지만 href 아무것도 하지 않도록 직접 설정할 수도 있습니다

<code class="html"><a href="javascript: void(0)" ...>...</a></code>

로그인 후 복사

페이지를 클릭하면 이 페이지에 해당하는 js 코드가 백그라운드로 HTTP GET 요청을 보내고, 백그라운드에서는 해당(예: java/php 등) 데이터를 반환합니다.