Javascript 选中复选框时的Ajax调用

我有两个复选框。现在单击其中一个复选框，我想对jsp页面进行ajax调用。该jsp页面将显示一个包含从数据库获取的数据的表

现在，问题是假设我有两个复选框，如：

<div class="search-inputs">

        <input class="searchName" type="text" placeholder="Search Here.."></input>

        <input class="searchType1" type="checkbox" name="emailNotification"><label class="searchtype1label">Email Notification</label></input>
        <input class="searchType2" type="checkbox" name="SharingNotification"><label class="searchtype2label">File Sharing Notification</label></input>


        <input class="searchDateFrom" type="text" placeholder="Search From"></input>
        <input class="searchDateTo" type="text" placeholder="Search To"></input>
        <input class="Datesubmit" type="button" value="Search"></input>
        <div id="container"></div>

---

但是如何在同一页上显示表格？

您必须使用

change

事件来执行以下类似操作：

Html:

<input class="searchType1" type="checkbox" name="emailNotification"><label class="searchtype1label">Email Notification</label></input>
<input class="searchType2" type="checkbox" name="SharingNotification"><label class="searchtype2label">File Sharing Notification</label></input>

<div id="container">
</div>

$('#emailNotification').on('change',function() {

            if(this.checked){

            $.ajax({
                type: "POST",
                url: "searchOnType.jsp",
                data: {mydata:"emailNotification"},
                success: function(data) {
                    alert('it worked');
                    $('#container').html(data);
                },
                 error: function() {
                    alert('it broke');
                },
                complete: function() {
                    alert('it completed');
                }
            });

            }
      });

---

你必须用这个稍微改变你的html--

为两个复选框指定相同的类名

<input class="searchType" type="checkbox" name="emailNotification" id="emailNotification"><label class="searchtype1label">Email Notification</label></input>
 <input class="searchType" type="checkbox" name="SharingNotification" id="SharingNotification"><label class="searchtype2label">File Sharing Notification</label></input>

---

@我编辑了EHSANAJJAD。请检查如何在进行调用的同一页上打印该表？请参阅编辑您需要在其中生成容器div和加载响应html问题出在哪里？是否发送了ajax调用？未发送调用。我尝试打印警报，但未打印警报请参阅编辑，将url置于引号中并检查数据属性更改为什么您从其他答案复制了代码？顺便说一句，我添加了sourceIt。但是为什么该页面的html不显示在这里。为了进行测试，我只在该页面上取一个标题，如“HELLO”，控制台中是否显示任何错误。。？或者你确定ajax得到了正确的url路径吗？是的，我确定成功后，我在alert中打印了数据，它在其他页面上显示了所有html。它是这样的：JSP页面Hello World！他们在控制台上没有错误，因为另一个页面刚刚创建，并且只包含hello world消息

<input class="searchType" type="checkbox" name="emailNotification" id="emailNotification"><label class="searchtype1label">Email Notification</label></input>
 <input class="searchType" type="checkbox" name="SharingNotification" id="SharingNotification"><label class="searchtype2label">File Sharing Notification</label></input>

$('.searchType').click(function() {
    alert($(this).attr('id'));  //-->this will alert id of checked checkbox.
       if(this.checked){
            $.ajax({
                type: "POST",
                url: 'searchOnType.jsp',
                data: $(this).attr('id'), //--> send id of checked checkbox on other page
                success: function(data) {
                    alert('it worked');
                    alert(data);
                    $('#container').html(data);
                },
                 error: function() {
                    alert('it broke');
                },
                complete: function() {
                    alert('it completed');
                }
            });

            }
      });