当我点击锚时，用ajax做一个动作

Question

我尝试找到一个代码启用来执行这样的操作：

我的链接看起来像这样：

<li><a href="#newgame" id="linknewgame">Jouer</a></li>

此链接的目的地是。本文仅在我点击链接的页面上提供时，他将通过CSS提供：

#main {
		-moz-flex-grow: 1;
		-webkit-flex-grow: 1;
		-ms-flex-grow: 1;
		flex-grow: 1;
		-moz-flex-shrink: 1;
		-webkit-flex-shrink: 1;
		-ms-flex-shrink: 1;
		flex-shrink: 1;
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		position: relative;
		max-width: 100%;
		z-index: 3;
	}

		#main article {
			-moz-transform: translateY(0.25rem);
			-webkit-transform: translateY(0.25rem);
			-ms-transform: translateY(0.25rem);
			transform: translateY(0.25rem);
			-moz-transition: opacity 2.325s ease-in-out, -moz-transform 0.325s ease-in-out;
			-webkit-transition: opacity 2.325s ease-in-out, -webkit-transform 0.325s ease-in-out;
			-ms-transition: opacity 2.325s ease-in-out, -ms-transform 0.325s ease-in-out;
			transition: opacity 2.325s ease-in-out, transform 0.325s ease-in-out;
			padding: 4.5rem 2.5rem 1.5rem 2.5rem ;
			position: relative;
			width: 90rem;
			max-width: 100%;
			background-color: rgba(27, 31, 34, 0.85);
			border-radius: 4px;
			opacity: 0;
		}

			#main article.active {
				-moz-transform: translateY(0);
				-webkit-transform: translateY(0);
				-ms-transform: translateY(0);
				transform: translateY(0);
				opacity: 1;
			}

所以，我尝试只在屏幕上显示内容时加载内容。用ajax或者我实际上不知道xD

我的下一个代码将是这样的：

      <script>
        $(document).ready(function(){
                $.ajax({
                        url: "http://localhost/api/pages/newgame",
                        method: "GET",
                        data: "token=3660935154fe3d7e9612466f6e70fbe6",
                        dataType: 'json',
                        success: function(json) {
                                console.log(json);
                                $("#response").append("<p><b>Page title: " + json.data.content+"</p>");
                        },
                        error: function(data) {
                                console.log("Error");
                        }
                });
        });
        </script>

谢谢你的帮助。

Answer 1

<强> HTML

 <li><a href="#newgame" onclick="yourAJAXFunction()" id="linknewgame">Jouer</a></li>

<强> JS

 function yourAJAXFunction(){
  $.ajax({
       url: "http://localhost/api/pages/newgame",
       method: "GET",
       data: "token=3660935154fe3d7e9612466f6e70fbe6",
       dataType: 'json',
       success: function(json) {
            console.log(json);
            $("#response").append("<p><b>Page title: " + json.data.content+"</p>");
            },
             error: function(data) {
                 console.log("Error");
             }
    });
 }