我有一个jquery函数，该函数获取两个值，一个用于学校/学院，一个用于状态，并将其发送到url“ Type＆State”下的控制器类，但由于某种原因，它未传递数据，因此在控制台中未显示任何内容也是
请注意：我也尝试过删除“ window.addEventListener（'load'，function（）”，以查看是否是引起问题的原因，但是删除它却没有任何进展，还是可以的，有人可以告诉我这是什么吗？阻止脚本执行
function myfunction() {
var checkedName = document.querySelector('input[name="case-type"]:checked'),
checkedType = document.querySelector('input[name="state-name"]:checked'),
name = checkedName ? checkedName.value : "Nothing selected",
type = checkedType ? checkedType.value : "Nothing selected"
$.ajax({ // defining the below function as ajax responsive//
url: 'Type&State', // the function that process the mapped url name and matching type is going to receive the data//
type: 'POST',
data: {
state_name: name,
case_type: type
}, // function to get the value from jsp page and send it to mapped class function//
success: function(response) { // if the backend process is success then the function will run by getting the response as its parameter//
alert(response.message);
data = response.data;
$('.tr').remove();
if (response.indexOf("school_name") > -1) {
for (i = 0; i < response.data.length; i++) {
$("#table").append("<tr class='tr'> <td> " + response.data[i].school_name + " </td> <td> " + response.data[i].school_email);
}
} else {
for (i = 0; i < response.data.length; i++) {
$("#table").append("<tr class='tr'> <td> " + response.data[i].college_name + " </td> <td> " + response.data[i].college_email);
}
}
},
error: function(response) {
alert("unable to pull up any colleges or schools for the selected state");
}
});
}
// to remove default checked:
window.addEventListener('load', function() {
var checkedNames = document.querySelectorAll('input[name="case-type"]:checked'),
checkedTypes = document.querySelectorAll('input[name="state-name"]:checked');
for (var i = 0, n = checkedNames.length; i < n; i++) {
checkedNames[i].checked = false;
}
for (var i = 0, n = checkedTypes.length; i < n; i++) {
checkedTypes[i].checked = false;
}
});<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<div>
<input type="radio" name="case-type" class="ButtonState" id="school" value="-1" />
<label class="Button" for="school"> school </label>
<input type="radio" name="case-type" class="ButtonState" id="college" value="-2" />
<label class="Button" for="college">college</label>
</div>
<br> <br>
<div>
<input type="radio" name="state-name" class="ButtonState" id=" Ontario " value="1" />
<label class="Button" for=" Ontario "> Ontario </label>
<input type="radio" name="state-name" class="ButtonState" checked id=" British Columbia " value="2" />
<label class="Button" for=" British Columbia "> British Columbia </label>
<input type="radio" name="state-name" class="ButtonState" id=" Quebec " value="3" />
<label class="Button" for=" Quebec "> Quebec </label><input type="radio" name="state-name" class="ButtonState" id=" Alberta " value="4" />
<label class="Button" for=" Alberta "> Alberta </label><input type="radio" name="state-name" class="ButtonState" id=" Nova Scotia " value="5" />
<label class="Button" for=" Nova Scotia "> Nova Scotia </label><input type="radio" name="state-name" class="ButtonState" id=" Saskatchewan " value="6" />
<label class="Button" for=" Saskatchewan "> Saskatchewan </label><input type="radio" name="state-name" class="ButtonState" id=" Manitoba " value="7" />
<label class="Button" for=" Manitoba "> Manitoba </label><input type="radio" name="state-name" class="ButtonState" id=" New Brunswick " value="8" />
<label class="Button" for=" New Brunswick "> New Brunswick </label><input type="radio" name="state-name" class="ButtonState" id=" New founded land " value="9" />
<label class="Button" for=" New founded land "> New founded land </label><input type="radio" name="state-name" class="ButtonState" id=" Prince Edward Isand " value="10" />
<label class="Button" for=" Prince Edward Isand "> Prince Edward Isand </label>
</div>
<br>
<input type="button" value="Go" onclick="myfunction()" />
</form>
答案 0 :(得分：1)
首先清理代码。另外，请检查控制台网络标签，以查看服务器是否响应您的期望
$(function() {
$('input[name="case-type"]:checked', 'input[name="state-name"]:checked').prop("checked", false);
$("#goBut").on("click", function() {
var name = $('input[name="state-name"]:checked').val() || "Nothing selected",
type = $('input[name="case-type"]:checked').val() || "Nothing selected";
$.ajax({ // defining the below function as ajax responsive//
url: 'Type&State', // the function that process the mapped url name and matching type is going to receive the data//
type: 'POST',
data: {
state_name: name,
case_type: type
}, // function to get the value from jsp page and send it to mapped class function//
success: function(response) { // if the backend process is success then the function will run by getting the response as its parameter//
console.log(response.message);
data = response.data;
$('#table').empty();
var school = response.indexOf("school_name") > -1; // this is suspicious
$.each(response.data, function(item) {
var name = school ? item.school_name : item.college_name,
email = school ? item.school_email : item.college_email;
$("#table").append("<tr class='tr'><td>" + name + "</td><td>" + email + "</td></tr>");
})
},
error: function(response) {
alert("unable to pull up any colleges or schools for the selected state");
}
});
});
});<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<div>
<input type="radio" name="case-type" class="ButtonState" id="school" value="-1" />
<label class="Button" for="school"> school </label>
<input type="radio" name="case-type" class="ButtonState" id="college" value="-2" />
<label class="Button" for="college">college</label>
</div>
<br> <br>
<div>
<input type="radio" name="state-name" class="ButtonState" id=" Ontario " value="1" />
<label class="Button" for=" Ontario "> Ontario </label>
<input type="radio" name="state-name" class="ButtonState" checked id=" British Columbia " value="2" />
<label class="Button" for=" British Columbia "> British Columbia </label>
<input type="radio" name="state-name" class="ButtonState" id=" Quebec " value="3" />
<label class="Button" for=" Quebec "> Quebec </label><input type="radio" name="state-name" class="ButtonState" id=" Alberta " value="4" />
<label class="Button" for=" Alberta "> Alberta </label><input type="radio" name="state-name" class="ButtonState" id=" Nova Scotia " value="5" />
<label class="Button" for=" Nova Scotia "> Nova Scotia </label><input type="radio" name="state-name" class="ButtonState" id=" Saskatchewan " value="6" />
<label class="Button" for=" Saskatchewan "> Saskatchewan </label><input type="radio" name="state-name" class="ButtonState" id=" Manitoba " value="7" />
<label class="Button" for=" Manitoba "> Manitoba </label><input type="radio" name="state-name" class="ButtonState" id=" New Brunswick " value="8" />
<label class="Button" for=" New Brunswick "> New Brunswick </label><input type="radio" name="state-name" class="ButtonState" id=" New founded land " value="9" />
<label class="Button" for=" New founded land "> New founded land </label><input type="radio" name="state-name" class="ButtonState" id=" Prince Edward Isand " value="10" />
<label class="Button" for=" Prince Edward Isand "> Prince Edward Isand </label>
</div>
<br>
<input type="button" value="Go" id="goBut" />
</form>
<table>
<tbody id="table">
</tbody>
</table>