在勾选复选框时进行Ajax调用

Question

在勾选复选框时进行Ajax调用

3

我有两个复选框。现在，在单击其中一个复选框时，我想要对一个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>

如何做？请帮忙。

My Script part : 

$(document).ready(function () {

            $('.search-select').on('change', function(){
            $('.search-inputs').children().hide();
            var classn =$(this).find(":selected").val();
            //alert(classn);
            if(classn=='searchName')
                {
                    //alert("searchname");
                    $('.'+"searchName").show();
                }
                else if(classn=='searchType')
                {
                    //alert("searchType");
                    $('.'+"searchType1").show();
                    $('.'+"searchtype1label").show();
                    $('.'+"searchType2").show();
                    $('.'+"searchtype2label").show();
                }
                else if(classn=='searchDate'){
                    //alert("searchType");
                    $('.'+"searchDateFrom").show();
                    $('.'+"searchDateTo").show();
                    $('.'+"Datesubmit").show();
                }

            });

            $('#emailNotification').on('change',function() {
            //var checked = $(this).is(':checked');
            if(this.checked){

            //alert("in");
            $.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');
                }
            });

            }
      });

      });

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

- user3522121

@EhsanSajjad 我进行了编辑。请检查。 - user3522121

2个回答

2

您需要使用以下代码来处理此类问题：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>

JQuery:

$('#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');
                }
            });

            }
      });

- Ehsan Sajjad

表格将如何在发起调用的同一页上被打印？ - user3522121

你需要创建一个容器 div 并将响应的 HTML 加载到其中。 - Ehsan Sajjad

1

没有任何调用被发送。我尝试打印警告，但没有警告被打印。 - user3522121

@EhsanSjjad 仍然没有成功。你觉得这样正确吗：$('#emailNotification').on('change', function()？我编辑了我的HTML部分。请再检查一遍。 - user3522121

它是否进入了检查的if语句？ - Ehsan Sajjad

显示剩余3条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- shashank · Accepted Answer

您需要稍微更改您的 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>

现在稍微改变jquery部分--

$('.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');
                }
            });

            }
      });