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

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.

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);
                }
            });
    });

It depends what the pages actually have. Firstly have a look at the jQuery docs for Load() - it has complete handler which I would suggest you use. At the moment your code would work, bar the last snippet which has a "one" instead of "on".

I would make use of the completion & error handler, so if there is a problem server side with PHP and you get an error code you can process this. You could also load in fragments of a page with Load() - say you had two div's in home one called my account and other called overview, if someone clicked a new menu item 'overview' you could just load the home page and tell Load() to only take the overview div.