Javascript 使用AJAX和Jquery从服务器请求数据

我需要创建一个脚本，从表单中获取数据，将其发送到服务器（上面有一些可怕的C#过程，这不是我的工作…），服务器解析字符串并用4个字符串回复我（是的，它们是西班牙语）：“pendiente”、“verificada”、“rechazada”，最后是“error” 现在，我必须得到响应并正确显示正确的消息（隐藏的内联html）。 所有这些过程都不应该“刷新”实际页面，因此我使用AJAX来实现这一点

记住我是个新手：）我学习Jquery就是为了完成这个任务， 我必须说，我对此感到非常高兴

问题 我真的不知道如何使用Jquery处理或“操纵”该请求。。。我知道如何将数据发送到服务器，但我认为我没有正确处理响应

守则： 在本例中，我修改了脚本，每个不同的响应都应该有自己的边框颜色，我使用条件（它们肯定是错误的）将CSS类添加到#ajax div中

所以，它可能会有愚蠢的错误

$(document).ready(function () {
    $('#enviar').click(function (event) {
        event.preventDefault(); //avoid page refresh

       var consulta = $('#string').val();
       $("#normal").text(consulta);

//Start AJAX!        
        $.ajax({
            async: true,
            cache: false,
            type: 'post',
            url: 'http://184.22.97.218:8081/chequeostatusdonation', //la del servr
            data: {
                html: consulta
            },
            dataType: 'html',
            beforeSend: function () {
                console.log('Sending...');
            },
            success: function (data) {
                console.log('Just sent -'+data+'- with success dooh');
                $('#ajax').html(data);
                //start conditional
        if (data == pendiente) {
            $("#ajax").addClass(pendiente);
        } else if (data == verificada) {
            $("#ajax").addClass(verificada);
        } else if (data == rechazada) {
            $("#ajax").addClass(rechazada);
        } else {
            $("#ajax").html('<h1>error</h1>');
        }
            //end condicional
            },
            complete: function () {
                console.log('Listo el pollo');
            }
        });
    });
});

$（文档）.ready（函数（）{
$（“#enviar”）。单击（函数（事件）{
event.preventDefault（）；//避免页面刷新
var consulta=$（'#string'）.val（）；
$（“#正常”）。文本（咨询）；
//启动AJAX！
$.ajax({
async:true，
cache:false，
键入：“post”，
网址：'http://184.22.97.218:8081/chequeostatusdonation“，//ladelservr
数据：{
html:consulta
},
数据类型：“html”，
beforeSend:函数（）{
console.log（'Sending…'）；
},
成功：功能（数据）{
log（'Just sent-'+data+'-with success dooh'）；
$（'#ajax'）.html（数据）；
//开始条件
如果（数据==pendiente）{
$（“#ajax”）.addClass（pendiente）；
}else if（数据==验证数据）{
$（“#ajax”）.addClass（verificada）；
}否则如果（数据==rechazada）{
$（“#ajax”）.addClass（rechazada）；
}否则{
$（“#ajax”）.html（'error'）；
}
//末端条件
},
完成：函数（）{
console.log（'Listo el pollo'）；
}
});
});
});

这是

---

编辑：现在，我刚刚找到了这两个链接 learn.jquery.com/code-organization/concepts/ learn.jquery.com/code-organization/careed-anonymous-functions/

去我的密码D

异步默认为“true”，因此您不需要在代码中提及该选项

您包含了一个指向服务器的链接（在URL字段中），但是您试图打开的文件是什么？您需要包括从中获取数据的路径（文件/脚本）。要使Ajax工作，您需要遵守“同源策略”，以便可以插入文件/脚本的相对路径

您的呼叫响应是否总是包含以下关键字之一的短字符串（“pendiente”、“verificada”、“rechazada”或“error”）？在这种情况下，我将使用“文本”而不是“html”作为数据类型重新编译，因为jQuery将尝试将其解析为DOM结构，这不是您在这里想要的

您的if语句（以及类赋值）不起作用，因为您试图将其与非激励变量进行比较，而不是与具有该值的字符串进行比较。您应该在字符串周围使用“or”来解决这个问题

此代码应能正常工作。如果不能，请告诉我。请在浏览器控制台中包含给出的错误

$(document).ready(function () {
    $('#enviar').click(function (event) {
        event.preventDefault(); //avoid page refresh

       var consulta = $('#string').val();
       $("#normal").text(consulta);

        //Start AJAX!        
        $.ajax({
            type: 'POST',
            cache: false,
            url: 'RELATIVE_PATH_HERE', //la del servr
            data: {
                html: consulta
            },
            dataType: 'text',
            beforeSend: function () {
                console.log('Sending...');
            },
            success: function (data) {
                console.log('Just sent -'+data+'- with success dooh');
                $('#ajax').html(data);
                //start conditional
             if (data === 'pendiente') {
               $("#ajax").addClass('pendiente');
             } else if (data === 'verificada') {
               $("#ajax").addClass('verificada');
             } else if (data === 'rechazada') {
               $("#ajax").addClass('rechazada');
             } else {
               $("#ajax").html('<h1>error</h1>');
            }
            //end condicional
            },
            complete: function () {
                console.log('Listo el pollo');
            },
            error: function() {
                console.log('Problem with XHR-request');
        });
    });
});

$（文档）.ready（函数（）{
$（“#enviar”）。单击（函数（事件）{
event.preventDefault（）；//避免页面刷新
var consulta=$（'#string'）.val（）；
$（“#正常”）。文本（咨询）；
//启动AJAX！
$.ajax({
键入：“POST”，
cache:false，
url:'RELATIVE_PATH_HERE'，//la del servr
数据：{
html:consulta
},
数据类型：“文本”，
beforeSend:函数（）{
console.log（'Sending…'）；
},
成功：功能（数据）{
log（'Just sent-'+data+'-with success dooh'）；
$（'#ajax'）.html（数据）；
//开始条件
如果（数据=='pendiente'）{
$（“#ajax”）.addClass（'pendiente'）；
}else if（数据=='verificada'）{
$（“#ajax”）.addClass（'verificada'）；
}否则如果（数据=='rechazada'）{
$（“#ajax”）.addClass（'rechazada'）；
}否则{
$（“#ajax”）.html（'error'）；
}
//末端条件
},
完成：函数（）{
console.log（'Listo el pollo'）；
},
错误：函数（）{
log（“XHR请求有问题”）；
});
});
});

---

如果要处理多个Ajax调用，就要小心使用.addClass，因为它们会相互添加。

您的意思是要使用

if（data==='pendiente'）

来比较特定的字符串值吗？使用该“语句”，我想说的是“服务器是否返回了字符串'pendiente'（文本）"然后执行此代码…我不知道是否可以，我已经尝试用您编写的内容更改脚本，但不起作用。该“数据”取自$.ajax函数，我不知道我是否可以执行该操作，除非

pendiente

是您定义的javascript变量，如果要与字符串值进行比较，则必须将compari引号中的子字符串。您可能也有其他问题。您应该在浏览器错误控制台中查看有哪些脚本错误。这是脚本不工作时首先要查看的地方。仅供参考，您的

addClass（）

还需要引号中的字符串。谢谢…检查主帖子中的JSFIDLE，我已经声明了变量和