0

需要一些关于页面设计和 Ajax 调用的反馈和指导。仅供参考，该应用程序是基于 nodejs 的。

初始网页是最初仅显示第一列的表格。像这样的东西-

   Category       SubCategories              

   Cars           
   Trucks
   SUV

当用户选择 Cars 时，它应该在 SubCategories 列中填充 - Ford、Honda 等。所以页面应该像这样显示 -

   Category       SubCategories                
   Cars  >        Ford
   Trucks         Honda
   SUV            Fiat

HTML 视图 

<body>
    <div id="category-container">      
        <h1></h1>
        <p id="sub1" class="subheading">Select a category</p>    
        <div style="margin:20px" class="container">
          <table class="table table-bordered table-striped">
            <thead>
              <tr>                
                <th style="width:180px">Category</th>
                <th style="width:200px">SubCategory</th>                
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <div id="myid"><a href="/playground/:0">Electronics</a></div>
                </td>
              </tr>
              <tr>
                <td>
                  <div id="myid"><a href="/playground/:1">Real Estate</a></div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>   
    </div>
</body>

当用户单击 Cars 时，我计划创建一个 ajax 调用并从服务器获取数据。ajax 响应将填充到第二列中。

问题 - 上表不是表格。表格是否必须是进行 Ajax 调用的表单？

这是最初的 jquery 代码，最终我希望进行 Ajax 调用，但是当我单击这些表项时，它没有执行警报弹出窗口。任何人都可以帮助我使用 jquery 代码进行 Ajax 调用吗？

当我在 jsfiddle 中运行此代码时，它会触发警报语句，不确定为什么当我在本地运行它时它不做同样的事情。

jQuery代码：

$(document).ready(function () {             
    $(".myid").click(function () {  
         alert("Element selected"); 
    });                               
});
4

1 回答 1

0

检查您是否在脚本标签中正确提及了 jquery CDN 链接或 jquery 文件的路径

首先，对于ajax提交，它不必是表单，您可以触发AJAX onclick、onselect、onchange等。点击汽车时，服务器返回的数据可以是html数据，您只需将数据填充到成功元素。

例如。

$.ajax({
            type: 'GET',
            url: destinationUrl,
            data: content,
            success: function(data) {
            $('#successDiv').html(data); // here you have your html data
            }
        });

其中 successDiv 是要填充数据的 div 或元素

于 2013-09-10T04:29:14.107 回答