Question

我有一个jsp页面。有一些复选框。我想获取复选框的值并将它们附加到ajax的数据中：通过调用ajax，div将打开，checkbox的值将如下所示：

水果：Lichi，芒果

我的JSP页面是：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<script type="text/javascript" language="javascript" src="http://www.technicalkeeda.com/js/javascripts/plugin/jquery.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Spring Jquery Ajax Demo</title>
<style>
Table.GridOne {
    padding: 3px;
    margin: 0;
    background: lightyellow;
    border-collapse: collapse;  
    width:35%;
}
Table.GridOne Td {  
    padding:2px;
    border: 1px solid #ff9900;
    border-collapse: collapse;
}
</style>
<script type="text/javascript">

function madeAjaxCall(){

     var country = $('#country').val();
     var gender = $('input:radio[name=sex]:checked').val();
     var val = [];
     var fruit = new Array();
     $(':checkbox:checked').each(function(i){
       val[i] = $(this).val();
       fruit.push(val[i]);
       alert(val[i]);
     });

     var objj = {
             fruits: fruit,

         };
     alert(objj);
    $.ajax({
        type: "post",
        url: "http://localhost:8080/SpringAjaxQuery/employee",
        cache: false,       

        data:'firstName=' + $("#firstName").val() + "&lastName=" + $("#lastName").val() + "&email=" + $("#email").val() + "&gender=" + gender + "&country=" + country +  "&fruits=" +JSON.stringify(objj),
        success: function(response){
            $('#result').html("");
            var obj = JSON.parse(response);
            $('#result').html("First Name:- " + obj.firstName +"</br>Last Name:- " + obj.lastName  + "</br>Email:- " + obj.email + "</br>Gender:- " + obj.gender + "</br>Country:- " + obj.country + "</br>fruit:- " 
                    + obj.fruits);
            document.forms["employeeForm"].reset();

        },
        error: function(){                      
            alert('Error while request..');
        }
    });

}
</script>
</head>
<body class="body">
    <form name="employeeForm" method="post">    
        <table cellpadding="0" cellspacing="0" border="1" class="GridOne">
            <tr>
                <td>First Name</td>
                <td><input type="text" class="removeLater" name="firstName" id="firstName" value=""></td>
            </tr>
            <tr>
                <td>Last Name</td>
                <td><input type="text" class="removeLater" name="lastName" id="lastName" value=""></td>
            </tr>
            <tr>
                <td>Email</td>
                <td><input type="text" class="removeLater" name="email" id="email" value=""></td>
            </tr>
            <tr>
                <td>Country</td>
                <td><select id="country" class="removeLater">
                       <option value="None">-- Select --</option>
                       <option value="China">China</option>
                       <option value="United State">United State</option>
                       <option value="Malaysia">Malaysia</option>
                       <option value="Bangladesh">Bangladesh</option>
                      </select></td>
            </tr>
            <tr>
                <td id="genderradio" class="removeLater">Gender</td>
                <td>        <input type="radio" name="sex" value="Male">Male</input>
                            <input type="radio" name="sex" value="Female">Female</input>
                            <input type="radio" name="sex" value="Unknown">Other</input>
                                                                                          </td>
            </tr>
            <tr>
                <td>Favourite Fruit</td>
                <td><input name="selector[]" id="ad_Checkbox1" class="removeLater" type="checkbox" value="Apple" />Apple
                    <input name="selector[]" id="ad_Checkbox2" class="removeLater" type="checkbox" value="Lichi" />Lichi
                    <input name="selector[]" id="ad_Checkbox3" class="removeLater" type="checkbox" value="Mango" />Mango
                    <input name="selector[]" id="ad_Checkbox4" class="removeLater" type="checkbox" value="Banana" />Banana</td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="button" value="Ajax Submit" onclick="madeAjaxCall();"></td>
            </tr>
        </table>
    </form>
     <h1>Spring Framework Jquery Ajax</h1>
    <div id="result" ></div>
</body>
</html>

：

Answer 1

我认为水果输入的价值不太好接受尝试更改获取复选框值的代码段代码

var checkboxValues = [];
$('input.removeLater:checked').map(function() {
            checkboxValues.push($(this).val());
});

现在当你执行console.log(checkboxValues)时，它会显示已检查的数据。

$("input.test").click(function(){
  getCheckboxVal();
});

function getCheckboxVal(){
var checkboxValues = [];
$('input.removeLater:checked').map(function() {
            checkboxValues.push($(this).val());
});
console.log(checkboxValues);
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="selector[]" id="ad_Checkbox1" class="removeLater" type="checkbox" value="Apple" />Apple
                    <input name="selector[]" id="ad_Checkbox2" class="removeLater" type="checkbox" value="Lichi" />Lichi
                    <input name="selector[]" id="ad_Checkbox3" class="removeLater" type="checkbox" value="Mango" />Mango
                    <input name="selector[]" id="ad_Checkbox4" class="removeLater" type="checkbox" value="Banana" />Banana

<input type="button" value="Ajax Submit" class="test" >

如何在Ajax中发送多个复选框值并显示在不同的div中？

1 个答案: