PHP - Jquery - 初学者 - 我做得对吗？ [关闭]

Question

I'm working on a small project and I've never used Jquery before. I would like to know if I'm on the right way before taking more steps.

This is basicly my UI:

 <ul id="Navigation">
      <li id="HomeButton">Home</li>
      <li id="NewsButton">News</li>
      <li id="AboutUsButton">AboutUsButton</li>
 </ul>

 <div id="Content"></div>

 <script type="text/javascript">
      $("#HomeButton").on("click", function(){
           $("#Content").load("pages/home.php");
      }); 
      $("#NewsButton").on("click", function(){
           $("#Content").load("pages/news.php");
      });  
      $("#AboutUsButton").on("click", function(){
           $("#Content").load("pages/asbout_us.php");
      });           
 </script>

Is this right way to build a dynamic jquery UI?

---

This is basicly how I do database related stuff:

File name of an action:

 clear_inventory.php

This code sets inventory slots to 0 in a database table and echo's the result.

UI related to action:

 <button id="ClearInventoryButton">Clear Inventory</button>

 <div id="ClearInventoryResult"></div>

 <script type="text/javascript">
      $("#ClearInventoryButton").one("click", function(){
           $("#ClearInventoryResult").load("actions/clear_inventory.php");
      });

Is this right / secure way to do it?

Thanks for your answers in advance.

Sorry if the question was asked before.

Answer 1

For your first question, you should work on not being redundant and use a general selector like class, then use this to narrow the selection:

<ul id="Navigation">
      <li class="nav_btn" data-link="pages/home.php">Home</li>
      <li class="nav_btn" data-link="pages/news.php">News</li>
      <li class="nav_btn" data-link="pages/asbout_us.php">AboutUsButton</li>
</ul>

<script type="text/javascript">
      $("#Navigation").on("click",".nav_btn", function(){
           window.location  =   $(this).data("link");
      });
</script>

As for your second question, you sound like you are talking about AJAX, that is unclear so I can not comment on that.

EDIT: Regarding AJAX:

You would need to do an ajax call using the $.get, $.post, $.ajax function like:

$("#ClearInventoryButton").click(function() {
    $.ajax({
            url: 'actions/clear_inventory.php',
            type: 'post',
            data: { reset: true }
            success: function(response) {
                    $("#ClearInventoryResult").html(response);
                }
            });
    });