jquery - 在 ajax 完成函数调用中触发失败
问题描述
我想对ajax
通话中收到的数据进行一些检查,如果通过,则继续进行发布请求。
在提交表单时,我GET
向api/customers/all
包含用户名对象的请求发出请求。我想检查formData
此对象中是否不存在其中包含的数据。这是我正在尝试的:
$( document ).ready(function() {
// SUBMIT FORM
$("#userForm").submit(function(event) {
event.preventDefault();
if(checkName()){
//Post the data somewhere
ajaxPost();
}
});
function checkName(){
// PREPARE FORM DATA
var formData = {
firstname : $("#firstname").val()
}
var addName = true;
// GET POST
$.ajax({
type : "GET",
contentType : "application/json",
url : window.location + "api/customers/all",
dataType : 'json'})
.done(function(names) {
var allNames = [];
$.each(names, function(i, name){
allNames.push(name.firstname);
});
console.log("Here is the entered name: " + formData.firstname);
if(!allNames.includes(formData.firstname)){
if(confirm("Are you sure you want to add " + formData.firstname + " as a new name?")){
console.log(formData.firstname + " is going to be added to the database");
// PASS
} else{
console.log(formData.firstname + " will NOT to added to the database");
// FAIL
}
// PASS
}
})
.fail(function(e) {
alert("Error!")
console.log("ERROR: ", e);
});
}
})
ajaxPost()
只有当我的.done
函数调用通过时,我才想继续。这可能吗?
解决方案
嗨,河豚,这里是一个例子:
的HTML:
<body>
<label for="txtName">Name: </label>
<input type="text" name="txtName" id="txtName" >
<br>
<input type="button" name="btnTestMe" id="btnTestMe" value="Test Me !!">
</body>
json:
{
"names": [{
"name": "Tom Cruise",
"age": 56
},
{
"name": "Robert Downey Jr.",
"age": 53
},
{
"name": "Stan Chacon",
"age": 1000
}
]
}
js:
//this function will do a recursive loop to find the value on your json array
function findInObject(o, f) {
return Object.keys(o).some(function (a) {
if (Array.isArray(o[a]) || typeof o[a] === 'object' && o[a] !== null) {
return findInObject(o[a], f);
}
return o[a] === f;
});
}
//function that return an ajax call this will helps us to manage the done
function ajaxRequest (name){
return $.ajax({
url: 'names.json',
type: 'GET',
dataType: 'JSON'
})
}
//click event to trigger the ajax function
$('#btnTestMe').on('click', function(event) {
var name = $('#txtName').val();
ajaxRequest(name)
.done(function(response) {
var status = findInObject(response,name);
if (status) {
console.log("name is already on db");
}else {
console.log("name is avaliable on db =)");
}
})
.fail(function(response) {
console.log("error");
})
.always(function(response) {
console.log("do another stuff here like load a dialog :D");
});
希望能帮助到你
推荐阅读
- python - 如何将图像插入到 svg 的圆形元素中?(Python:svgwrite)
- javascript - React google maps api标记在包含在多个地图函数中时不显示
- sql - 使用 UNPIVOT 并将数字列增加 1
- windows - 服务状态搜索的Powershell问题
- firebase - 如何在 firestore 的 doc(path) 中获得选项
- reactjs - 如何将前端 ReactJS 套接字客户端连接到服务器端套接字?
- apache-calcite - 是否可以实现支持 INSERT/UDPATE/DELETE 的方解石适配器?
- javascript - 我正在尝试在节点 js 中获取输入,但程序会在接下来的指令后立即运行
- spring-boot - org.springframework.boot.actuate.metrics.export.prometheus.PrometheusScrapeEndpoint 上的奇怪格式“java.lang.NoSuchFieldError:INFO 错误”
- magento - 无法更新 installData 中的用户属性