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.

我正在处理一个小项目，我之前从未使用过Jquery。我想知道在采取更多步骤之前我是否走在正确的道路上。 p>

这基本上就是我的用户界面： strong> p>

 ＆lt; ul id =“Navigation”＆gt; 
＆lt; li id =“HomeButton”＆gt; Home＆lt; / li＆gt; 
＆lt; li id =“NewsButton”＆gt; News＆lt; / li＆gt;  
＆lt; li id =“AboutUsButton”＆gt; AboutUsButton＆lt; / li＆gt; 
＆lt; / ul＆gt; 
 
＆lt; div id =“Content”＆gt;＆lt; / div＆gt; 
 
＆lt; script  type =“text / javascript”＆gt; 
 $（“＃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”）; 
}）;  
＆lt; / script＆gt; 
  code>  pre> 
 
 这是构建动态jquery UI的正确方法吗？ p> 
 
 

 这基本上与数据库相关的内容如下： strong>  p> 
 
 
 操作的文件名： em>  p> 
  
 
  clear_inventory.php 
  code>  pre> 
 
 此代码将数据库表中的库存槽设置为0，并回显结果。 p> 
  
 
 与操作相关的UI： em>  p> 
 
 
 ＆lt; button id =“ClearInventoryButton”＆gt;清除广告资源＆lt; / button＆gt; 
 \  n＆lt; div id =“ClearInventoryResult”＆gt;＆lt; / div＆gt; 
 
＆lt; script type =“text / javascript”＆gt; 
 $（“＃ClearInventoryButton”）。one（“click”，function（  ）{
 $（“＃ClearInventoryResult”）。load（“actions / clear_inventory.php”）; 
}）; 
  code>  pre> 
 
 这是否正确/安全 这样做的方法？ p> 
 
 
提前感谢您的回答。 p> 
 
 
如果之前有人问过这个问题，很抱歉。   p> 
  div>

答

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.

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

相关推荐