Question

需要一些关于页面设计和Ajax调用的反馈和指导。只是fyi，应用程序是基于nodejs的。

初始网页是一个表，其中最初只显示第一列。像这样的东西 -

   Category       SubCategories              

   Cars           
   Trucks
   SUV

当用户选择汽车时，它应该填充SubCategories列 - 福特，本田等。所以页面应该显示如下 -

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

Answer 1

检查您是否在脚本标记中正确提及了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或元素

关于页面布局和ajax调用的反馈

1 个答案: