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

Question

我需要创建一个脚本，该脚本从表单中获取数据，然后将其发送到服务器（上面有一些恶作剧的C＃过程，这不是我的工作...），服务器解析该字符串并用4个字符串回复我（是的，它们是西班牙语）：“ pendiente”，“ verificada”，“ rechazada”，最后是“错误”现在，我必须得到该响应并正确显示正确的消息（隐藏的内联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');
            }
        });
    });
});

这是JSFiddle

---

编辑：现在，我刚发现这两个链接learning.jquery.com/code-organization/concepts/ Learn.jquery.com/code-organization/beware-anonymous-functions/

搞砸我的代码！ ：d

Answer 1

异步默认情况下为“ true”，因此您无需在代码中提及该异步代码。

您包括了到服务器的链接（在URL字段中），但是您要打开的文件是什么？ 您将需要包括从中获取数据的路径（文件/脚本）。 为了使Ajax正常工作，您需要遵守“相同来源策略”，因此您可以插入文件/脚本的相对路径。

您的呼叫响应是否始终是带有这些关键字之一（“ pendiente”，“ verificada”，“ rechazada”或“ error”）的短字符串？ 在那种情况下，我会建议使用“文本”而不​​是“ html”作为数据类型，因为jQuery会尝试将其解析为DOM结构，这不是您想要的。

您的if语句（以及类分配）无法正常工作，因为您尝试将其与非自变量（而不是具有该值的字符串）进行比较。 您应该在字符串周围使用“或”来解决该问题。

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

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

如果您处理多个Ajax调用，请谨慎使用.addClass，因为它们会彼此叠加。